CoreAnimation基本介紹
- CoreAnimation動畫位于iOS框架的Media層
- CoreAnimation動畫實(shí)現(xiàn)需要添加QuartzCore.Framework
- CoreAnimation基本上是Layer Animation
CoreAnimation分類
- 隱式動畫:無需指定任何動畫的類型颤专,僅僅改變一個(gè)屬性栖榨,然后CoreAnimation來決定
如何計(jì)時(shí)去做動畫厨幻。 - 顯示動畫:對一些屬性做指定的自定義動畫彪薛,或創(chuàng)建非線性動畫奄薇,比如沿著任意一條曲線移動等太。
CoreAnimation作用
與UIView動畫相比右核,CoreAnimation能夠?qū)崿F(xiàn)更多復(fù)雜半哟、好看溉苛、高效的動畫效果镜廉。
- 陰影,圓角愚战,帶顏色的邊框娇唯。
- 3D變化齐遵。
- 透明遮罩
- 多級非線性動畫
CoreAnimation的三種動畫
- CABasicAnimation基本單一類型的動畫,通過設(shè)定起始點(diǎn)塔插,終點(diǎn)梗摇,時(shí)間,動畫會沿著你這設(shè)定點(diǎn)進(jìn)行移動想许×媸冢可以看做特殊的CAKeyFrameAnimation 。
- CAKeyframeAnimation幀動畫主要操作屬性有keyPath和values值組合Keyframe顧名思義就是關(guān)鍵點(diǎn)的frame流纹,你可以通過設(shè)定CALayer的始點(diǎn)糜烹、中間關(guān)鍵點(diǎn)、終點(diǎn)的frame漱凝,時(shí)間疮蹦,動畫會沿你設(shè)定的軌跡進(jìn)行移動。
- CAAnimationGroup組合動畫 操作屬性animations將CAAnimation類型的動畫加入數(shù)組碉哑,以FIFO隊(duì)列的方式執(zhí)行挚币。
- CATransition這個(gè)就是蘋果幫開發(fā)者封裝好的一些動畫
CABasicAnimation
三個(gè)重要的屬性
@property(nullable, strong) id fromValue;動畫的效果變化的初始值
@property(nullable, strong) id toValue;動畫效果變化的結(jié)束值(絕對值)
@property(nullable, strong) id byValue;動畫效果變化的結(jié)束值(相對值)
這三個(gè)屬性必須要有一個(gè)有值,它們的值就是原來視圖的放大扣典,旋轉(zhuǎn)等倍數(shù)或者角度。
- fromValue和toValue不為空慎玖,動畫的效果會從fromValue的值變化到toValue贮尖。
- fromValue和byValue都不為空,動畫的效果將會從fromValue變化到fromValue+byValue趁怔。
- toValue 和byValue都不為空湿硝,動畫的效果將會從toValue-byValue變化到toValue。
- 只有fromValue的值不為空润努,動畫的效果將會從fromValue的值變化到當(dāng)前的狀態(tài)关斜。
- 只有toValue的值不為空,動畫的效果將會從當(dāng)前狀態(tài)的值變化到toValue的值铺浇。
- 只有byValue的值不為空痢畜,動畫的效果將會從當(dāng)前的值變化到(當(dāng)前狀態(tài)的值+byValue)的值。
想要實(shí)現(xiàn)不同的效果鳍侣,最關(guān)鍵的地方在于CABasicAnimation對象的初始化方式中keyPath的設(shè)定丁稀。在iOS中有以下幾種不同的keyPath,代表著不同的效果:
transform.rotation.x //以x軸為中心旋轉(zhuǎn)
transform.rotation.y //以y軸為中心旋轉(zhuǎn)
transform.rotation.z //以z軸為中心旋轉(zhuǎn)
transform.scale.x //縮放x軸方向
transform.scale.y //縮放y軸方向
transform.scale.z //縮放z軸方向倚聚,這個(gè)一般不會用到线衫。
transform.scale //x,y方向整體縮放惑折,z方向沒看到效果授账。
下面我們來簡單的做一個(gè)動畫
- (void)springAnimation{
CABasicAnimation *base = [CABasicAnimation animationWithKeyPath:@"transform.scale.y"];
/*在動畫結(jié)束之后是否讓動畫回到原處枯跑,這個(gè)屬性的默認(rèn)值是YES(回到原處),此時(shí)*fillMode*是沒有作用的
如果設(shè)置為NO那么就需要設(shè)置一個(gè)*fillMode*屬性,就是動畫結(jié)束之后的狀態(tài)白热,如果不設(shè)置全肮,動畫也會回到原處。*/
base.removedOnCompletion = NO;
//動畫結(jié)束之后狀態(tài)的設(shè)置
base.fillMode = kCAFillModeForwards;
base.fromValue = @(2);
//動畫時(shí)長
base.duration = 10;
//動畫的重復(fù)次數(shù)
base.repeatCount = 100;
//給base動畫設(shè)置延時(shí)啟動
base.beginTime = 2 + CACurrentMediaTime();
//動畫是否按原路徑返回
base.autoreverses = YES;
//將動畫添加到layer層*forKey*是給動畫添加一個(gè)標(biāo)記棘捣,方便刪除辜腺。
[self.redView.layer addAnimation:base forKey:@"basic"];
}
刪除動畫的方法
-(void)removeAnimationForKey:(NSString *)key;
key:你需要刪除的動畫的名稱。
這個(gè)方法就是你把動畫添加到那個(gè)視圖的layer層上乍恐,就由那個(gè)視圖的layer來調(diào)用评疗。
-(void)removeAllAnimations;
這個(gè)法是刪除這個(gè)視圖layer層上的所有動畫。
在這里簡單介紹一下fillMode
注意:fillMode這個(gè)屬性茵烈,必須要配合下面這個(gè)屬性來使用百匆。這個(gè)屬性的默認(rèn)值是YES(回到原處),此時(shí)fillMode是沒有作用的如果設(shè)置為NO那么就需要設(shè)置一個(gè)fillMode屬性,就是動畫結(jié)束之后的狀態(tài)呜投,如果不設(shè)置加匈,動畫也會回到原處。
base.removedOnCompletion = NO;
kCAFillModeRemoved 這個(gè)是默認(rèn)值,也就是說當(dāng)動畫開始前和動畫結(jié)束后,動畫對layer都沒有影響,動畫結(jié)束后,layer會恢復(fù)到之前的狀態(tài)
kCAFillModeForwards 當(dāng)動畫結(jié)束后,layer會一直保持著動畫最后的狀態(tài)
kCAFillModeBackwards 這個(gè)和kCAFillModeForwards是相對的,就是在動畫開始前,你只要將動畫加入了
一個(gè)layer,layer便立即進(jìn)入動畫的初始狀態(tài)并等待動畫開始.你可以這樣設(shè)定測試代碼,將一個(gè)動畫加入一個(gè)
layer的時(shí)候延遲5秒執(zhí)行.然后就會發(fā)現(xiàn)在動畫沒有開始的時(shí)候,只要動畫被加入了layer,layer便處于動畫初
始狀態(tài)
kCAFillModeBoth 理解了上面兩個(gè),這個(gè)就很好理解了,這個(gè)其實(shí)就是上面兩個(gè)的合成.動畫加入后開始之
前,layer便處于動畫初始狀態(tài),動畫結(jié)束后layer保持動畫最后的狀態(tài).
CAKeyframeAnimation
這個(gè)動畫可以讓你在動畫的一些關(guān)鍵的位置來改變動畫的frame以此來達(dá)到我們想要的效果仑荐。
position是描述動畫視圖的位置信息的雕拼,簡單理解就是和視圖的中心點(diǎn)一樣,所以我們通過改變position屬性粘招,就可以改變動畫的位置啥寇。
與position相對應(yīng)得是錨點(diǎn)也就是anchorPoint,anchorPoint洒扎、position辑甜、frame這三者之間有著如下的關(guān)系。
position.x = frame.origin.x + anchorPoint.x * bounds.size.width袍冷;
position.y = frame.origin.y + anchorPoint.y * bounds.size.height磷醋;
示例代碼:下面是讓一個(gè)視圖左右震動的動畫
CAKeyframeAnimation *keyFram = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//layer最初的position值
float position_x = self.redView.layer.position.x;
float position_y = self.redView.layer.position.y;
//layer向左晃動的偏移量
NSValue *leftValue = [NSValue valueWithCGPoint:CGPointMake(position_x - 30, position_y)];
//layer的原始位置
NSValue *originValue = [NSValue valueWithCGPoint:CGPointMake(position_x, position_y)];
//layer向右晃動的偏移量
NSValue *right = [NSValue valueWithCGPoint:CGPointMake(position_x + 30, position_y)];
//添加每一幀的Value值
[keyFram setValues:@[originValue,leftValue,originValue,right,originValue]];
keyFram.repeatCount = 10;
keyFram.repeatDuration = 1;
//為layer層添加動畫
[self.redView.layer addAnimation:keyFram forKey:@"aaa"];
CAAnimationGroup
CAAnimationGroup是一個(gè)組合動畫,所謂的組合動畫就是將多個(gè)動畫組合到一起讓它產(chǎn)生很炫酷的效果胡诗。
注意:所有的組合動畫邓线,它的延遲啟動,重復(fù)次數(shù)等屬性乃戈,同一在組里面設(shè)置褂痰,不要在單一的動畫里面設(shè)置,以免出現(xiàn)問題症虑。
- 第一步:初始化組合動畫
CAAnimationGroup *group = [CAAnimationGroup animation];
- 第二步創(chuàng)建至少兩個(gè)動畫
CABasicAnimation *base = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
/*在動畫結(jié)束之后是否讓動畫回到原處缩歪,這個(gè)屬性的默認(rèn)值是YES(回到原處),此時(shí)*fillMode*是沒有作用的
如果設(shè)置為NO那么就需要設(shè)置一個(gè)*fillMode*屬性,就是動畫結(jié)束之后的狀態(tài)谍憔,如果不設(shè)置匪蝙,動畫也會回到原處主籍。*/
base.removedOnCompletion = NO;
//動畫結(jié)束之后狀態(tài)的設(shè)置
base.fillMode = kCAFillModeForwards;
base.fromValue = @(M_PI);
//動畫是否按原路徑返回
base.autoreverses = YES;
/************************************************************************************************/
CAKeyframeAnimation *keyFram = [CAKeyframeAnimationanimationWithKeyPath:@"position"];
//layer最初的position值
float position_x = self.redView.layer.position.x;
float position_y = self.redView.layer.position.y;
//layer向左晃動的偏移量
NSValue *leftValue = [NSValue valueWithCGPoint:CGPointMake(position_x - 50, position_y)];
//layer的原始位置
NSValue *originValue = [NSValue valueWithCGPoint:CGPointMake(position_x, position_y)];
//layer向右晃動的偏移量
NSValue *right = [NSValue valueWithCGPoint:CGPointMake(position_x + 50, position_y)];
//添加每一幀的Value值
[keyFram setValues:@[originValue,leftValue,originValue,right,originValue]];
- 第三步將得到的動畫放入group中
group.animations = @[base,keyFram];
//將group加到layer上
group.repeatCount = 100;
group.repeatDuration = 10;
[self.redView.layer addAnimation:group forKey:@"group"];
以上就是有關(guān)于CoreAnimation的簡單介紹了,謝謝觀看逛球。