UILabel动画信

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从底部区域的视图层次结构移动到该行。