iOS 動畫之CoreAnimation(CALayer)

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幀動畫主要操作屬性有keyPathvalues值組合Keyframe顧名思義就是關(guān)鍵點(diǎn)的frame流纹,你可以通過設(shè)定CALayer的始點(diǎn)糜烹、中間關(guān)鍵點(diǎn)、終點(diǎn)的frame漱凝,時(shí)間疮蹦,動畫會沿你設(shè)定的軌跡進(jìn)行移動。
  • CAAnimationGroup組合動畫 操作屬性animationsCAAnimation類型的動畫加入數(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ù)或者角度。

  • fromValuetoValue不為空慎玖,動畫的效果會從fromValue的值變化到toValue贮尖。
  • fromValuebyValue都不為空,動畫的效果將會從fromValue變化到fromValue+byValue趁怔。
  • toValuebyValue都不為空湿硝,動畫的效果將會從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)也就是anchorPointanchorPoint洒扎、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的簡單介紹了,謝謝觀看逛球。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末千元,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子颤绕,更是在濱河造成了極大的恐慌幸海,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,651評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件奥务,死亡現(xiàn)場離奇詭異物独,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)氯葬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3 392
  • 文/潘曉璐 我一進(jìn)店門挡篓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人帚称,你說我怎么就攤上這事官研。” “怎么了闯睹?”我有些...
    開封第一講書人閱讀 162,931評論 0 353
  • 文/不壞的土叔 我叫張陵戏羽,是天一觀的道長。 經(jīng)常有香客問我瞻坝,道長蛛壳,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,218評論 1 292
  • 正文 為了忘掉前任所刀,我火速辦了婚禮,結(jié)果婚禮上捞挥,老公的妹妹穿的比我還像新娘浮创。我一直安慰自己,他們只是感情好砌函,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,234評論 6 388
  • 文/花漫 我一把揭開白布斩披。 她就那樣靜靜地躺著,像睡著了一般讹俊。 火紅的嫁衣襯著肌膚如雪垦沉。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,198評論 1 299
  • 那天仍劈,我揣著相機(jī)與錄音厕倍,去河邊找鬼。 笑死贩疙,一個(gè)胖子當(dāng)著我的面吹牛讹弯,可吹牛的內(nèi)容都是我干的况既。 我是一名探鬼主播,決...
    沈念sama閱讀 40,084評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼组民,長吁一口氣:“原來是場噩夢啊……” “哼棒仍!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起臭胜,我...
    開封第一講書人閱讀 38,926評論 0 274
  • 序言:老撾萬榮一對情侶失蹤莫其,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后耸三,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體乱陡,經(jīng)...
    沈念sama閱讀 45,341評論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,563評論 2 333
  • 正文 我和宋清朗相戀三年吕晌,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蛋褥。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,731評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡睛驳,死狀恐怖烙心,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情乏沸,我是刑警寧澤淫茵,帶...
    沈念sama閱讀 35,430評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站蹬跃,受9級特大地震影響匙瘪,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蝶缀,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,036評論 3 326
  • 文/蒙蒙 一丹喻、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧翁都,春花似錦碍论、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至坐搔,卻和暖如春藏研,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背概行。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1 269
  • 我被黑心中介騙來泰國打工蠢挡, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,743評論 2 368
  • 正文 我出身青樓袒哥,卻偏偏與公主長得像缩筛,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子堡称,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,629評論 2 354

推薦閱讀更多精彩內(nèi)容