ios - 如何制作一个秘密的 iOS 应用文本动画

Question

我正在尝试复制 Secret App 的文本标签转换。有没有人最好的方法来接近它？

看起来他们让每个字母都以清晰的文本颜色开始，然后将其动画为灰色，然后是白色文本颜色。

以下是一些截图：

Answer 1

这是另一个解决方案https://github.com/zipme/RQShineLabel

我将 CADisplayLink 与 NSAttributedString 一起使用，这样我们只需要一个 UILabel，看看 :)

Answer 2

感谢大家的帮助。我能够通过一些修改来完成这项工作，以保持标签一遍又一遍地淡入淡出。这是我的完整源代码：https ://github.com/NatashaTheRobot/SecretTextAnimationExample

Answer 3

我只是想通过一个简单的例子来扩展@matt 所说的内容，说明如何做到这一点。您从两个标签开始，一个直接在另一个之上，具有相同的属性和对齐方式。在两个标签都配置好并准备好制作动画之后，您所要做的就是淡出顶部标签。

- (void)awakeFromNib
{
    [super awakeFromNib];

    [self.view setBackgroundColor:[UIColor blackColor]];

    NSString *text = @"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

    UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 100.0, 320.0, 200.0)];
    [label1 setNumberOfLines:0];
    [label1 setBackgroundColor:[UIColor clearColor]];
    [label1 setAttributedText:[self randomlyFadedAttStringFromString:text]];
    [self.view addSubview:label1];

    UILabel *label2 = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 100.0, 320.0, 200.0)];
    [label2 setNumberOfLines:0];
    [label2 setBackgroundColor:[UIColor clearColor]];
    [label2 setTextColor:[UIColor whiteColor]];
    [label2 setAttributedText:[[NSAttributedString alloc] initWithString:text]];
    [self.view addSubview:label2];

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [UIView animateWithDuration:1.0 animations:^{
            [label2 setAlpha:0.0];
        } completion:^(BOOL finished) {
            [label2 removeFromSuperview];
        }];
    });
}

然后为底部标签创建一个特殊的属性字符串。此属性字符串不应修改您在属性以外的其他标签上设置的任何NSForegroundColorAttributeName属性。您可能想也可能不想想出某种算法来确定哪些字母应该褪色多少，但下面的代码将从输入字符串生成一个属性字符串，其中每个字母 alpha 只是 0 之间的随机值和 1。

- (NSAttributedString *)randomlyFadedAttStringFromString:(NSString *)string
{
    NSMutableAttributedString *outString = [[NSMutableAttributedString alloc] initWithString:string];

    for (NSUInteger i = 0; i < string.length; i ++) {
        UIColor *color = [UIColor colorWithWhite:1.0 alpha:arc4random_uniform(100) / 100.0];
        [outString addAttribute:NSForegroundColorAttributeName value:(id)color range:NSMakeRange(i, 1)];
    }

    return [outString copy];
}

Answer 4

这是一种可能的方法。

首先，让我们注意一个 UILabel 可以保存和显示一个 NSAttributedString。使用 NSMutableAttributedString，您可以使每个字母具有不同的颜色。

所以，从两个标签开始，一个在另一个上面（即在它前面，隐藏它），具有相同的文本但不同的字母颜色。现在将顶部 1 的 alpha 淡化为零，从而逐渐显露它后面的 alpha。因此，每个字母似乎会逐渐呈现其背后字母的颜色。