The document discusses Core Animation on the iPhone, including why to use animation, simple and complex animation techniques, and examples of animating user interface elements like a search bar. Some key points: - Animation brings realism to UIs and provides feedback on what is happening - Simple animations like moving an image are easy to implement using UIView animations - Complex animations are possible using Core Animation features like keyframe animations - Examples demonstrate animating a search bar into and out of view with frame transforms - Related images can be animated using a three-part zoom, flip, zoom animation group

1. CORE ANIMATION
Animated UIs on the iPhone
Monday, October 12, 2009

2. WHY ANIMATE?
Animation brings ‘real world’ feel to user interfaces
Provides clues to what is happening in the UI
Makes the UI feel more responsive
Monday, October 12, 2009

3. PLEAS DON’T
Make your UI Animated just for the sake of animation
Monday, October 12, 2009

4. WHAT IS IT ANYWAY?
Compositing
Monday, October 12, 2009

5. WHAT IS IT ANYWAY?
Animation
Monday, October 12, 2009

6. WHAT IS IT ANYWAY?
Animation
Monday, October 12, 2009

7. WHAT IS IT ANYWAY?
Backend for all animation on the iPhone and Mac
Monday, October 12, 2009

8. BACKEND
Simple Stuff is very Simple
Monday, October 12, 2009

9. BACKEND
Complex Stuff is Possible
image from @pagedooley
Monday, October 12, 2009

10. SIMPLE STUFF FIRST
- (void)touchesEnded:(NSSet *)touches Begin Animations
withEvent:(UIEvent *)event {
[UIView beginAnimations:@"imageMove" context:NULL];
CGPoint location = [[touches anyObject]
locationInView:self.view];
self.imageView.center = location;
[UIView commitAnimations];
}
Monday, October 12, 2009

11. SIMPLE STUFF FIRST
- (void)touchesEnded:(NSSet *)touches
withEvent:(UIEvent *)event {
[UIView beginAnimations:@"imageMove" context:NULL];
CGPoint location = [[touches anyObject]
locationInView:self.view];
self.imageView.center = location;
[UIView commitAnimations]; Calculate and set
}
the new location
Monday, October 12, 2009

12. SIMPLE STUFF FIRST
- (void)touchesEnded:(NSSet *)touches
withEvent:(UIEvent *)event {
[UIView beginAnimations:@"imageMove" context:NULL];
CGPoint location = [[touches anyObject]
locationInView:self.view];
self.imageView.center = location;
[UIView commitAnimations];
}
Start the animations
Monday, October 12, 2009

13. REAL WORLD USAGE
Animate the Search bar
into view
Monday, October 12, 2009

14. ANIMATE IN
- (IBAction)search {
if(nil == self.searchBar.superview) {
self.searchBar.frame = CGRectMake(0.0f, -64.0f, 320.0f, 44.0f);
[self.view addSubview:self.searchBar];
}
[UIView beginAnimations:@"SearchBarMoveIn" context:NULL];
[UIView setAnimationDuration:0.5f];
CGRect frame = self.searchBar.frame;
frame.origin.y = 0.0f;
self.searchBar.frame = frame;
[self.searchBar becomeFirstResponder];
[UIView commitAnimations];
}
Monday, October 12, 2009

15. ANIMATE IN
- (IBAction)search {
if(nil == self.searchBar.superview) {
self.searchBar.frame = CGRectMake(0.0f, -64.0f, 320.0f, 44.0f);
[self.view addSubview:self.searchBar];
}
[UIView beginAnimations:@"SearchBarMoveIn" context:NULL];
[UIView setAnimationDuration:0.5f];
CGRect frame = self.searchBar.frame;
frame.origin.y = 0.0f;
self.searchBar.frame = frame;
[self.searchBar becomeFirstResponder];
[UIView commitAnimations];
}
Monday, October 12, 2009

16. ANIMATE IN
- (IBAction)search {
if(nil == self.searchBar.superview) {
self.searchBar.frame = CGRectMake(0.0f, -64.0f, 320.0f, 44.0f);
[self.view addSubview:self.searchBar];
}
[UIView beginAnimations:@"SearchBarMoveIn" context:NULL];
[UIView setAnimationDuration:0.5f];
CGRect frame = self.searchBar.frame;
frame.origin.y = 0.0f;
self.searchBar.frame = frame;
[self.searchBar becomeFirstResponder];
[UIView commitAnimations];
}
Monday, October 12, 2009

17. ANIMATE IN
- (IBAction)search {
if(nil == self.searchBar.superview) {
self.searchBar.frame = CGRectMake(0.0f, -64.0f, 320.0f, 44.0f);
[self.view addSubview:self.searchBar];
}
[UIView beginAnimations:@"SearchBarMoveIn" context:NULL];
[UIView setAnimationDuration:0.5f];
CGRect frame = self.searchBar.frame;
frame.origin.y = 0.0f;
self.searchBar.frame = frame;
[self.searchBar becomeFirstResponder];
[UIView commitAnimations];
}
Monday, October 12, 2009

18. ANIMATE IN
- (IBAction)search {
if(nil == self.searchBar.superview) {
self.searchBar.frame = CGRectMake(0.0f, -64.0f, 320.0f, 44.0f);
[self.view addSubview:self.searchBar];
}
[UIView beginAnimations:@"SearchBarMoveIn" context:NULL];
[UIView setAnimationDuration:0.5f];
CGRect frame = self.searchBar.frame;
frame.origin.y = 0.0f;
self.searchBar.frame = frame;
[self.searchBar becomeFirstResponder];
[UIView commitAnimations];
}
Monday, October 12, 2009

19. ANIMATE IN
- (IBAction)search {
if(nil == self.searchBar.superview) {
self.searchBar.frame = CGRectMake(0.0f, -64.0f, 320.0f, 44.0f);
[self.view addSubview:self.searchBar];
}
[UIView beginAnimations:@"SearchBarMoveIn" context:NULL];
[UIView setAnimationDuration:0.5f];
CGRect frame = self.searchBar.frame;
frame.origin.y = 0.0f;
self.searchBar.frame = frame;
[self.searchBar becomeFirstResponder];
[UIView commitAnimations];
}
Monday, October 12, 2009

20. ANIMATE OUT
- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar {
[self.searchBar resignFirstResponder];
[UIView beginAnimations:@"SearchBarMoveOut" context:nil];
[UIView setAnimationDuration:0.5f];
CGRect frame = self.searchBar.frame;
frame.origin.y = -CGRectGetHeight(frame);
self.searchBar.frame = frame;
[UIView commitAnimations];
}
Monday, October 12, 2009

21. ANIMATE OUT
- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar {
[self.searchBar resignFirstResponder];
[UIView beginAnimations:@"SearchBarMoveOut" context:nil];
[UIView setAnimationDuration:0.5f];
CGRect frame = self.searchBar.frame;
frame.origin.y = -CGRectGetHeight(frame);
self.searchBar.frame = frame;
[UIView commitAnimations];
}
Monday, October 12, 2009

22. ANIMATE OUT
- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar {
[self.searchBar resignFirstResponder];
[UIView beginAnimations:@"SearchBarMoveOut" context:nil];
[UIView setAnimationDuration:0.5f];
CGRect frame = self.searchBar.frame;
frame.origin.y = -CGRectGetHeight(frame);
self.searchBar.frame = frame;
[UIView commitAnimations];
}
Monday, October 12, 2009

23. ANIMATE OUT
- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar {
[self.searchBar resignFirstResponder];
[UIView beginAnimations:@"SearchBarMoveOut" context:nil];
[UIView setAnimationDuration:0.5f];
CGRect frame = self.searchBar.frame;
frame.origin.y = -CGRectGetHeight(frame);
self.searchBar.frame = frame;
[UIView commitAnimations];
}
Monday, October 12, 2009

24. DRAWING ATTENTION
Making elements jump out
Monday, October 12, 2009

25. SEARCHING
- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar {
[self.gridView animateImagesRelatedTo:searchBar.text];
}
Monday, October 12, 2009

26. ANIMATING IMAGES
- (void)animateImagesRelatedTo:(NSString *)term {
NSUInteger count = random() % self.gridLayer.images.count;
if(count < 1) {
count = 1;
}
for(NSUInteger i = 0;i < count;i++) {
NSUInteger index = random() % self.gridLayer.sublayers.count;
CALayer *layer = [[self.gridLayer sublayers] objectAtIndex:index];
[layer addAnimation:[self foundAnimation] forKey:@"emphasise"];
}
}
Monday, October 12, 2009

27. FOUND ANIMATION
- (CAAnimationGroup *)foundAnimation {
CAAnimationGroup *foundAnimation = [CAAnimationGroup animation];
CATransform3D zoomTransform =
CATransform3DMakeScale(0.75f, 0.75f, 1.0f);
CABasicAnimation *zoomOutAnimation = [self
zoomOutAnimation:zoomTransform];
CAKeyframeAnimation *flipAnimation = [self
flipAnimation:zoomTransform];
CABasicAnimation *zoomInAnimation = [self
zoomInAnimation:zoomTransform];
foundAnimation.animations = [NSArray
arrayWithObjects:zoomOutAnimation,
flipAnimation, zoomInAnimation, nil];
foundAnimation.duration = 2.0f;
return foundAnimation;
}
Monday, October 12, 2009

28. FOUND ANIMATION
- (CAAnimationGroup *)foundAnimation {
CAAnimationGroup *foundAnimation = [CAAnimationGroup animation];
CATransform3D zoomTransform =
CATransform3DMakeScale(0.75f, 0.75f, 1.0f);
CABasicAnimation *zoomOutAnimation = [self
zoomOutAnimation:zoomTransform];
CAKeyframeAnimation *flipAnimation = [self
flipAnimation:zoomTransform];
CABasicAnimation *zoomInAnimation = [self
zoomInAnimation:zoomTransform];
foundAnimation.animations = [NSArray
arrayWithObjects:zoomOutAnimation,
flipAnimation, zoomInAnimation, nil];
foundAnimation.duration = 2.0f;
return foundAnimation;
}
Monday, October 12, 2009

29. FOUND ANIMATION
- (CAAnimationGroup *)foundAnimation {
CAAnimationGroup *foundAnimation = [CAAnimationGroup animation];
CATransform3D zoomTransform =
CATransform3DMakeScale(0.75f, 0.75f, 1.0f);
CABasicAnimation *zoomOutAnimation = [self
zoomOutAnimation:zoomTransform];
CAKeyframeAnimation *flipAnimation = [self
flipAnimation:zoomTransform];
CABasicAnimation *zoomInAnimation = [self
zoomInAnimation:zoomTransform];
foundAnimation.animations = [NSArray
arrayWithObjects:zoomOutAnimation,
flipAnimation, zoomInAnimation, nil];
foundAnimation.duration = 2.0f;
return foundAnimation;
}
Monday, October 12, 2009

30. FOUND ANIMATION
- (CAAnimationGroup *)foundAnimation {
CAAnimationGroup *foundAnimation = [CAAnimationGroup animation];
CATransform3D zoomTransform =
CATransform3DMakeScale(0.75f, 0.75f, 1.0f);
CABasicAnimation *zoomOutAnimation = [self
zoomOutAnimation:zoomTransform];
CAKeyframeAnimation *flipAnimation = [self
flipAnimation:zoomTransform];
CABasicAnimation *zoomInAnimation = [self
zoomInAnimation:zoomTransform];
foundAnimation.animations = [NSArray
arrayWithObjects:zoomOutAnimation,
flipAnimation, zoomInAnimation, nil];
foundAnimation.duration = 2.0f;
return foundAnimation;
}
Monday, October 12, 2009

31. 3 PART ANIMATION
Monday, October 12, 2009

32. 3 PART ANIMATION
Monday, October 12, 2009

33. ZOOM OUT ANIMATION
- (CABasicAnimation *)zoomOutAnimation:(CATransform3D)zoomTransform {
CABasicAnimation *zoomOutAnimation =
[CABasicAnimation animationWithKeyPath:@"transform"];
zoomOutAnimation.fromValue =
[NSValue valueWithCATransform3D:CATransform3DIdentity];
zoomOutAnimation.toValue =
[NSValue valueWithCATransform3D:zoomTransform];
zoomOutAnimation.duration = 0.5f;
return zoomOutAnimation;
}
Monday, October 12, 2009

34. ZOOM OUT ANIMATION
- (CABasicAnimation *)zoomOutAnimation:(CATransform3D)zoomTransform {
CABasicAnimation *zoomOutAnimation =
[CABasicAnimation animationWithKeyPath:@"transform"];
zoomOutAnimation.fromValue =
[NSValue valueWithCATransform3D:CATransform3DIdentity];
zoomOutAnimation.toValue =
[NSValue valueWithCATransform3D:zoomTransform];
zoomOutAnimation.duration = 0.5f;
return zoomOutAnimation;
}
Monday, October 12, 2009

35. ZOOM OUT ANIMATION
- (CABasicAnimation *)zoomOutAnimation:(CATransform3D)zoomTransform {
CABasicAnimation *zoomOutAnimation =
[CABasicAnimation animationWithKeyPath:@"transform"];
zoomOutAnimation.fromValue =
[NSValue valueWithCATransform3D:CATransform3DIdentity];
zoomOutAnimation.toValue =
[NSValue valueWithCATransform3D:zoomTransform];
zoomOutAnimation.duration = 0.5f;
return zoomOutAnimation;
}
Monday, October 12, 2009

36. FLIP ANIMATION
- (CAKeyframeAnimation *)flipAnimation:(CATransform3D) zoomTransform {
CAKeyframeAnimation *flipAnimation = [CAKeyframeAnimation
animationWithKeyPath:@"transform"];
flipAnimation.beginTime = 0.5f;
CGFloat rotationVector[3] = {1.0f, 1.0f, 0.0f};
CATransform3D flipTransform1 =
CATransform3DRotate(zoomTransform, 1.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
CATransform3D flipTransform2 =
CATransform3DRotate(zoomTransform, 2.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
CATransform3D flipTransform3 =
CATransform3DRotate(zoomTransform, 3.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
CATransform3D flipTransform4 =
CATransform3DRotate(zoomTransform, 4.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
flipAnimation.values = [NSArray arrayWithObjects:
[NSValue valueWithCATransform3D:zoomTransform],
[NSValue valueWithCATransform3D:flipTransform1],
[NSValue valueWithCATransform3D:flipTransform2],
[NSValue valueWithCATransform3D:flipTransform3],
[NSValue valueWithCATransform3D:flipTransform4],
[NSValue valueWithCATransform3D:zoomTransform], nil];
flipAnimation.duration = 1.0f;
return flipAnimation;
}
Monday, October 12, 2009

37. FLIP ANIMATION
- (CAKeyframeAnimation *)flipAnimation:(CATransform3D) zoomTransform {
CAKeyframeAnimation *flipAnimation = [CAKeyframeAnimation
animationWithKeyPath:@"transform"];
flipAnimation.beginTime = 0.5f;
CGFloat rotationVector[3] = {1.0f, 1.0f, 0.0f};
CATransform3D flipTransform1 =
CATransform3DRotate(zoomTransform, 1.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
CATransform3D flipTransform2 =
CATransform3DRotate(zoomTransform, 2.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
CATransform3D flipTransform3 =
CATransform3DRotate(zoomTransform, 3.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
CATransform3D flipTransform4 =
CATransform3DRotate(zoomTransform, 4.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
flipAnimation.values = [NSArray arrayWithObjects:
[NSValue valueWithCATransform3D:zoomTransform],
[NSValue valueWithCATransform3D:flipTransform1],
[NSValue valueWithCATransform3D:flipTransform2],
[NSValue valueWithCATransform3D:flipTransform3],
[NSValue valueWithCATransform3D:flipTransform4],
[NSValue valueWithCATransform3D:zoomTransform], nil];
flipAnimation.duration = 1.0f;
return flipAnimation;
}
Monday, October 12, 2009

38. FLIP ANIMATION
- (CAKeyframeAnimation *)flipAnimation:(CATransform3D) zoomTransform {
CAKeyframeAnimation *flipAnimation = [CAKeyframeAnimation
animationWithKeyPath:@"transform"];
flipAnimation.beginTime = 0.5f;
CGFloat rotationVector[3] = {1.0f, 1.0f, 0.0f};
CATransform3D flipTransform1 =
CATransform3DRotate(zoomTransform, 1.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
CATransform3D flipTransform2 =
CATransform3DRotate(zoomTransform, 2.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
CATransform3D flipTransform3 =
CATransform3DRotate(zoomTransform, 3.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
CATransform3D flipTransform4 =
CATransform3DRotate(zoomTransform, 4.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
flipAnimation.values = [NSArray arrayWithObjects:
[NSValue valueWithCATransform3D:zoomTransform],
[NSValue valueWithCATransform3D:flipTransform1],
[NSValue valueWithCATransform3D:flipTransform2],
[NSValue valueWithCATransform3D:flipTransform3],
[NSValue valueWithCATransform3D:flipTransform4],
[NSValue valueWithCATransform3D:zoomTransform], nil];
flipAnimation.duration = 1.0f;
return flipAnimation;
}
Monday, October 12, 2009

39. FLIP ANIMATION
- (CAKeyframeAnimation *)flipAnimation:(CATransform3D) zoomTransform {
CAKeyframeAnimation *flipAnimation = [CAKeyframeAnimation
animationWithKeyPath:@"transform"];
flipAnimation.beginTime = 0.5f;
CGFloat rotationVector[3] = {1.0f, 1.0f, 0.0f};
CATransform3D flipTransform1 =
CATransform3DRotate(zoomTransform, 1.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
CATransform3D flipTransform2 =
CATransform3DRotate(zoomTransform, 2.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
CATransform3D flipTransform3 =
CATransform3DRotate(zoomTransform, 3.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
CATransform3D flipTransform4 =
CATransform3DRotate(zoomTransform, 4.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
flipAnimation.values = [NSArray arrayWithObjects:
[NSValue valueWithCATransform3D:zoomTransform],
[NSValue valueWithCATransform3D:flipTransform1],
[NSValue valueWithCATransform3D:flipTransform2],
[NSValue valueWithCATransform3D:flipTransform3],
[NSValue valueWithCATransform3D:flipTransform4],
[NSValue valueWithCATransform3D:zoomTransform], nil];
flipAnimation.duration = 1.0f;
return flipAnimation;
}
Monday, October 12, 2009

40. FLIP ANIMATION
- (CAKeyframeAnimation *)flipAnimation:(CATransform3D) zoomTransform {
CAKeyframeAnimation *flipAnimation = [CAKeyframeAnimation
animationWithKeyPath:@"transform"];
flipAnimation.beginTime = 0.5f;
CGFloat rotationVector[3] = {1.0f, 1.0f, 0.0f};
CATransform3D flipTransform1 =
CATransform3DRotate(zoomTransform, 1.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
CATransform3D flipTransform2 =
CATransform3DRotate(zoomTransform, 2.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
CATransform3D flipTransform3 =
CATransform3DRotate(zoomTransform, 3.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
CATransform3D flipTransform4 =
CATransform3DRotate(zoomTransform, 4.0f * M_PI / 2.0f,
rotationVector[0], rotationVector[1], rotationVector[2]);
flipAnimation.values = [NSArray arrayWithObjects:
[NSValue valueWithCATransform3D:zoomTransform],
[NSValue valueWithCATransform3D:flipTransform1],
[NSValue valueWithCATransform3D:flipTransform2],
[NSValue valueWithCATransform3D:flipTransform3],
[NSValue valueWithCATransform3D:flipTransform4],
[NSValue valueWithCATransform3D:zoomTransform], nil];
flipAnimation.duration = 1.0f;
return flipAnimation;
}
Monday, October 12, 2009

41. ZOOM IN ANIMATION
- (CABasicAnimation *)zoomInAnimation:(CATransform3D)zoomTransform {
CABasicAnimation *zoomInAnimation =
[CABasicAnimation animationWithKeyPath:@"transform"];
zoomInAnimation.beginTime = 1.5f;
zoomInAnimation.fromValue =
[NSValue valueWithCATransform3D:zoomTransform];
zoomInAnimation.toValue =
[NSValue valueWithCATransform3D:CATransform3DIdentity];
zoomInAnimation.duration = 0.5f;
return zoomInAnimation;
}
Monday, October 12, 2009

42. RUN THE CODE
Monday, October 12, 2009

43. THANKS
Pragmatic iPhone Studio
Monday, October 12, 2009