Advertise here




Advertise here

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

UIView Keyframe animation: Creating multi-step animations without having to use Core Animation

Duncan CDuncan C Posts: 9,112Tutorial Authors, Registered Users @ @ @ @ @ @ @
It used to be if you wanted to animate an object across a complex path, you would either have to create a chained series of view animations using animateWithDuration:animations:completion, or if you wanted your animation to proceed along a curved path, you had to use Core Animation CAKeyframeAnimation. CAAnimation is NOT easy to figure out.

In iOS 7, Apple added a new method, animateKeyframesWithDuration:delay:options:animations:completion:, that lets you create very elaborate keyframe animations with fairly simple UIView calls.

One thing that is not clear about this call: It takes options of the enum type UIViewKeyframeAnimationOptions. Those values include constants like UIViewKeyframeAnimationOptionCalculationModeLinear and UIViewKeyframeAnimationOptionCalculationModeCubic. Those values do NOT control the timing of the whole animation. Instead, they tell the system how to interpolate the values between the individual animations in the sequence. If you use UIViewKeyframeAnimationOptionCalculationModeLinear, the animations creates smooth, linear transitions between the intermediate values you specify. If you use UIViewKeyframeAnimationOptionCalculationModeCubic, the animation follows a curved path between the values you specify.

The docs don't tell you this, but you can also control the timing of the whole keyframe animation sequence to use ease-in, ease-out, linear, or other animation curves. (The values you can use are UIViewAnimationOptionCurveEaseInOut, UIViewAnimationOptionCurveEaseIn, UIViewAnimationOptionCurveEaseOut, and UIViewAnimationOptionCurveLinear)

The method takes a code block. That code block should contain one or more calls to the method addKeyframeWithRelativeStartTime:relativeDuration:animations:. That method lets you specify a single step in your complex animation. The addKeyframeWithRelativeStartTime:relativeDuration:animations: also takes a code block. This code block specifies the changes that you want to apply in that code block. The start time and duration values for each keyframe are expressed with values from 0 to 1, which are relative to the duration of the entire keyframe animation sequence.

You can submit your individual keyframe animations in any order, and with times that run simultaneously. The system will schedule all the animations so they run at the proper times.

You can download a sample project that is a working example of keyframe view animation from this link on github:

Keyframe view animations demo project on github
Regards,
Duncan C
WareTo

widehead.gif
Animated GIF created with Face Dancer, available for free in the app store.

I'm available for one-on-one help at CodeMentor

Replies

  • Duncan CDuncan C Posts: 9,112Tutorial Authors, Registered Users @ @ @ @ @ @ @
    I updated the project today so now you can pause and restart the animation, as well as use a slider to manually "scrub" the animation from beginning to end. This is possible because UIView animations actually create CAAnimation objects on the animated view's layer "under the covers", and you can manipulate the timing and speed settings on the layer to pause, fast-forward, or rewind your animation.
    Regards,
    Duncan C
    WareTo

    widehead.gif
    Animated GIF created with Face Dancer, available for free in the app store.

    I'm available for one-on-one help at CodeMentor
  • tropictropic Posts: 117New Users @ @
    Very interesting read and nice example project.

    I am currently during some small animations using animateKeyframesWithDuration. Do you know if it is possible to sync the animation to small sound effects (or vice versa) e.g. a ball bouncing? I have tried to play the effects in the different keyframes, but this will not sync the sound to that key but just play the sound effect as soon as possible.
Sign In or Register to comment.