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

Posted 2023-03-12

【中文标题】iOS 动画 - 像 Siri 一样向上滚动文字

【英文标题】：iOS animation - upward scroll of text like Siri

【发布时间】：2014-07-30 21:16:18

【问题描述】：

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

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

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

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

在此先感谢大家。

【问题讨论】：

我刚刚看了一个关于动画的 WWDC 视频。他们表示，对于他们使用的特定 siri 动画：[UIView animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:]。他们如何使用它是另一回事。

@WilliamGeorge 嗯...我不认为他正在谈论的动画使用这种方法。它更有可能使用关键帧动画，因为动画具有三个独立的部分。是哪个 WWDC 会议？

@Fogmeister asciiwwdc.com/2014/sessions/221 - 搜索We use a single Spring Animation to pull the text onscreen

@WilliamGeorge 好吧。其实有道理。需要比我的答案更多的代码，但我的答案会做同样的事情:) 只是略有不同。

@WilliamGeorge 更新了我的答案。但是如果这台笔记本电脑上没有 Xcode，我不会尝试对其进行编码，哈哈。

【参考方案1】：

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

动画可以分为几个阶段。

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

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

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

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

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

【讨论】：

嗨 Fogmeister，我尝试了你的代码，但我收到了这样的错误 -[__NSCFConstantString setFrame:]: unrecognized selector sent to instance 0xa22f8 你能纠正这个错误吗？在这一行它显示错误标签.frame = CGRectMake(0, firstLabelStartTop + 30 * idx, 320, 21);

@MANCHIKANTIKRISHNAKISHORE 这是因为您正在尝试设置NSString 的框架。 NSString 没有 frame。您需要设置 UILabel 或 UITextField 的框架或用于显示字符串的任何内容。

感谢您的回复 Fogmeister ...错误已解决...非常感谢您在代码中更改的几行代码...

kishoremk.blogspot.in/2015/01/siri-lables-animation-in-ios.html参考这个链接