UILabel Animated Letter

Question

私は画像のようにアニメーションを作ろうとしています。私が与えるコード例では、クリック後の文字がオーバーレイされています。どのようにして絵のようなアニメーションを作成できますか？

ありがとうございます。一般的に

func letterTapAction(sender: UITapGestureRecognizer) { 
    for label in lettesLabel { 
     if sender.view == label { 
      copyLabelAndAnimate(fromLabel: label) 
     } 
    } 
} 

func copyLabelAndAnimate(fromLabel: UILabel) { 
    let copiedLabel = UILabel.init(frame: CGRect(x: fromLabel.frame.minX, y: fromLabel.frame.minY ,width: fromLabel.bounds.width, height: fromLabel.bounds.height)) 
    copiedLabel.text = fromLabel.text! 
    copiedLabelsTagCounter += 1 
    copiedLabel.tag = copiedLabelsTagCounter 
    copiedLabel.font = UIFont.init(name: "Noteworthy-Bold", size: 28.0) 
    view.addSubview(copiedLabel) 


    //UIView.removeFromSuperview(view.viewWithTag(101)!) 

    UIView.animate(withDuration: 0.2, animations: { 
     copiedLabel.frame.origin = CGPoint.init(x: self.view.frame.size.width/2 + CGFloat(self.spaceForCopiedLabels), y: self.view.frame.minY + CGFloat(15)) 
    }) 

    if lettersThatNeedLessSpace.characters.contains(copiedLabel.text!.characters.first!) { 
     spaceForCopiedLabels -= 8 
    } 

    spaceForCopiedLabels += 25 

} 

Answer 1

：

• は、ラベルごとに1つの文字（あなたの例では、それらのように10）を持っており、底面積のクラスからそれらを管理します。
• ラベルをコピーしないで、単に下から行に移動するだけでなく、backgroundColorとtextColorも変更してください。
• 行を管理するクラスを作成します。次の文字が追加されたときに、次の文字の中心座標を計算するメソッドを行クラスで作成します。

ユーザーが下部に文字をタップ：

• 次の文字の座標ラインオブジェクトを確認して下さい。
• その行座標を下の領域の座標空間に変換します。
• UIViewアニメーションを下部領域から新しい座標に変更します。
• アニメーションが開始されたら、新しい文字が来ていることをその行に伝えます。これにより、ラインオブジェクトは既存の文字を少し左に移動させることができます。
• アニメーションが完了したら、タップされたUILabelを下部領域のビュー階層からその行に移動できます。