CODEWITHSUNDEEP
iosobjective-canimationcore-animation
user1309044
user1309044

Reputation: 317

iOS animation - upward scroll of text like Siri

I am looking to have an animation in my iOS app which is almost identical to the animation you see when you use Siri when it is displaying possible questions you can ask it.

The effect is an upward scroll of text replaced by more than come from below but the effect is one in a way where not all the questions move as one together, they seem to be independent and follow each other.

I like this animation and would like to emulate it in my app - but I haven't the first idea how to go around this. My only involvement with animations within my apps so far are ones such as CrossDissolve, FlipFromLeft, etc.

Does anyone know of a tutorial which teaches an effect like this, or can point me in the right direction to start?

Thanks to all in advance.

Upvotes: 1

Views: 1244

Answers (1)

Fogmeister
Fogmeister

Reputation: 77651

Having a quick look it looks fairly straight forward.

The animation can be broken down into several stages.

First, there are 5 UILabels animated separately. Each with a very short delay on the previous label.

Each label is animated like this...

  1. Set the frame of the label to be low down on the screen and set alpha to 0.0.
  2. Animate the frame of the label to around 300 points higher on the screen and alpha of 1.0 over a duration of around 0.2 seconds.
  3. Animate the frame of the label to about 30 points higher on the screen over about 2 or 3 seconds.
  4. Animate the frame of the label another 300 points higher on the screen and alpha back to 0.0 over about 0.2 seconds again.
  5. Change text on the label and repeat.

I think the easiest way to do this would be with the method...

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

Lemme give this a try in actual code and get back to you. Code completion helps a lot.

OK, here goes

Darn, I just installed Yosemite and don't have Xcode. OK, I'll give it a try here...

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

This is a first attempt without Xcode to check my code and without being able to run it at all so it might not be perfect but it should give you an idea of where to go from here.

EDIT

From @WilliamGeorges comment it looks like they used a combination of completely separate animations using the method I detailed in my blog.

You would have to do 3 separate animations on each label but its still a similar idea to what I put in this answer.

Upvotes: 2

Related Questions