iOS 动画 - 像 Siri 一样向上滚动文字

Question

我希望在我的 iOS 应用程序中添加一个动画，该动画几乎与您在使用 Siri 时看到的动画相同，它会显示您可以提出的可能问题。

效果是向上滚动的文本被多于来自下方的内容所取代，但效果是一种方式，并非所有问题都一起移动，它们似乎是独立的并且相互跟随。

我喜欢这个动画并想在我的应用程序中模拟它 - 但我不知道如何解决这个问题。到目前为止，我在应用程序中唯一参与的动画是 CrossDissolve、FlipFromLeft 等。

有没有人知道一个教程可以教授这样的效果，或者可以为我指出正确的开始方向？

在此先感谢大家。

Answer 1

快速浏览一下，它看起来相当简单。

动画可以分为几个阶段。

首先，有 5 个 UILabels 分别动画。每个标签在前一个标签上都有很短的延迟。

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

1. 将标签的边框设置在屏幕下方，并将 alpha 设置为 0.0。
2. 在大约 0.2 秒的持续时间内，将标签的框架设置为在屏幕上高出大约 300 点和 1.0 的 alpha。
3. 在大约 2 或 3 秒内将标签的框架设置为在屏幕上高出大约 30 个点。
4. 在屏幕上将标签的帧动画再高出 300 点，并在大约 0.2 秒内再次将 alpha 恢复为 0.0。
5. 更改标签上的文字并重复。

我认为最简单的方法是使用方法...

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

让我在实际代码中尝试一下，然后回复您。代码完成有很大帮助。

好的，这就去

该死，我刚刚安装了 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 个单独的动画，但它仍然与我在此答案中提出的想法相似。