Core animation
9 likes1,814 views
This document discusses CoreAnimation, a Mac and iOS framework for animating layers and views. It provides an overview of key CoreAnimation classes like CALayer, which is used to render content for views, and CAAnimation for animating layer properties. It also covers topics like using CATransaction to group animations, animating layer properties with CABasicAnimation and CAKeyframeAnimation, and controlling animation timing with properties like beginTime.
![CALayer
• iOS
• UIView layer [aView
layer] or aView.layer
• Mac
• NSView setWantsLayer:
• iOS](https://image.slidesharecdn.com/coreanimation-110326133559-phpapp01/85/Core-animation-11-320.jpg)
![CALayer
• CALayer *aLayer = [CALayer layer];
• aLayer.contents = (id)[UIImage
imageNamed:@”test.jpg”].CGImage;
• fade in/
out](https://image.slidesharecdn.com/coreanimation-110326133559-phpapp01/85/Core-animation-14-320.jpg)
![CATransaction 1
[CATransaction begin];
[CATransaction setValue:(id)kCFBooleanTrue
forKey:kCATransactionDisableActions];
// CALayer
[CATransaction commit];
//](https://image.slidesharecdn.com/coreanimation-110326133559-phpapp01/85/Core-animation-17-320.jpg)
![CATransaction 2
[CATransaction begin];
[CATransaction setValue:[NSNumber
numberWithFloat:2.0] forKey:
kCATransactionAnimationDuration];
// CALayer
[CATransaction commit];](https://image.slidesharecdn.com/coreanimation-110326133559-phpapp01/85/Core-animation-18-320.jpg)
![CATransition…
CATransition *t = [CATransition animation];
t.type = kCATransitionMoveIn
t.subtype = kCATransitionFromRight;
aLayer.contents = (id)[UIImage
imageNamed:@”test.jpg”].CGImage;
[aLayer addAnimation:t forKey:@"Transition"];
//](https://image.slidesharecdn.com/coreanimation-110326133559-phpapp01/85/Core-animation-19-320.jpg)
![CABasicAnimation
• [CABasicAnimation
animationWithKeyPath:...]
• @”position”
• @”bounds”
• @”opacity”
• @”contents”...](https://image.slidesharecdn.com/coreanimation-110326133559-phpapp01/85/Core-animation-23-320.jpg)
![CABasicAnimation
• fromValue = [NSValue...];
• toValue = [NSValue ...];
• duration = 3.0; //Seconds
• repeatCount = NSUIntegerMax; // Forever](https://image.slidesharecdn.com/coreanimation-110326133559-phpapp01/85/Core-animation-25-320.jpg)
![CAKeyframeAnimation
• fromValue toValue
CGPathRef
• CAKeyframeAnimation *a
=[CAKeyframeAnimation
animationWithKeyPath:@"position"];
• a.path = (CGPathRef)path;](https://image.slidesharecdn.com/coreanimation-110326133559-phpapp01/85/Core-animation-26-320.jpg)
![CAAnimationGroup
• CAAnimationGroup *group =
[CAAnimationGroup animation];
• group.animations = [NSArray
arrayWithObjects:anim1, anim2, nil];](https://image.slidesharecdn.com/coreanimation-110326133559-phpapp01/85/Core-animation-27-320.jpg)
![CAAnimation
• [aLayer addAnimation:myAnimation
forKey:@"MyKey"];](https://image.slidesharecdn.com/coreanimation-110326133559-phpapp01/85/Core-animation-28-320.jpg)
![CABasicAnimation *a = [CABasicAnimation
animationWithKeyPath:@”bounds”];
a.fromValue = [NSValue valuwWithCGRect:fromRect];
a.toValue = [NSValue valuwWithCGRect:toRect];
[aLayer addAnimation:a forKey:@"boundsAnimation"];
NSLog(@”bounds:%@”, NSStringFromCGRect(aLayer.bounds));
• bounds toValue
• layer layer property](https://image.slidesharecdn.com/coreanimation-110326133559-phpapp01/85/Core-animation-30-320.jpg)
![• [aLayer addAnimation:myAnimation1
forKey:@"MyKey1"];
• [aLayer addAnimation:myAnimation2
forKey:@"MyKey2"];
•](https://image.slidesharecdn.com/coreanimation-110326133559-phpapp01/85/Core-animation-32-320.jpg)
![• [self
perforeSelector:@selector(runAnimation1)
withObject:nil afterDelay:1.0]; //
• [self
perforeSelector:@selector(runAnimation2)
withObject:nil afterDelay:2.0]; //
•](https://image.slidesharecdn.com/coreanimation-110326133559-phpapp01/85/Core-animation-33-320.jpg)
![animation.delegate = self;
[myLayer addAnimation: animation forKey:@”key”];
...
- (void)animationDidStop:(CAAnimation
*)theAnimation finished:(BOOL)flag {
// Fire another animation
}
//](https://image.slidesharecdn.com/coreanimation-110326133559-phpapp01/85/Core-animation-36-320.jpg)
![delegate
animation.delegate = self;
animation.removedOnCompletion = NO;
[myLayer addAnimation: animation forKey:@”key”];
...
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {
if (theAnimation == [myLayer animationForKey:@”key”]) {
// Fire another animation
[myLayer removeAllAnimations];
}
}
//](https://image.slidesharecdn.com/coreanimation-110326133559-phpapp01/85/Core-animation-37-320.jpg)
![contents
CALayer Quartz
- (void)drawInContext:(CGContextRef)ctx
{
UIGraphicsPushContext(ctx);
// ctx current graphics context :D
UIBezierPath *path = [UIBezierPath
bezierPathWithRoundedRect:self.bounds cornerRadius:10.0];
CGContextSaveGState(ctx);
CGContextAddPath(ctx, path.CGPath);
CGContextClip(ctx);
[image drawInRect:self.bounds];
CGContextRestoreGState(ctx);
UIGraphicsPopContext();
}](https://image.slidesharecdn.com/coreanimation-110326133559-phpapp01/85/Core-animation-41-320.jpg)
![view layer
view
UIGraphicsBeginImageContext(self.bounds.size);
CGContextRef ctx = UIGraphicsGetCurrentContext();
[self.layer renderInContext:ctx];
UIImage *anImage =
UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return anImage;
// :D](https://image.slidesharecdn.com/coreanimation-110326133559-phpapp01/85/Core-animation-42-320.jpg)
Core animation
- 1. CoreAnimation Weizhong Yang a.k.a zonble zonble@gmail.com http://zonble.net
- 3. Why CoreAnimation? • iPad • UIView OpenGL CoreAnimation
- 4. CoreAnimation • Mac/iOS framework • • UIView CoreAnimation wrapper
- 5. CoreAnimation • concurrent • …
- 6. CoreAnimation • • Mockup … • …
- 7. CoreAnimation • Objective-C •
- 8. Class • CALayer • CAAnimation • CATransaction
- 10. CALayer
- 11. CALayer • iOS • UIView layer [aView layer] or aView.layer • Mac • NSView setWantsLayer: • iOS
- 12. CALayer Interface • frame bounds background color • layer layer addSublayer • superlayer
- 13. CALayer View • responder event Click Touch… • property •
- 14. CALayer • CALayer *aLayer = [CALayer layer]; • aLayer.contents = (id)[UIImage imageNamed:@”test.jpg”].CGImage; • fade in/ out
- 15. CALayer • aLayer.position = CGPointMake()... • aLayer.bounds = CGRectMake()... • • 0.25
- 16. • Layer property • CAAnimation • …
- 17. CATransaction 1 [CATransaction begin]; [CATransaction setValue:(id)kCFBooleanTrue forKey:kCATransactionDisableActions]; // CALayer [CATransaction commit]; //
- 18. CATransaction 2 [CATransaction begin]; [CATransaction setValue:[NSNumber numberWithFloat:2.0] forKey: kCATransactionAnimationDuration]; // CALayer [CATransaction commit];
- 19. CATransition… CATransition *t = [CATransition animation]; t.type = kCATransitionMoveIn t.subtype = kCATransitionFromRight; aLayer.contents = (id)[UIImage imageNamed:@”test.jpg”].CGImage; [aLayer addAnimation:t forKey:@"Transition"]; //
- 20. CATransition • Private API flip cube • reject …
- 21. CAAnimation
- 22. CAAnimation • CABasicAnimation • CAKeyframeAnimation • CAAnimationGroup • CATransition …
- 23. CABasicAnimation • [CABasicAnimation animationWithKeyPath:...] • @”position” • @”bounds” • @”opacity” • @”contents”...
- 24. CABasicAnimation • • @”transform.rotation.x” • @”transform.rotation.y” • @”transform.rotation.z” • ...
- 25. CABasicAnimation • fromValue = [NSValue...]; • toValue = [NSValue ...]; • duration = 3.0; //Seconds • repeatCount = NSUIntegerMax; // Forever
- 26. CAKeyframeAnimation • fromValue toValue CGPathRef • CAKeyframeAnimation *a =[CAKeyframeAnimation animationWithKeyPath:@"position"]; • a.path = (CGPathRef)path;
- 27. CAAnimationGroup • CAAnimationGroup *group = [CAAnimationGroup animation]; • group.animations = [NSArray arrayWithObjects:anim1, anim2, nil];
- 28. CAAnimation • [aLayer addAnimation:myAnimation forKey:@"MyKey"];
- 29. fill mode • layer • animation.fillMode = kCAFillModeForwards; • …
- 30. CABasicAnimation *a = [CABasicAnimation animationWithKeyPath:@”bounds”]; a.fromValue = [NSValue valuwWithCGRect:fromRect]; a.toValue = [NSValue valuwWithCGRect:toRect]; [aLayer addAnimation:a forKey:@"boundsAnimation"]; NSLog(@”bounds:%@”, NSStringFromCGRect(aLayer.bounds)); • bounds toValue • layer layer property
- 31. Layer
- 32. • [aLayer addAnimation:myAnimation1 forKey:@"MyKey1"]; • [aLayer addAnimation:myAnimation2 forKey:@"MyKey2"]; •
- 33. • [self perforeSelector:@selector(runAnimation1) withObject:nil afterDelay:1.0]; // • [self perforeSelector:@selector(runAnimation2) withObject:nil afterDelay:2.0]; // •
- 34. beginTime • animation1.beginTime = CACurrentMediaTime() + 1.0; // • animation2.beginTime = CACurrentMediaTime() + 2.0; // • CAAnimation …
- 35. animation • layer view • layer UIView layer view.layer • app
- 36. animation.delegate = self; [myLayer addAnimation: animation forKey:@”key”]; ... - (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag { // Fire another animation } //
- 37. delegate animation.delegate = self; animation.removedOnCompletion = NO; [myLayer addAnimation: animation forKey:@”key”]; ... - (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag { if (theAnimation == [myLayer animationForKey:@”key”]) { // Fire another animation [myLayer removeAllAnimations]; } } //
- 38. λ λ • CAAnimation block … • iOS 5 • Lion
- 40. CALayer • UILayer -layoutSublayers • UIView -layoutSubviews …
- 41. contents CALayer Quartz - (void)drawInContext:(CGContextRef)ctx { UIGraphicsPushContext(ctx); // ctx current graphics context :D UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:10.0]; CGContextSaveGState(ctx); CGContextAddPath(ctx, path.CGPath); CGContextClip(ctx); [image drawInRect:self.bounds]; CGContextRestoreGState(ctx); UIGraphicsPopContext(); }
- 42. view layer view UIGraphicsBeginImageContext(self.bounds.size); CGContextRef ctx = UIGraphicsGetCurrentContext(); [self.layer renderInContext:ctx]; UIImage *anImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return anImage; // :D
- 44. Mac Cocoa Drawing NSView CALayer …
- 45. Accessibility • app • … • UIView/UIControl Accessibility CALayer Accessibility
- 46. Das ist alles.
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n