基本概念
1、什么是核心動畫
Core Animation(核心動畫)是一組功能強大、效果華麗的動畫API,無論在iOS系統(tǒng)或者在你開發(fā)的App中,都有大量應(yīng)用。
2、核心動畫作用范圍##
核心動畫作用在CALayer(Core animation layer)上,CALayer從概念上類似UIView,我們可以將UIView看成是一種特殊的CALayer(可以響應(yīng)事件)。
3、核心動畫對比UIView動畫###
核心動畫和UIView動畫的對比:UIView動畫可以看成是對核心動畫的封裝,和UIView動畫不同的是,通過核心動畫改變layer的狀態(tài)(比如position),動畫執(zhí)行完畢后實際上是沒有改變的(表面上看起來已改變)。
總體來說核心動畫的優(yōu)點有:
1)性能強大,使用硬件加速,可以同時向多個圖層添加不同的動畫效果
2)接口易用,只需要少量的代碼就可以實現(xiàn)復(fù)雜的動畫效果。
3)運行在后臺線程中,在動畫過程中可以響應(yīng)交互事件(UIView動畫默認動畫過程中不響應(yīng)交互事件)。
4、核心動畫結(jié)構(gòu)層次
5、核心動畫類中可以直接使用的類有:
CABasicAnimation
CAKeyframeAnimation
CATransition
CAAnimationGroup
CASpringAnimation
6、這5個類使用簡介
CABasicAnimation和CAKeyframeAnimation屬于CAPropertyAnimation的子類
他們的初始化方法:
+ (instancetype)animation;
+ (instancetype)animationWithKeyPath:(nullable NSString *)path;
duration:動畫的持續(xù)時間
repeatCount:動畫的重復(fù)次數(shù)
fillMode:視圖在非Active時的行為
beginTime:動畫延遲執(zhí)行時間(通過CACurrentMediaTime() + your time 設(shè)置)
delegate:代理
timingFunction:動畫的時間節(jié)奏控制
kCAMediaTimingFunctionLinear 勻速
kCAMediaTimingFunctionEaseIn 慢進
kCAMediaTimingFunctionEaseOut 慢出
kCAMediaTimingFunctionEaseInEaseOut 慢進慢出
kCAMediaTimingFunctionDefault 默認值(慢進慢出)
keyPath:可以指定keyPath為CALayer的屬性值,并對它的值進行修改,以達到對應(yīng)的動畫效果,需要注意的是部分屬性值是不支持動畫效果的。
以下是具有動畫效果的keyPath:
//CATransform3D Key Paths : (example)transform.rotation.z
//rotation 旋轉(zhuǎn)
rotation.x
rotation.y
rotation.z
//scale 縮放
scale.x
scale.y
scale.z
//translation 平移
translation.x
translation.y
translation.z
//CGPoint Key Paths : (example)position.x
x
y
//CGRect Key Paths : (example)bounds.size.width
//origin
origin.x
origin.y
//size
size.width
size.height
//opacity
backgroundColor
cornerRadius
borderWidth
contents
//Shadow Key Path:
shadowColor
shadowOffset
shadowOpacity
shadowRadius
6.1CABasicAnimation
CABasicAnimation可以設(shè)定keyPath的起點,終點的值,動畫會沿著設(shè)定點進行移動,CABasicAnimation可以看成是只有兩個關(guān)鍵點的特殊的CAKeyFrameAnimation。
- (void)position {
CABasicAnimation * ani = [CABasicAnimation animationWithKeyPath:@"position"];
ani.toValue = [NSValue valueWithCGPoint:self.centerShow.center];
ani.removedOnCompletion = NO;
ani.fillMode = kCAFillModeForwards;
ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.cartCenter.layer addAnimation:ani forKey:@"PostionAni"];
}
6.2 CAKeyframeAnimation
UIView的關(guān)鍵幀動畫就是在CAKeyframeAnimation上封裝得來的
CAKeyframeAnimation的重要屬性:
values:關(guān)鍵幀數(shù)組對象,里面每一個元素即為一個關(guān)鍵幀,動畫會在對應(yīng)的時間段內(nèi),依次執(zhí)行數(shù)組中每一個關(guān)鍵幀的動畫。
path:動畫路徑對象,可以指定一個路徑,在執(zhí)行動畫時路徑會沿著路徑移動,Path在動畫中只會影響視圖的Position。
keyTimes:設(shè)置關(guān)鍵幀對應(yīng)的時間點,范圍:0-1。如果沒有設(shè)置該屬性,則每一幀的時間平分。
1、value動畫
- (void)valueKeyframeAni {
CAKeyframeAnimation * ani = [CAKeyframeAnimation animationWithKeyPath:@"position"];
ani.duration = 4.0;
ani.removedOnCompletion = NO;
ani.fillMode = kCAFillModeForwards;
ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
NSValue * value1 = [NSValue valueWithCGPoint:CGPointMake(150, 200)];
NSValue *value2=[NSValue valueWithCGPoint:CGPointMake(250, 200)];
NSValue *value3=[NSValue valueWithCGPoint:CGPointMake(250, 300)];
NSValue *value4=[NSValue valueWithCGPoint:CGPointMake(150, 300)];
NSValue *value5=[NSValue valueWithCGPoint:CGPointMake(150, 200)];
ani.values = @[value1, value2, value3, value4, value5];
[self.centerShow.layer addAnimation:ani forKey:@"PostionKeyframeValueAni"];
}
----------------------------------
2、path動畫
- (void)pathKeyframeAni {
CAKeyframeAnimation * ani = [CAKeyframeAnimation animationWithKeyPath:@"position"];
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, NULL, CGRectMake(130, 200, 100, 100));
ani.path = path;
CGPathRelease(path);
ani.duration = 4.0;
ani.removedOnCompletion = NO;
ani.fillMode = kCAFillModeForwards;
[self.centerShow.layer addAnimation:ani forKey:@"PostionKeyframePathAni"];
}
6.3 CASpringAnimation
CASpringAnimation是iOS9新加入動畫類型,是CABasicAnimation的子類,用于實現(xiàn)彈簧動畫。
CASpringAnimation和UIView的SpringAnimation對比:
1.CASpringAnimation 可以設(shè)置更多影響彈簧動畫效果的屬性,可以實現(xiàn)更復(fù)雜的彈簧動畫效果,且可以和其他動畫組合。
2.UIView的SpringAnimation實際上就是通過CASpringAnimation來實現(xiàn)。
CASpringAnimation的重要屬性:
mass:質(zhì)量(影響彈簧的慣性,質(zhì)量越大,彈簧慣性越大,運動的幅度越大)
stiffness:彈性系數(shù)(彈性系數(shù)越大,彈簧的運動越快)
damping:阻尼系數(shù)(阻尼系數(shù)越大,彈簧的停止越快)
initialVelocity:初始速率(彈簧動畫的初始速度大小,彈簧運動的初始方向與初始速率的正負一致,若初始速率為0,表示忽略該屬性)
settlingDuration:結(jié)算時間(根據(jù)動畫參數(shù)估算彈簧開始運動到停止的時間,動畫設(shè)置的時間最好根據(jù)此時間來設(shè)置)
- (void)springAni {
CASpringAnimation * ani = [CASpringAnimation animationWithKeyPath:@"bounds"];
ani.mass = 10.0; //質(zhì)量,影響圖層運動時的彈簧慣性,質(zhì)量越大,彈簧拉伸和壓縮的幅度越大
ani.stiffness = 5000; //剛度系數(shù)(勁度系數(shù)/彈性系數(shù)),剛度系數(shù)越大,形變產(chǎn)生的力就越大,運動越快
ani.damping = 100.0;//阻尼系數(shù),阻止彈簧伸縮的系數(shù),阻尼系數(shù)越大,停止越快
ani.initialVelocity = 5.f;//初始速率,動畫視圖的初始速度大小;速率為正數(shù)時,速度方向與運動方向一致,速率為負數(shù)時,速度方向與運動方向相反
ani.duration = ani.settlingDuration;
ani.toValue = [NSValue valueWithCGRect:self.centerShow.bounds];
ani.removedOnCompletion = NO;
ani.fillMode = kCAFillModeForwards;
ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.cartCenter.layer addAnimation:ani forKey:@"boundsAni"];
}
6.4 CAAnimationGroup
使用Group可以將多個動畫合并一起加入到層中,Group中所有動畫并發(fā)執(zhí)行,可以方便地實現(xiàn)需要多種類型動畫的場景。
- (void)groupAni {
CABasicAnimation * posAni = [CABasicAnimation animationWithKeyPath:@"position"];
posAni.toValue = [NSValue valueWithCGPoint:self.centerShow.center];
CABasicAnimation * opcAni = [CABasicAnimation animationWithKeyPath:@"opacity"];
opcAni.toValue = [NSNumber numberWithFloat:1.0];
opcAni.toValue = [NSNumber numberWithFloat:0.7];
CABasicAnimation * bodAni = [CABasicAnimation animationWithKeyPath:@"bounds"];
bodAni.toValue = [NSValue valueWithCGRect:self.centerShow.bounds];
CAAnimationGroup * groupAni = [CAAnimationGroup animation];
groupAni.animations = @[posAni, opcAni, bodAni];
groupAni.duration = 1.0;
groupAni.fillMode = kCAFillModeForwards;
groupAni.removedOnCompletion = NO;
groupAni.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.cartCenter.layer addAnimation:groupAni forKey:@"groupAni"];
}
6.5 CATransition
轉(zhuǎn)場動畫,比UIVIew轉(zhuǎn)場動畫具有更多的動畫效果,比如Nav的默認Push視圖的效果就是通過CATransition的kCATransitionPush類型來實現(xiàn)。
CATransition 屬性
type:過渡動畫的類型
NSString * const kCATransitionFade;//漸變
NSString * const kCATransitionMoveIn;//移入
NSString * const kCATransitionPush;//平移(暫且這么稱呼吧)
NSString * const kCATransitionReveal;//顯露
私有API
@"cube"http://立方體
@"suckEffect"http:// 吸走的效果
@"oglFlip"http://前后翻轉(zhuǎn)效果
@"rippleEffect"http://110波紋效果
@"pageCurl"http://101翻頁起來
@"pageUnCurl"http://102翻頁下來
@"cameraIrisHollowOpen "http://107//鏡頭開
@"cameraIrisHollowClose "http://106鏡頭關(guān)
subtype: 過渡動畫的方向
NSString * const kCATransitionFromRight;
NSString * const kCATransitionFromLeft;
NSString * const kCATransitionFromTop;
NSString * const kCATransitionFromBottom;
示例
- (void)transitionAni {
CATransition * ani = [CATransition animation];
ani.type = kCATransitionFade;
ani.subtype = kCATransitionFromLeft;
ani.duration = 1.5;
self.centerShow.image = [UIImage imageNamed:@"Raffle"];
[self.centerShow.layer addAnimation:ani forKey:@"transitionAni"];
}