Keyframeanimation in iOS 7

With iOS 7 Apple added a nice feature for animating views:

UIView animateKeyframesWithDuration: delay: options: animations: completion:

paired with

UIView addKeyframeWithRelativeStartTime: relativeDuration: animations:

With these handy methods you can do nice keyframe animation without the code overhead of nested animations. You set up the overall duration of the animation with the option you already know from the “old” animation. Then within the animation-block you add the keyframes with relative starttime and duration.

Not as you know keyframes

Now this is a bit against the “keyframe idea”. Its not like traditional keyframe-animation where a keyframe describes the animated objects at that particular frame. Its more like a nested animation within the overall timeline with relative startTime and duration. Unfortunately not with its own options or complete block.

The missing completionblock is a bit of a problem. You can animate everything that was animateable before, but if you want to f.e. change the image of an UIImageView at some point within the animation, you cant. The image property is not animateable and therefore if you set the image to a different value within the animationblock, its set to that value at the beginning of the animation.

Of course you can work around that with an additional UIImageView and playing with the alpha within the animation or go back to nested/sequential animations, but in the end a keyframe-animation should be able to change even non-animateable things at keyframes.

Sample

For coders like me who search for working samples, here is a small snippet which fades out one view and simultanously (but faster) reduces the size to zero. And to make things more fancy, after 50% is done, another view appears on top and fades in with another size-effect.

UIView* view1, *view2;
view2.alpha= 0; 
CGRect targetFrame= view1.frame;
[UIView animateKeyframesWithDuration:DURATION 
                               delay:0 
                             options:UIViewKeyframeAnimationOptionAllowUserInteraction 
                          animations:^{  
  [UIViewaddKeyframeWithRelativeStartTime:0 relativeDuration:1 animations:^{
    view1.alpha= 0; 
  }];
  [UIViewaddKeyframeWithRelativeStartTime:0 relativeDuration:0.8 animations:^{
    view1.frame= CGRectZero; 
  }];
  [UIViewaddKeyframeWithRelativeStartTime:0.5 relativeDuration:1 animations:^{
    view2.alpha= 1;
    view2.frame= targetFrame; 
  }];
} completion:^(BOOL finished) {
//completion block after whole animation is done
}];

Leave a Reply

Your email address will not be published. Required fields are marked *