如何在延迟后为UILabel的文本制作动画?

时间:2017-05-10 08:35:13

标签: ios swift3 uilabel uiviewanimation

我有UIButton,我想通过访问其titleLabel属性来更改其文字。但是,我希望按钮改变文本的方式是首先缩小到非常小的尺寸,然后在它不可见时立即改变,然后缩小。在浏览了这里的多个帖子后,我已经达到了这个目标:

 let changeText = CATransition();
    changeText.type = kCATransitionReveal;
    changeText.duration = 0.0;
    changeText.timingFunction = CAMediaTimingFunction(name:kCAMediaTimingFunctionLinear);
    submitButton.titleLabel?.layer.add(changeText, forKey: "changeTextTransition");


    UIView.animateKeyframes(withDuration: 0.6, delay: 0, options: .calculationModeLinear, animations: {
        //Zzzeeeewwwwwwwwww
        UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.5, animations: {
            self.submitButton.titleLabel?.transform = self.submitButton.titleLabel!.transform.scaledBy(x: 0.001, y: 0.001);
        })


        UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.0, animations: {
            self.submitButton.titleLabel?.text = "Green";
        })

        //Wwwwwweeeeeeyyyyyppp
        UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5, animations: {
            self.submitButton.titleLabel?.transform = self.submitButton.titleLabel!.transform.scaledBy(x: 1000, y: 1000);
        })
    }, completion: nil)

问题是这不起作用。我得到的是标签缩小时“New Text”字样的快速闪烁,然后当它缩小时,它仍然是“旧文本”。这太奇怪了,我甚至无法开始围绕可能的原因。我认为正在发生的事情是它在新文本缩小之前播放新文本的显示转换(不知道为什么因为我指定的持续时间= 0),然后重新生成旧文本。

这是它的样子(我上面省略了一些背景颜色变化):

Weird Bug

1 个答案:

答案 0 :(得分:3)

首先,祝贺您在代码评论中包含声音效果,很高兴不仅仅是那样做。

标签的text属性无法设置动画,因此会立即应用,破坏动画。

我使用很多复杂动画的解决方案是使用快照。在动画开始时,创建标签的快照,然后将标签的alpha设置为零并更新文本。然后,将标签和快照的变换设置为动画,当它们变小时,使标签可见并使快照不可见,然后进行动画备份。

听起来比这更复杂,这是在操场上运行它的代码:

import UIKit
import PlaygroundSupport

let view = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))
view.backgroundColor = .blue
PlaygroundPage.current.liveView = view

let label = UILabel(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
label.text = "Hello"
label.font = UIFont.systemFont(ofSize: 50)
label.textAlignment = .center
label.textColor = .white
view.addSubview(label)

let snapshot = label.snapshotView(afterScreenUpdates: true)!
view.addSubview(snapshot)
snapshot.frame = label.frame
label.alpha = 0
label.text = "Goodbye"

UIView.animateKeyframes(withDuration: 2, delay: 0, options: [.repeat, .autoreverse], animations: { 
    UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.45) {
        label.transform = CGAffineTransform(scaleX: 0.01, y: 0.01)
        snapshot.transform = label.transform
    }

    UIView.addKeyframe(withRelativeStartTime: 0.45, relativeDuration: 0.1) {
        label.alpha = 1.0
        snapshot.alpha = 0.0
    }

    UIView.addKeyframe(withRelativeStartTime: 0.55, relativeDuration: 0.45) {
        label.transform = CGAffineTransform.identity
    }
}) { _ in
    snapshot.removeFromSuperview()
}

这会给你这个结果:

enter image description here

我不清楚你在尝试用CATransition做什么 - 除非你还在寻找另一种效果,这对你的事业没有帮助。