How to Make a Secret iOS App Text Animation

Question

I'm trying to duplicate the Secret App's Text Label transition. Does anyone the best way to approach it?

It looks like they have each letter start out as clear text color and then animate it to gray and then white text color.

Here are some screenshots:

Answer 1

Here is another solution https://github.com/zipme/RQShineLabel

I use CADisplayLink together with NSAttributedString that way we only need one UILabel, have a look :)

Answer 2

Thanks everyone for the help. I was able to get this working with some modification to keep the label fading in over and over. Here is my full source code: https://github.com/NatashaTheRobot/SecretTextAnimationExample

Answer 3

Here's a possible way.

First, let's note that a UILabel can hold and display an NSAttributedString. Using NSMutableAttributedString, you can make each letter a different color.

So, start with two labels, one right on top of the other (ie in front of it, hiding it), with the same text but different letter colorings. Now fade the alpha of the top one to zero, thus gradually revealing the one behind it. Thus each letter will seem gradually to assume the color of the letter behind it.

Answer 4

I'm only really going to expand on what @matt said with a quick example of how this could be done. You start with two labels, one directly on top of the other with the same attributes and alignments. After both the labels are configured and you're ready to animate, all you have to do is fade out the top label.

- (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];
        }];
    });
}

Then create a special attributed string for the bottom label. This attributed string shouldn't modify any attribute that you've set on the other label other than the NSForegroundColorAttributeName attribute. You may or may not want to come up with an algorithm of some sort to determine which letters should get faded by what amount, but the code below will generate an attributed string from an input string where each letters alpha is just a random value between 0 and 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];
}