CAAnimation动画/CAAnimation Group
动画分隐式动画和显式动画
CAAnimatione采用了CAMediaTiming协议,可以调整时间,包括持续时间,速度,重复次数;采用了CAAction协议,可以通过响应动作的方式来显示动画.
CAAnimation的一些派生类:
CATransition 提供渐变效果:(推拉push效果,消退fade效果,揭开reveal效果)。
CAAnimationGroup 允许多个动画同时播放。
CABasicAnimation 提供了对单一动画的实现。
CAKeyframeAnimation 关键桢动画,可以定义行动路线。
CAConstraint 约束类,在布局管理器类中用它来设置属性。
CAConstraintLayoutManager 约束布局管理器,是用来将多个CALayer进行布局的.各个CALayer是通过名称来区分,而布局属性是通过CAConstraint来设置的。
CATransaction 事务类,可以对多个layer的属性同时进行修改.它分隐式事务,和显式事务。
事务管理(Transactions)
事务分两种:
1.隐式事务(implicit transaction)
除显式事务外,任何对于CALayer属性的修改,都是隐式事务.这样的事务会在run-loop中被提交.
如:
theLayer.opacity = 0.0; theLayer.zPosition = -200; theLayer.position = CGPointMake(0.0, 0.0);
2.显式事务(explicit transaction)
a. 通过明确的调用begin,commit来提交动画.优点是可以同时修改多个Layer的属性.
如:
[CATransaction begin]; [CATransaction setValue:(id)kCFBooleanTrue forKey:kCATransactionDisableActions]; [aLayer removeFromSuperlayer]; [CATransaction commit];
b.可以重置持续时间
可以在begin,commit对中临时修改动画持续时间.
[CATransaction begin] [CATransaction setValue:[NSNumber numberWithFloat:10.0f] forKey:kCATransactionAnimationDuration]; theLayer.zPosition = 200.0; theLayer.opacity = 0.0; [CATransaction commit];
c.事务可以嵌套.
如:
//第一层嵌套 [CATransaction begin]; [CATransaction setValue:[NSNumber numberWithFloat:2.0f] forKey:kCATransactionAnimationDuration]; theLayer.position = CGPointMake(0.0, 0.0); //第二层嵌套 [CATransaction begin]; [CATransaction setValue:[NSNumber numberWithFloat:5.0f] forKey:kCATransactionAnimationDuration]; theLayer.zPosition = 200.0; theLayer.opacity = 0.0; [CATransaction commit]; [CATransaction commit];
布局管理器示例如下:
1 //创建和设置一个布局管理器 2 theLayer.layoutManager = [CAConstraintLayoutManager layoutManager]; 3 4 //创建layerA 5 CALayer *layerA = [CALayer layer]; 6 layerA.name = @"layerA"; 7 8 //设置layerA的中点位置等于超类的中点位置 9 [layerA addConstraint:[CAConstraint constraintWithAttribute:kCAConstraintMidY 10 relativeTo:@"superLayer" 11 attribute:kCAConstraintMidY]]; 12 13 [layerA addConstraint:[CAConstraint constraintWithAttribute:kCAConstraintMidX 14 relativeTo:@"superLayer" 15 attribute:kCAConstraintMidX]]; 16 [theLayer addSublayer:layerA]; 17 18 //创建layerB 19 CALayer *layerB = [CALayer layer]; 20 layerB.name = @"layerB"; 21 22 //设置layerB的宽度等于layerA的宽度 23 [layerA addConstraint:[CAConstraint constraintWithAttribute:kCAConstraintWidth 24 relativeTo:@"LayerA" 25 attribute:kCAConstraintWidth]]; 26 27 [layerA addConstraint:[CAConstraint constraintWithAttribute:kCAConstraintMidX 28 relativeTo:@"layerA" 29 attribute:kCAConstraintMidX]]; 30 [theLayer addSublayer:layerB];
1 // AnimationView.m 2 // AnimationTestV2 3 // 4 // Created by Gavin on 11-8-9. 5 // Copyright 2014年 TryingX. All rights reserved. 6 // 7 8 #import"AnimationView.h" 9 #import<QuartzCore/QuartzCore.h> 10 11 #define kDuaitionOfTimer0 0.2 12 13 #define kDuaitionOfTimer1 0.2 14 15 #define kDuaitionOfTimer2 0.2 16 17 #define kDuaitionOfTimer3 0.2 18 19 #define kDuaitionOfTimer4 1.1 20 21 #define kDisplacementOfTimer1 10 22 23 #define kDisplacementOfTimer2 10 24 25 @implementationAnimationView 26 27 CGPoint leftPhoneCenter; 28 29 CGPoint contactCenter; 30 31 CGPoint rightPhoneCenter; 32 33 CGPoint picCenter; 34 35 //位置变化动画 36 - (CAAnimation *)animationMoveFrom:(CGPoint) from To:(CGPoint) to Duration:(CGFloat) duration BeginTime:(CGFloat)beginTime 37 { 38 CAKeyframeAnimation *bounceAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 39 CGFloat animationDuration = duration; 40 CGMutablePathRef thePath = CGPathCreateMutable(); 41 CGPathMoveToPoint(thePath, NULL, from.x, from.y); 42 CGPathAddLineToPoint(thePath, NULL, to.x, to.y); 43 bounceAnimation.path = thePath; 44 bounceAnimation.duration = animationDuration; 45 bounceAnimation.beginTime = beginTime; 46 bounceAnimation.repeatCount=0; 47 bounceAnimation.removedOnCompletion=NO; 48 bounceAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; 49 CGPathRelease(thePath); 50 return bounceAnimation; 51 } 52 53 //透明度变化动画 54 -(CAAnimation *)animationWithOpacityFrom:(CGFloat) from To:(CGFloat) to Duration:(CGFloat) duration BeginTime:(CGFloat)beginTime 55 { 56 CABasicAnimation *theAnimation; 57 theAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"]; 58 theAnimation.duration=duration; 59 theAnimation.beginTime = beginTime; 60 theAnimation.repeatCount=0; 61 theAnimation.autoreverses=NO; 62 theAnimation.fromValue=[NSNumber numberWithFloat:from]; 63 theAnimation.toValue=[NSNumber numberWithFloat:to]; 64 return theAnimation; 65 66 } 67 68 //手机壳动画设置 69 -(NSArray *)AnimWithPhone:(CGPoint)phoneCenter Option:(int)option 70 { 71 NSArray *arr = [NSArray arrayWithObjects: 72 [self animationMoveFrom:phoneCenter To:CGPointMake(phoneCenter.x+kDisplacementOfTimer1*option,phoneCenter.y) Duration:kDuaitionOfTimer0 BeginTime:1.5], 73 [self animationMoveFrom:CGPointMake(phoneCenter.x+kDisplacementOfTimer1*option,phoneCenter.y) To:phoneCenter Duration:kDuaitionOfTimer1 BeginTime:1.7], 74 [self animationMoveFrom:phoneCenter To:CGPointMake(phoneCenter.x+kDisplacementOfTimer2*option,phoneCenter.y) Duration:kDuaitionOfTimer2 BeginTime:1.9], 75 [self animationMoveFrom:CGPointMake(phoneCenter.x+kDisplacementOfTimer2*option,phoneCenter.y) To:phoneCenter Duration:kDuaitionOfTimer3 BeginTime:2.1], 76 nil]; 77 78 return arr; 79 } 80 81 //图片,联系人动画设置 82 -(NSArray *)AnimFromObj:(CGPoint)obj1 ToObj:(CGPoint)obj2 Option:(int)option 83 { 84 85 NSArray *arr = [NSArray arrayWithObjects: 86 [self animationWithOpacityFrom:0.0To:0.0Duration:1.0BeginTime:0.0], 87 [self animationWithOpacityFrom:0.0To:1.0Duration:0.3BeginTime:1.0], 88 [self animationMoveFrom:obj1 To:CGPointMake(obj1.x+kDisplacementOfTimer1*option, obj1.y) Duration:kDuaitionOfTimer0 BeginTime:1.5], 89 [self animationMoveFrom:CGPointMake(obj1.x+kDisplacementOfTimer1*option, obj1.y) To:obj1 Duration:kDuaitionOfTimer1 BeginTime:1.7], 90 [self animationMoveFrom:obj1 To:CGPointMake(obj1.x+kDisplacementOfTimer2*option,obj1.y) Duration:kDuaitionOfTimer2 BeginTime:1.9], 91 [self animationMoveFrom:CGPointMake(obj1.x+kDisplacementOfTimer2*option,obj1.y) To:obj1 Duration:kDuaitionOfTimer3 BeginTime:2.1], 92 [self animationMoveFrom:obj1 To:obj2 Duration:kDuaitionOfTimer4 BeginTime:2.4], 93 [self animationMoveFrom:obj2 To:obj2 Duration:kDuaitionOfTimer4 BeginTime:3.5], 94 [self animationWithOpacityFrom:1.0To:0.0Duration:0.3BeginTime:3.7], 95 nil]; 96 97 return arr; 98 99 } 100 101 //创建动画组 102 -(CAAnimationGroup *)getAnimGroup 103 { 104 CAAnimationGroup * animGroup = [CAAnimationGroup animation]; 105 animGroup.delegate = self; 106 animGroup.removedOnCompletion = NO; 107 animGroup.duration = 4.0; 108 animGroup.repeatCount = 1; 109 animGroup.fillMode = kCAFillModeForwards; 110 111 return animGroup; 112 113 } 114 115 //开始动画 116 -(void)setup 117 { 118 leftPhoneCenter = CGPointMake(leftPhone.frame.origin.x+35, leftPhone.frame.origin.y+55); 119 contactCenter = CGPointMake(contact.frame.origin.x+25, contact.frame.origin.y+25); 120 rightPhoneCenter = CGPointMake(rightPhone.frame.origin.x+35, rightPhone.frame.origin.y+55); 121 picCenter = CGPointMake(picture.frame.origin.x+25,picture.frame.origin.y+25); 122 123 contact.hidden = NO; 124 125 picture.hidden = NO; 126 127 CAAnimationGroup * mp1 = [self getAnimGroup]; 128 mp1.animations = [self AnimWithPhone:leftPhoneCenter Option:-1]; 129 [leftPhone.layer addAnimation:mp1 forKey:@"jtone"]; 130 [leftPhoneScreen.layer addAnimation:mp1 forKey:@"jtone"]; 131 132 CAAnimationGroup * mp2 = [self getAnimGroup]; 133 mp2.animations = [self AnimWithPhone:rightPhoneCenter Option:1]; 134 [rightPhone.layer addAnimation:mp2 forKey:@"jtone"]; 135 [rightPhoneScreen.layer addAnimation:mp2 forKey:@"jtone"]; 136 137 CAAnimationGroup * mp3 = [self getAnimGroup]; 138 mp3.animations = [self AnimFromObj:contactCenter ToObj:picCenter Option:-1]; 139 [contact.layer addAnimation:mp3 forKey:@"jtone"]; 140 141 CAAnimationGroup * mp4 = [self getAnimGroup]; 142 mp4.animations = [self AnimFromObj:picCenter ToObj:contactCenter Option:1]; 143 [picture.layer addAnimation:mp4 forKey:@"jtone"]; 144 145 } 146 147 - (void)dealloc 148 { 149 [super dealloc]; 150 } 151 152 @end