Core Animation

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3 PART ANIMATION Monday, October 12, 2009

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

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

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

RUN THE CODE Monday, October 12, 2009

THANKS Pragmatic iPhone Studio Monday, October 12, 2009

http://bill.dudney.net	14213
http://www.scoop.it	272
http://translate.googleusercontent.com	70
http://www.slideshare.net	42
http://galafactory.com	4
http://webcache.googleusercontent.com	4
http://www.feedage.com	4
http://theoldreader.com	4
http://www.iweb34.com	4
http://www.praytothemachine.com	4
http://www.iphonepundits.com	3
http://viruslasalle.blogspot.com	3
http://131.253.14.250	2
http://do-nothing.tumblr.com	1
http://www.w3schools.com	1
http://dashboard.bloglines.com	1
http://www.google.com	1
http://safe.tumblr.com	1
http://www.techgig.com	1
http://fig.ly	1
http://static.slidesharecdn.com	1
http://xss.yandex.net	1
http://www.blogger.com	1
http://203.208.37.132	1

Core Animation

by bdudney

Accessibility

Categories

Upload Details

Usage Rights

24 Embeds 14,640

Statistics

Core Animation Presentation Transcript