iOS动画 - 向上滚动文本,如Siri

时间:2014-07-30 21:16:18

标签: ios objective-c animation core-animation

我希望在我的iOS应用程序中有一个动画,它几乎与您在使用Siri时看到的动画相同,因为它显示了您可以提出的问题。

效果是向上滚动的文本被替换为来自下方而不是来自下方,但效果是一种方式,其中并非所有问题都作为一个整体移动,它们似乎是独立的并且相互跟随。

我喜欢这个动画,想在我的应用程序中模仿它 - 但我还没有第一个想法如何解决这个问题。到目前为止,我在我的应用程序中仅涉及动画,例如CrossDissolve,FlipFromLeft等。

有没有人知道教这样效果的教程,还是能指出我正确的方向开始?

提前感谢所有人。

1 个答案:

答案 0 :(得分:2)

快速查看它看起来相当直接。

动画可分为几个阶段。

首先,分别有5个UILabels动画。每个标签都有很短的延迟。

每个标签都像这样动画......

  1. 在屏幕上将标签的框架设置为低,并将alpha设置为0.0。
  2. 将标签的边框设置为在屏幕上高出约300点,并在大约0.2秒的持续时间内将其设置为1.0。
  3. 在约2或3秒钟内将标签的框架设置为在屏幕上高出约30个点。
  4. 将标签的框架在屏幕上再高300点,再将alpha恢复为0.0,再过0.2秒。
  5. 更改标签上的文字并重复。
  6. 我认为最简单的方法是使用方法......

    + (void)animateKeyframesWithDuration:(NSTimeInterval)duration
                                   delay:(NSTimeInterval)delay
                                 options:(UIViewKeyframeAnimationOptions)options
                              animations:(void (^)(void))animations
                              completion:(void (^)(BOOL finished))completion
    

    Lemme在实际代码中试一试并回复您。代码完成有很大帮助。

    好的,这里有

    Darn,我刚刚安装了Yosemite并且没有Xcode。好的,我在这里试一试......

    - (void)animateLabels:(NSArray *)labels
    {
        CGFloat firstLabelStartTop = 600;
    
        [labels enumerateObjectsUsingBlock:^(UILabel *label, NSUInteger idx, BOOL *stop) {
            CGFloat delay = 0.1 * idx;
    
            label.frame = CGRectMake(0, firstLabelStartTop + 30 * idx, 320, 21);
            label.alpha = 0.0;
    
            [UIView animateKeyFramesWithDuration:2.4
                                           delay:delay
                                         options:0
                                      animations:^{
                                          [UIView addKeyframeWithRelativeStartTime:0.0
                                                                  relativeDuration:0.1
                                                                        animations:^{
                                                                            label.alpha = 1.0;
                                                                            label.frame = CGRectOffset(label.frame, 0, -200);
                                                                        }];
                                          [UIView addKeyframeWithRelativeStartTime:0.1
                                                                  relativeDuration:0.9
                                                                        animations:^{
                                                                            label.frame = CGRectOffset(label.frame, 0, -30);
                                                                        }];
                                          [UIView addKeyframeWithRelativeStartTime:0.9
                                                                  relativeDuration:0.1
                                                                        animations:^{
                                                                            label.alpha = 0.0;
                                                                            label.frame = CGRectOffset(label.frame, 0, -200);
                                                                        }];
                                      }
                                      completion:nil];
        }];
    }
    

    这是第一次尝试没有Xcode检查我的代码而根本无法运行它所以它可能不完美但它应该让你知道从这里去的地方。

    修改

    来自@WilliamGeorges评论看起来他们使用我在my blog中详述的方法使用了完全独立的动画的组合。

    你必须在每个标签上做3个单独的动画,但它仍然与我在这个答案中的内容相似。