1. Learning Core Animation
Louis Zhu
13年6月3日星期⼀一

2. 13年6月3日星期⼀一

3. Layer
13年6月3日星期⼀一

4. Layer
• The key of Core Animation
• Merely manages the state information surrounding a
bitmap
• Consider as model in MVC
13年6月3日星期⼀一

5. 13年6月3日星期⼀一

6. 13年6月3日星期⼀一

7. Transform
struct CATransform3D
{
CGFloat m11, m12, m13, m14;
CGFloat m21, m22, m23, m24;
CGFloat m31, m32, m33, m34;
CGFloat m41, m42, m43, m44;
};
13年6月3日星期⼀一

8. Presentation layer
13年6月3日星期⼀一

9. Provide contents
• Using an image
• Using a delegate
13年6月3日星期⼀一

10. Using an image
CALayer *layer = someView.layer;
layer.contents = (id)someCGImage;
layer.contentScale = kScreenScale;
13年6月3日星期⼀一

11. Using a delegate
- (void)displayLayer:(CALayer *)theLayer {
// Check the value of some state property
if (self.displayYesImage) {
// Display the Yes image
theLayer.contents = [someHelperObject loadStateYesImage];
}
else {
// Display the No image
theLayer.contents = [someHelperObject loadStateNoImage];
}
}
13年6月3日星期⼀一

12. Using a delegate
- (void)drawLayer:(CALayer *)theLayer inContext:
(CGContextRef)theContext {
CGMutablePathRef thePath = CGPathCreateMutable();
CGPathMoveToPoint(thePath,NULL,15.0f,15.f);
CGPathAddCurveToPoint(thePath,
NULL,
15.f,250.0f,
295.0f,250.0f,
295.0f,15.0f);
CGContextBeginPath(theContext);
CGContextAddPath(theContext, thePath);
CGContextSetLineWidth(theContext, 5);
CGContextStrokePath(theContext);
CFRelease(thePath);
}
13年6月3日星期⼀一

13. Layer’s appearance
@property(copy) NSString *contentsGravity;
@property CGFloat contentsScale;
@property CGColorRef backgroundColor;
@property CGFloat cornerRadius;
@property CGFloat borderWidth;
@property CGColorRef borderColor;
@property float opacity;
@property(copy) NSArray *filters;
@property CGColorRef shadowColor;
@property float shadowOpacity;
@property CGSize shadowOffset;
13年6月3日星期⼀一

14. Basic animation
13年6月3日星期⼀一

15. Basic animation
• CABasicAnimation
• keyPath
• fromValue
• toValue
• duration
13年6月3日星期⼀一

16. Demo
13年6月3日星期⼀一

17. Keyframe animation
13年6月3日星期⼀一

18. Using path
- (void)animatePosition {
CAKeyframeAnimation *theAnimation =
[CAKeyframeAnimation animationWithKeyPath:@"position"];
theAnimation.path = someCGPath;
theAnimation.duration = 5.0;
[theLayer addAnimation:theAnimation forKey:@"position"];
}
13年6月3日星期⼀一

19. Demo
13年6月3日星期⼀一

20. Specify values and timing
- (void)animateBorder {
CAKeyframeAnimation *widthAnimation = [CAKeyframeAnimation
animationWithKeyPath:@"borderWidth"];
NSArray *widthValues = @[@1.0, @10.0, @5.0, @0.0];
widthAnimation.values = widthValues;
widthAnimation.calculationMode = kCAAnimationPaced;
widthAnimation.keyTimes = @[@0.0f, @0.66667f, @1.0f];
[theLayer addAnimation:widthAnimation forKey:@"borderWidth"];
}
13年6月3日星期⼀一

21. Multiple animations
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[animation0, animation1];
group.duration = 5.0;
[layer addAnimation:group forKey:@"groupedAnimations"];
13年6月3日星期⼀一

22. Demo
13年6月3日星期⼀一

23. Stop an animation
[theLayer addAnimation:theAnimation forKey:@"animationKey"];
// somedays later
[theLayer removeAnimationForKey:@"animationKey"];
13年6月3日星期⼀一

24. Detecting animation’s end
// invoking in the delegate
- (void)animationDidStart:(CAAnimation *)theAnimation
- (void)animationDidStop:(CAAnimation *)theAnimation finished:
(BOOL)flag
13年6月3日星期⼀一

25. One more thing...
13年6月3日星期⼀一

26. Animatable properties
• http://developer.apple.com/library/ios/
documentation/Cocoa/Conceptual/
CoreAnimation_guide/AnimatableProperties/
AnimatableProperties.html#//apple_ref/doc/uid/
TP40004514-CH11-SW1
13年6月3日星期⼀一

27. 13年6月3日星期⼀一