iOS 动画——像 Siri 一样向上滚动文本

Question

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

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

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

有谁知道教授这种效果的教程，或者可以指出正确的开始方向？

提前感谢大家。

Answer 1

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

动画可以分解成几个阶段。

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

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

1. 将标签的框架设置在屏幕下方并将 alpha 设置为 0.0。
2. 在大约 0.2 秒的持续时间内将标签的框架设置为在屏幕上高出大约 300 点并且 alpha 为 1.0 的动画。
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 个单独的动画，但这仍然与我在此答案中提出的想法类似。