CABasicAnimation. The basics.
I've been using a lot of animations recently to try and give a more polished feel to some of the applications I've been working on. I think subtle use of animation and audio provide useful cues and feedback to the user, above and beyond what is native to iOS.
Here are some snippets of using animations in iOS. You will need to add the QuartzCore.framework to your project.
The short version:
I've thrown together an example app with too many simple animations in it and attached them all to gestures.
https://github.com/m00sey/Gesturemation
Move along x axis
CABasicAnimation *move = [CABasicAnimation animationWithKeyPath:@"transform.translation.x" ]; [move setFromValue:[NSNumber numberWithFloat:0.0f]]; [move setToValue:[NSNumber numberWithFloat:100.0f]]; [move setRemovedOnCompletion:NO]; [move setFillMode:kCAFillModeForwards]; [move setDuration:1.0f];
Note: Most attributes on CABasicAnimation are trivial. However the most common trip up is the animation resetting once it has completed. Setting the fillMode to kCAFillModeForwards and removedOnCompletion to NO will ensure the animation is applied after the animation has completed.
Move along y axis
It is the exact same code as above, but with a different KeyPath
@"transform.translation.y"
Rotate
CABasicAnimation *fullRotation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"]; [fullRotation setFromValue:[NSNumber numberWithFloat:0]]; [fullRotation setToValue:[NSNumber numberWithFloat:((360*M_PI)/180)]]; [fullRotation setDuration:0.5f];
Scale
CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; [scale setToValue:[NSNumber numberWithFloat:10.0f]]; [scale setDuration:0.0]; [scale setRemovedOnCompletion:NO]; [scale setFillMode:kCAFillModeForwards];
Opacity
You can do a fade like so:
CABasicAnimation *fadey = [CABasicAnimation animationWithKeyPath:@"opacity"]; [fadey setToValue:[NSNumber numberWithFloat:0.0f]]; [fadey setDuration:1.0f];
Adding an animation to a layer
Once you have created your animation you can need to add it to element you want to animate:
[[target layer] addAnimation:myAwesomeAnimation forKey:@"someKey"];
same thing if you want to add an animation group:
[[target layer] addAnimation:myAwesomeAnimationGroup forKey:@"someKey"];
Animation Groups
If you want to generate animations comprising of multiple effect running simultaneously i.e. Scale and Rotate. You can use an animation group to achieve this:
CAAnimationGroup *animationGroup = [CAAnimationGroup animation]; [animationGroup setAnimations:[NSArray arrayWithObjects:simpleAnimationOne, simpleAnimationTwo, nil]]; [animationGroup setDuration:1.0f]; [animationGroup setAutoreverses:YES]; [[moveMe layer] addAnimation:animationGroup forKey:@"group action"];
Note: All animations within the group will only execute for the group duration, any animation running longer than the group duration will be cut short.
Animation blocks
If you want to run one animation, and when it completes run another, animation blocks make this cake. Most of my favorite animations usually end up being a combination of animation blocks and CABasicAnimation.
[UIView animateWithDuration:0.5 animations:^{
//simple animation one
} completion:^(BOOL finished){
[UIView animateWithDuration:0.5 animations:^{
//simple animation two
} completion:^(BOOL finished){
}];
}];Combine for wondrous marvels!
The examples have trivial behavior. Getting the perfect subtle animations can take some tinkering, but I really do think they can add something to the experience :)
A word of warning: Too much animation, like anything and be highly annoying :)
I'd like to follow this post up with some more in depth animating shenanigans in iOS. Stay tuned!