iOS 動(dòng)畫之CoreAnimation(CALayer)

CoreAnimation基本介紹

CoreAnimation動(dòng)畫位于iOS框架的Media

CoreAnimation動(dòng)畫實(shí)現(xiàn)需要添加QuartzCore.Framework

CoreAnimation基本上是Layer Animation

CoreAnimation分類

隱式動(dòng)畫:無需指定任何動(dòng)畫的類型,僅僅改變一個(gè)屬性,然后CoreAnimation來決定

如何計(jì)時(shí)去做動(dòng)畫。

顯示動(dòng)畫:對(duì)一些屬性做指定的自定義動(dòng)畫居凶,或創(chuàng)建非線性動(dòng)畫涂佃,比如沿著任意一條曲線移動(dòng)脐恩。

CoreAnimation作用

與UIView動(dòng)畫相比废菱,CoreAnimation能夠?qū)崿F(xiàn)更多復(fù)雜咖刃、好看差油、高效的動(dòng)畫效果拗军。

陰影,圓角蓄喇,帶顏色的邊框发侵。

3D變化。

透明遮罩

多級(jí)非線性動(dòng)畫

CoreAnimation的三種動(dòng)畫

CABasicAnimation基本單一類型的動(dòng)畫妆偏,通過設(shè)定起始點(diǎn)刃鳄,終點(diǎn),時(shí)間钱骂,動(dòng)畫會(huì)沿著你這設(shè)定點(diǎn)進(jìn)行移動(dòng)叔锐。可以看做特殊的CAKeyFrameAnimation 见秽。

CAKeyframeAnimation幀動(dòng)畫主要操作屬性有keyPathvalues值組合Keyframe顧名思義就是關(guān)鍵點(diǎn)的frame愉烙,你可以通過設(shè)定CALayer的始點(diǎn)、中間關(guān)鍵點(diǎn)解取、終點(diǎn)的frame齿梁,時(shí)間,動(dòng)畫會(huì)沿你設(shè)定的軌跡進(jìn)行移動(dòng)肮蛹。

CAAnimationGroup組合動(dòng)畫 操作屬性animationsCAAnimation類型的動(dòng)畫加入數(shù)組勺择,以FIFO隊(duì)列的方式執(zhí)行。

CATransition這個(gè)就是蘋果幫開發(fā)者封裝好的一些動(dòng)畫

CABasicAnimation

三個(gè)重要的屬性

@property(nullable,strong)idfromValue;動(dòng)畫的效果變化的初始值@property(nullable,strong)idtoValue;動(dòng)畫效果變化的結(jié)束值(絕對(duì)值)@property(nullable,strong)idbyValue;動(dòng)畫效果變化的結(jié)束值(相對(duì)值)

這三個(gè)屬性必須要有一個(gè)有值伦忠,它們的值就是原來視圖的放大省核,旋轉(zhuǎn)等倍數(shù)或者角度。

fromValuetoValue不為空昆码,動(dòng)畫的效果會(huì)從fromValue的值變化到toValue气忠。

fromValuebyValue都不為空,動(dòng)畫的效果將會(huì)從fromValue變化到fromValue+byValue赋咽。

toValuebyValue都不為空旧噪,動(dòng)畫的效果將會(huì)從toValue-byValue變化到toValue

只有fromValue的值不為空脓匿,動(dòng)畫的效果將會(huì)從fromValue的值變化到當(dāng)前的狀態(tài)淘钟。

只有toValue的值不為空,動(dòng)畫的效果將會(huì)從當(dāng)前狀態(tài)的值變化到toValue的值陪毡。

只有byValue的值不為空米母,動(dòng)畫的效果將會(huì)從當(dāng)前的值變化到(當(dāng)前狀態(tài)的值+byValue)的值勾扭。

想要實(shí)現(xiàn)不同的效果,最關(guān)鍵的地方在于CABasicAnimation對(duì)象的初始化方式中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è)一般不會(huì)用到慧耍。transform.scale//x身辨,y方向整體縮放,z方向沒看到效果芍碧。

下面我們來簡(jiǎn)單的做一個(gè)動(dòng)畫

- (void)springAnimation{? ? CABasicAnimation *base= [CABasicAnimation animationWithKeyPath:@"transform.scale.y"];/*在動(dòng)畫結(jié)束之后是否讓動(dòng)畫回到原處栅表,這個(gè)屬性的默認(rèn)值是YES(回到原處),此時(shí)*fillMode*是沒有作用的

如果設(shè)置為NO那么就需要設(shè)置一個(gè)*fillMode*屬性,就是動(dòng)畫結(jié)束之后的狀態(tài)师枣,如果不設(shè)置怪瓶,動(dòng)畫也會(huì)回到原處。*/base.removedOnCompletion = NO;//動(dòng)畫結(jié)束之后狀態(tài)的設(shè)置base.fillMode = kCAFillModeForwards;base.fromValue = @(2);//動(dòng)畫時(shí)長base.duration =10;//動(dòng)畫的重復(fù)次數(shù)base.repeatCount =100;//給base動(dòng)畫設(shè)置延時(shí)啟動(dòng)base.beginTime =2+ CACurrentMediaTime();//動(dòng)畫是否按原路徑返回base.autoreverses = YES;//將動(dòng)畫添加到layer層*forKey*是給動(dòng)畫添加一個(gè)標(biāo)記践美,方便刪除洗贰。[self.redView.layer addAnimation:baseforKey:@"basic"];}

刪除動(dòng)畫的方法

-(void)removeAnimationForKey:(NSString*)key;key:你需要?jiǎng)h除的動(dòng)畫的名稱。這個(gè)方法就是你把動(dòng)畫添加到那個(gè)視圖的layer層上陨倡,就由那個(gè)視圖的layer來調(diào)用敛滋。-(void)removeAllAnimations;這個(gè)法是刪除這個(gè)視圖layer層上的所有動(dòng)畫。

在這里簡(jiǎn)單介紹一下fillMode

注意fillMode這個(gè)屬性兴革,必須要配合下面這個(gè)屬性來使用绎晃。這個(gè)屬性的默認(rèn)值是YES(回到原處),此時(shí)fillMode是沒有作用的如果設(shè)置為NO那么就需要設(shè)置一個(gè)fillMode屬性,就是動(dòng)畫結(jié)束之后的狀態(tài)杂曲,如果不設(shè)置庶艾,動(dòng)畫也會(huì)回到原處。

base.removedOnCompletion=NO;

kCAFillModeRemoved這個(gè)是默認(rèn)值,也就是說當(dāng)動(dòng)畫開始前和動(dòng)畫結(jié)束后,動(dòng)畫對(duì)layer都沒有影響,動(dòng)畫結(jié)束后,layer會(huì)恢復(fù)到之前的狀態(tài) kCAFillModeForwards當(dāng)動(dòng)畫結(jié)束后,layer會(huì)一直保持著動(dòng)畫最后的狀態(tài) kCAFillModeBackwards這個(gè)和kCAFillModeForwards是相對(duì)的,就是在動(dòng)畫開始前,你只要將動(dòng)畫加入了一個(gè)layer,layer便立即進(jìn)入動(dòng)畫的初始狀態(tài)并等待動(dòng)畫開始.你可以這樣設(shè)定測(cè)試代碼,將一個(gè)動(dòng)畫加入一個(gè)layer的時(shí)候延遲5秒執(zhí)行.然后就會(huì)發(fā)現(xiàn)在動(dòng)畫沒有開始的時(shí)候,只要?jiǎng)赢嫳患尤肓薼ayer,layer便處于動(dòng)畫初始狀態(tài) kCAFillModeBoth理解了上面兩個(gè),這個(gè)就很好理解了,這個(gè)其實(shí)就是上面兩個(gè)的合成.動(dòng)畫加入后開始之前,layer便處于動(dòng)畫初始狀態(tài),動(dòng)畫結(jié)束后layer保持動(dòng)畫最后的狀態(tài).

CAKeyframeAnimation

這個(gè)動(dòng)畫可以讓你在動(dòng)畫的一些關(guān)鍵的位置來改變動(dòng)畫的frame以此來達(dá)到我們想要的效果擎勘。

position是描述動(dòng)畫視圖的位置信息的咱揍,簡(jiǎn)單理解就是和視圖的中心點(diǎn)一樣,所以我們通過改變position屬性棚饵,就可以改變動(dòng)畫的位置煤裙。

position相對(duì)應(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è)視圖左右震動(dòng)的動(dòng)畫

CAKeyframeAnimation*keyFram = [CAKeyframeAnimationanimationWithKeyPath:@"position"];//layer最初的position值floatposition_x =self.redView.layer.position.x;floatposition_y =self.redView.layer.position.y;//layer向左晃動(dòng)的偏移量NSValue*leftValue = [NSValuevalueWithCGPoint:CGPointMake(position_x -30, position_y)];//layer的原始位置NSValue*originValue = [NSValuevalueWithCGPoint:CGPointMake(position_x, position_y)];//layer向右晃動(dòng)的偏移量NSValue*right = [NSValuevalueWithCGPoint:CGPointMake(position_x +30, position_y)];//添加每一幀的Value值[keyFram setValues:@[originValue,leftValue,originValue,right,originValue]];? ? keyFram.repeatCount=10;? ? keyFram.repeatDuration=1;//為layer層添加動(dòng)畫[self.redView.layeraddAnimation:keyFram forKey:@"aaa"];

CAAnimationGroup

CAAnimationGroup是一個(gè)組合動(dòng)畫,所謂的組合動(dòng)畫就是將多個(gè)動(dòng)畫組合到一起讓它產(chǎn)生很炫酷的效果。

注意:所有的組合動(dòng)畫遍愿,它的延遲啟動(dòng),重復(fù)次數(shù)等屬性耘斩,同一在組里面設(shè)置沼填,不要在單一的動(dòng)畫里面設(shè)置,以免出現(xiàn)問題括授。

第一步:初始化組合動(dòng)畫

CAAnimationGroup*group = [CAAnimationGroupanimation];

第二步創(chuàng)建至少兩個(gè)動(dòng)畫

CABasicAnimation*base = [CABasicAnimationanimationWithKeyPath:@"transform.rotation.z"];/*在動(dòng)畫結(jié)束之后是否讓動(dòng)畫回到原處坞笙,這個(gè)屬性的默認(rèn)值是YES(回到原處),此時(shí)*fillMode*是沒有作用的

如果設(shè)置為NO那么就需要設(shè)置一個(gè)*fillMode*屬性,就是動(dòng)畫結(jié)束之后的狀態(tài)荚虚,如果不設(shè)置薛夜,動(dòng)畫也會(huì)回到原處。*/base.removedOnCompletion=NO;//動(dòng)畫結(jié)束之后狀態(tài)的設(shè)置base.fillMode= kCAFillModeForwards;? base.fromValue= @(M_PI);//動(dòng)畫是否按原路徑返回base.autoreverses=YES;/************************************************************************************************/CAKeyframeAnimation*keyFram = [CAKeyframeAnimationanimationWithKeyPath:@"position"];//layer最初的position值floatposition_x =self.redView.layer.position.x;floatposition_y =self.redView.layer.position.y;//layer向左晃動(dòng)的偏移量NSValue*leftValue = [NSValuevalueWithCGPoint:CGPointMake(position_x -50, position_y)];//layer的原始位置NSValue*originValue = [NSValuevalueWithCGPoint:CGPointMake(position_x, position_y)];//layer向右晃動(dòng)的偏移量NSValue*right = [NSValuevalueWithCGPoint:CGPointMake(position_x +50, position_y)];//添加每一幀的Value值[keyFram setValues:@[originValue,leftValue,originValue,right,originValue]];

第三步將得到的動(dòng)畫放入group中

group.animations = @[base,keyFram];//將group加到layer上group.repeatCount =100;group.repeatDuration =10;? [self.redView.layer addAnimation:groupforKey:@"group"];

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末版述,一起剝皮案震驚了整個(gè)濱河市梯澜,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌渴析,老刑警劉巖晚伙,帶你破解...
    沈念sama閱讀 212,884評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異俭茧,居然都是意外死亡咆疗,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門母债,熙熙樓的掌柜王于貴愁眉苦臉地迎上來午磁,“玉大人,你說我怎么就攤上這事毡们⊙富剩” “怎么了?”我有些...
    開封第一講書人閱讀 158,369評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵衙熔,是天一觀的道長喧半。 經(jīng)常有香客問我,道長青责,這世上最難降的妖魔是什么挺据? 我笑而不...
    開封第一講書人閱讀 56,799評(píng)論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮脖隶,結(jié)果婚禮上扁耐,老公的妹妹穿的比我還像新娘。我一直安慰自己产阱,他們只是感情好婉称,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,910評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般王暗。 火紅的嫁衣襯著肌膚如雪悔据。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,096評(píng)論 1 291
  • 那天俗壹,我揣著相機(jī)與錄音科汗,去河邊找鬼。 笑死绷雏,一個(gè)胖子當(dāng)著我的面吹牛头滔,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播涎显,決...
    沈念sama閱讀 39,159評(píng)論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼坤检,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了期吓?” 一聲冷哼從身側(cè)響起早歇,我...
    開封第一講書人閱讀 37,917評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎讨勤,沒想到半個(gè)月后缺前,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,360評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡悬襟,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,673評(píng)論 2 327
  • 正文 我和宋清朗相戀三年衅码,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片脊岳。...
    茶點(diǎn)故事閱讀 38,814評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡逝段,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出割捅,到底是詐尸還是另有隱情奶躯,我是刑警寧澤,帶...
    沈念sama閱讀 34,509評(píng)論 4 334
  • 正文 年R本政府宣布亿驾,位于F島的核電站嘹黔,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏莫瞬。R本人自食惡果不足惜儡蔓,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,156評(píng)論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望疼邀。 院中可真熱鬧喂江,春花似錦、人聲如沸旁振。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至吉嚣,卻和暖如春梢薪,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背尝哆。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評(píng)論 1 267
  • 我被黑心中介騙來泰國打工秉撇, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人较解。 一個(gè)月前我還...
    沈念sama閱讀 46,641評(píng)論 2 362
  • 正文 我出身青樓畜疾,卻偏偏與公主長得像赴邻,于是被迫代替她去往敵國和親印衔。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,728評(píng)論 2 351

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