Question

我正在处理的应用中有一个分数计数器。我不想仅仅改变数字，而是希望过渡到新的分数淡出，而旧的分数会逐渐缩小并淡出。

以下是我的最接近的结果：

     UIView.animateWithDuration(0.6, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut, animations: {

        self.scoreOutlet.text = "\(self.numberFormatter.stringFromNumber(self.score)!)"
        self.scoreOutlet.transform = CGAffineTransformMakeScale(1.5, 1.5)
        self.scoreOutlet.alpha = 0.0

        }) { (_) in
            UIView.animateWithDuration(0.0, animations: {

                self.scoreOutlet.transform = CGAffineTransformMakeScale(1.0, 1.0)
                self.scoreOutlet.alpha = 1.0

            })
    }

我希望这些同时发生。我意识到闭包发生在初始动画的0.6秒之后，但是没想到嵌套animateWithDuration块是最干净的方法。

期望的结果

如果分数从20变为25： 25会淡入，但与此同时，20会逐渐消失，缩小，稍微向上移动（略微向上移动的部分不在我上面的代码尝试中。）

Answer 1

制作2个标签，1为新旧的得分1，这样两者都可以在1个动画中完成，并且在完成时，将新分数设置为oldScoreLabel，以便另一个准备就绪，当你以后更新分数。

你应该得到这样的东西：

 UIView.animateWithDuration(0.6, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut, animations: {
        self.scoreOutlet.alpha = 0.0

        self.newScoreOutlet.text = "\(self.numberFormatter.stringFromNumber(self.score)!)"
        self.newScoreOutlet.transform = CGAffineTransformMakeScale(1.5, 1.5)
        self.newScoreOutlet.alpha = 1.0

        }) { (_) in
            UIView.animateWithDuration(0.0, animations: {

                self.newScoreOutlet.transform = CGAffineTransformMakeScale(1.0, 1.0)
                self.newScoreOutlet.alpha = 0.0

                self.scoreOutlet.alpha = 1.0
                self.scoreOutlet.text = self.newScoreOutlet.text
            })
    }

Answer 2

一个相对丑陋的解决方案是在文本字段上放置两个标签，分别代表淡入和淡出视图，然后通过调整transform和alpha属性来设置它们的动画。 / p>

首先，我们需要找到文本字段放置位置的框架：

let textRect = textField.textRectForBounds(textField.bounds)

然后，我们创建标签并将其添加到textField：

中

let fadeOutTextLabel = UILabel(frame: textRect)
fadeOutTextLabel.text = textField.text
fadeOutTextLabel.textColor = textField.textColor
fadeOutTextLabel.font = textField.font

let fadeInTextLabel = UILabel(frame: textRect)
fadeInTextLabel.text = textField.text == "20" ? "25": "20"
fadeInTextLabel.textColor = textField.textColor
fadeInTextLabel.font = textField.font

fadeInTextLabel.alpha = 0.0
fadeInTextLabel.transform = CGAffineTransformMakeScale(1.5, 1.5)

textField.addSubview(fadeInTextLabel)
textField.addSubview(fadeOutTextLabel)

-

由于缩放视图可能会导致视图超出其超视图的范围，因此我们应将clipsToBounds设置为false以防止其被裁剪：

textField.clipsToBounds = false

-

在动画块中，我们需要做的就是交换两个标签的transform和alpha值：

UIView.animateWithDuration(
  0.7,
  animations: {
    fadeOutTextLabel.transform = CGAffineTransformMakeScale(1.5, 1.5)
    fadeOutTextLabel.alpha = 0.0

    fadeInTextLabel.transform = CGAffineTransformIdentity
    fadeInTextLabel.alpha = 1.0
  },
  completion: { finished in
    fadeOutTextLabel.removeFromSuperview()
    fadeInTextLabel.removeFromSuperview()

    self.textField.clipsToBounds = true
    self.textField.text = fadeInTextLabel.text
})

-

您可以从here下载示例项目。

animateWithDuration - UITextField中的FadeIn / FadeOut动画

2 个答案: