生成UILabel的文本变化
我想在UILabel中设置animation文字的变化。
例如:旧文本向上移动,新文本从底部移入。
我已经意识到,我需要标签。 一个是旧的,一个是新的文本。 第二个UILabel
位于第一个之下。 然后两个animation。
但是,如何切断第一个标签,使其通过框架顶部的animation?
使用UIView
扩展
你不需要多个标签。 您可以使用单个标签在适当的位置进行animation处理:
– 利用内置CALayer
animation和UIView
扩展
– 在故事板中,将UILabel
放入带有剪辑子视图标记(脚注)的UIView
。
– pushTransition
适用于大多数UIView
1.扩展
// Usage: insert view.pushTransition right before changing content extension UIView { func pushTransition(_ duration:CFTimeInterval) { let animation:CATransition = CATransition() animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut) animation.type = kCATransitionPush animation.subtype = kCATransitionFromTop animation.duration = duration layer.add(animation, forKey: kCATransitionPush) } }
Swift 2及更早版本(请参阅Steve self.layer.addAnimation(animation, forKey: kCATransitionPush)
的评论):使用self.layer.addAnimation(animation, forKey: kCATransitionPush)
2. pushTransition
调用
if let aLabel = label { aLabel.pushTransition(0.4) aLabel.text = "\(count)" count += 1 }
3.在行动
你甚至可以控制曲线,持续时间和方向† 。
(†)剪切是达到预期效果的重要步骤。
►在GitHub上find这个解决scheme和Swift Recipes的更多细节。
Objective-C的
Swift UIView扩展可以通过Interface Extension
在Objective-C中解决。
1. Interface Extension
@interface UIView (SO33632266) - (void)pushTransition:(CFTimeInterval)duration; @end @implementation UIView (SO33632266) // Usage: insert [view pushTransition:]; right before changing content - (void)pushTransition:(CFTimeInterval)duration { CATransition *animation = [CATransition new]; animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; animation.type = kCATransitionPush; animation.subtype = kCATransitionFromTop; animation.duration = duration; [self.layer addAnimation:animation forKey:kCATransitionPush]; } @end
2. pushTransition
调用
[aLabel pushTransition:0.4]; aLabel.text = [[NSString alloc] initWithFormat:@"%ld", (long) ++self.count];
3.在行动
一次性: 无接口扩展:
CATransition *animation = [CATransition animation]; animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; animation.type = kCATransitionPush; animation.subtype = kCATransitionFromTop; animation.duration = 0.4; [aLabel.layer addAnimation:animation forKey:@"kCATransitionPush"];
调用:
aLabel.text = [[NSString alloc] initWithFormat:@"%ld", (long) ++self.count];
QuartzCore为animation转换操作提供了一个CATransition
类。 CATransition
有以下定义:
CATransition
类实现图层的过渡animation。 您可以从一组预定义的转换中指定转换效果,或者通过提供自定义的CIFilter
实例来指定转换效果。
为了通过向上推动旧文本来使标签的文本转换成animation,必须创build一个CATransition
的实例,并将其type
设置为CATransition
,并将其type
设置为kCATransitionFromTop
:
let animation = CATransition() animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut) animation.type = kCATransitionPush animation.subtype = kCATransitionFromTop animation.duration = 1
然后,您可以通过将animation添加到标签的图层来为标签的文本转换设置animation效果:
label.layer.add(animation, forKey: nil) label.text = "Some new content"
下面的Swift 3 Playground代码显示了一个可能的实现,以便使用CATransition
animationUILabel
的文本转换:
import UIKit import PlaygroundSupport class ViewController: UIViewController { let label: UILabel = { $0.frame.origin = CGPoint(x: 50, y: 50) $0.text = "Bob" $0.sizeToFit() return $0 }(UILabel()) let animation: CATransition = { $0.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut) $0.type = kCATransitionPush $0.subtype = kCATransitionFromTop $0.duration = 1 return $0 }(CATransition()) override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = .white view.addSubview(label) let tapGesture = UITapGestureRecognizer(target: self, action: #selector(toggle(_:))) view.addGestureRecognizer(tapGesture) } func toggle(_ sender: UITapGestureRecognizer) { label.layer.add(animation, forKey: nil) label.text = label.text == "Bob" ? "Dan" : "Bob" label.sizeToFit() } } let controller = ViewController() PlaygroundPage.current.liveView = controller