UILabel的动画文本更改

时间:2015-11-10 14:26:29

标签: ios swift

我想在UILabel中为文本更改设置动画。

例如:旧文本向上移动,新文本从底部移入。

我已经意识到我需要标签。一个用于旧的,一个用于新文本。第二个UILabel位于第一个$ rvm rubygems latest下方。然后两个都动起来了。

但是,如果第一个标签在框架的顶部动画过去,你如何切断第一个标签?

3 个答案:

答案 0 :(得分:102)

使用UIView扩展程序

使用单个标签动画到位
  - 利用内置的CALayer动画和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)
    }
}

<强> 2。调用

if let aLabel = label {
    aLabel.pushTransition(0.4) // Invoke before changing content
    aLabel.text = "\(count)"
    count += 1
}

第3。实施例

带有kCAMediaTimingFunctionEaseInEaseOut曲线,0.4秒持续时间和kCATransitionFromTop方向的动画。

CALayer Animation

(†)剪切是实现预期效果的重要步骤。

Swift 2及更早版本,请参阅Steve Baughman的评论:
self.layer.addAnimation(animation, forKey: kCATransitionPush)

►在GitHub上找到此解决方案,并在Swift Recipes上找到其他详细信息。

答案 1 :(得分:6)

<强>目标C

Swift UIView Extension 可以使用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。在行动

UILabel animation

一次性:没有接口扩展:

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];

答案 2 :(得分:0)

QuartzCore为动画转换操作提供了CATransition类。 CATransition具有以下定义:

  

CATransition类为图层实现过渡动画。您可以从一组预定义的转换中指定转换效果,也可以通过提供自定义CIFilter实例来指定转换效果。

为了通过向上推送旧文本来激活标签的文本转换动画,您必须创建CATransition的实例并将其type设置为kCATransitionPush及其{ {1}}到subtype

kCATransitionFromTop

然后,您可以通过将动画添加到标签的图层来为标签的文本转换设置动画:

let animation = CATransition()
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
animation.type = kCATransitionPush
animation.subtype = kCATransitionFromTop
animation.duration = 1

以下Swift 3 Playground代码显示了一种可能的实现方式,以便使用label.layer.add(animation, forKey: nil) label.text = "Some new content" UILabel的文本转换设置动画:

CATransition