animateWithDuration

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 属性来设置动画.

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

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 - FadeIn/FadeOut UITextField 中的动画

animateWithDuration - FadeIn/FadeOut animation in UITextField

ios

swift