ios 動畫基礎(chǔ)(一)

每個UIView都有關(guān)聯(lián)的CALayer對象,被稱之為rootLayer宋光。

隱式動畫

隱式動畫指我們沒有指定任何動畫類型迫淹,只是改變了layer的屬性,有框架自動完成動畫效果铺浇,默認持續(xù)時間是0.25s痢畜;但是只有非rootLayer(自己創(chuàng)建的)才有隱式動畫,具體原因如下:

我們把改變屬性時CALayer自動應(yīng)用的動畫稱作action鳍侣,當CALayer的屬性被修改時候裁着,它會調(diào)用actionForKey:方法,傳遞屬性的名稱拱她。具體見如下步驟:

  • 圖層首先檢測它是否有委托,并且是否實現(xiàn)CALayerDelegate協(xié)議指定的actionForLayer:forKey方法扔罪。如果有秉沼,直接調(diào)用并返回結(jié)果。
  • 如果沒有委托矿酵,或者委托沒有實現(xiàn)-actionForLayer:forKey方法唬复,圖層接著檢查包含屬性名稱對應(yīng)行為映射的actions字典。
  • 如果actions字典沒有包含對應(yīng)的屬性全肮,那么圖層接著在它的style字典接著搜索屬性名敞咧。
  • 最后,如果在style里面也找不到對應(yīng)的行為辜腺,那么圖層將會直接調(diào)用定義了每個屬性的標準行為的-defaultActionForKey:方法休建。
    在一輪完整的搜索結(jié)束之后,-actionForKey:要么返回空(這種情況下將不會有動畫發(fā)生)评疗,要么返回CAAction協(xié)議的對象测砂,最后CALayer拿這個結(jié)果去做動畫。

每個UIView對它關(guān)聯(lián)的圖層都扮演了一個委托百匆,并且提供了-actionForLayer:forKey的實現(xiàn)方法砌些。當不在一個動畫塊的實現(xiàn)中,UIView對所有圖層行為返回nil加匈,但是在動畫block范圍之內(nèi)存璃,它就返回了一個非空值。

 NSLog(@"Outside: %@", [self.view actionForLayer:self.view.layer forKey:@"backgroundColor"]);
 //begin animation block
 [UIView beginAnimations:nil context:nil];
 //test layer action when inside of animation block
 NSLog(@"Inside: %@", [self.view actionForLayer:self.view.layer forKey:@"backgroundColor"]);
 //end animation block
 [UIView commitAnimations];

打印結(jié)果如下
Outside: <null>
Inside: <CABasicAnimation: 0x7ff3e9d28f40>

具體可見官方文檔
objc中View-Layer 協(xié)作也有說明

  1. Layer可動畫屬性 雕拼,如
  • bounds:用于設(shè)置CALayer的寬度和高度纵东,修改這個屬性會產(chǎn)生縮放動畫;
  • backgroundColor:用于設(shè)置CALayer的背景色啥寇,修改這個屬性會產(chǎn)生背景色的漸變動畫篮迎;
  • position:用于設(shè)置CALayer的位置男图,修改這個屬性會產(chǎn)生平移動畫等等,可以在CALayer的頭文件中看到
  1. 利用CATransaction來改變默認的隱式動畫
    CATransaction說明
    [CATransaction begin];
    [CATransaction setAnimationDuration:1.0];
    self.colorLayer.backgroundColor = [[UIColor yellowColor] CGColor];
    [CATransaction commit];

顯式動畫

  1. 屬性動畫:作用于圖層的某個單一屬性甜橱,并指定了它的一個目標值逊笆,或者一連串將要做動畫的值。
  2. 動畫組:將多個屬性動畫組合到一起岂傲。
  3. 動畫過渡:不像屬性動畫那樣平滑地在兩個值之間做動畫难裆,而是影響到整個圖層的變化;過渡動畫首先展示之前的圖層樣子镊掖,然后過渡到新的樣子乃戈。


    core animation結(jié)構(gòu)

    先來介紹屬性動畫下基礎(chǔ)動畫

CABasicAnimation

1.先看一個實現(xiàn)平移動畫的??

    CALayer *layer = [[CALayer alloc]init];
    layer.backgroundColor = [[UIColor grayColor]CGColor];
    layer.frame = CGRectMake(40, 20, 40, 40);
    layer.cornerRadius = 5;
    [self.view.layer addSublayer:layer];
    //平移動畫
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
    animation.duration = 3.0;
    animation.autoreverses = YES;
    animation.repeatCount = HUGE_VALF;
    animation.fromValue = [NSValue valueWithCGPoint:layer.position];
    CGPoint toPoint = layer.position;
    toPoint.x = toPoint.x+180;
    animation.toValue = [NSValue valueWithCGPoint:toPoint];
    [layer addAnimation:animation forKey:@"move"];

先是新建了一個layer,然后利用keyPath創(chuàng)建了一個動畫亩进,通過設(shè)置屬性定義動畫效果症虑,最后將動畫添加到layer上。
keyPath的值归薛,這邊列出比較常用谍憔,還有一些和上面敘述的layer的屬性類似

keyPath的值 說明
position 位置變化,引起平移動畫
transform.scale 比例變化主籍,放大縮小
transform.scale.x 寬度縮放
transform.scale.y 高度縮放
transform.rotation 旋轉(zhuǎn)
transform.rotation.x 沿x軸旋轉(zhuǎn)
transform.rotation.y 沿y軸旋轉(zhuǎn)
transform.rotation.z 沿z軸旋轉(zhuǎn)
opacity 透明度
backgroundColor 背景顏色
cornerRadius 圓角

animation的屬性

屬性 說明
fromValue 動畫改變的屬性初始值
toValue 動畫改變的屬性結(jié)束值
byValue 過程中屬性相對初始值改變的值
duration 動畫持續(xù)時長
repeatCount 動畫重復(fù)次數(shù)习贫,不停重復(fù)設(shè)置為 HUGE_VALF
repeatDuration 動畫應(yīng)該被重復(fù)多久,動畫會一直重復(fù)千元,直到設(shè)定的時間流逝完苫昌;它不應(yīng)該和 repeatCount 一起使用。
autoreverses 動畫結(jié)束時是否執(zhí)行逆動畫幸海,當你設(shè)定這個屬性為 YES 時祟身,在它到達目的地之后,動畫的返回到開始的值物独,代替了直接跳轉(zhuǎn)到 開始的值月而。
beginTime 指定動畫開始的時間。從開始延遲幾秒的話议纯,設(shè)置為【CACurrentMediaTime() + 秒數(shù)】 的方式
timingFunction 設(shè)置動畫的速度變化父款,這個略復(fù)雜,稍候介紹

2.如果要定義動畫開始之前或結(jié)束之后的狀態(tài)瞻凤,可以用fillMode憨攒;不過要注意要在CABasicAnimation 中fillMode啟作用,需要將removedOnCompletion設(shè)為NO阀参,具體見CABasicAnimation fillMode和removedOnCompletion

scaleAnimation.removedOnCompletion = NO;
scaleAnimation.fillMode = kCAFillModeForwards;

解釋:為什么動畫結(jié)束后返回原狀態(tài)肝集?
layer有兩個重要屬性modelLayer和presentationLayer(還有一個renderingLayer,是私有的)蛛壳;modelLayer表現(xiàn)了我們看到的layer狀態(tài)杏瞻,當改變layer的屬性值所刀,modelLayer的屬性值也即刻改變;presentationLayer則表現(xiàn)的是動畫過程中狀態(tài)值捞挥。
而當我們給一個layer添加動畫時浮创,動畫開始時 presentation layer在不斷變化,動畫結(jié)束時砌函,presentation layer從屏幕上移除斩披,原始layer顯示。如果沒有改變過modelLayer的值讹俊,那么在動畫結(jié)束之后就會返回到原狀態(tài)垦沉。

3.其他例子

    //旋轉(zhuǎn)動畫
    CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
    rotateAnimation.duration = 3.0;
    rotateAnimation.repeatCount = HUGE_VALF;
    rotateAnimation.autoreverses = YES;
    rotateAnimation.fromValue = [NSNumber numberWithFloat:0];
    rotateAnimation.toValue = [NSNumber numberWithFloat:6*M_PI];
    [rotateLayer addAnimation:rotateAnimation forKey:@"rotate"];
    //....
    //放大、縮小
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.x"];
    scaleAnimation.duration = 3.0;
    scaleAnimation.repeatCount = HUGE_VALF;
    scaleAnimation.autoreverses = YES;
    scaleAnimation.removedOnCompletion = NO;
    scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
    scaleAnimation.toValue = [NSNumber numberWithFloat:2.5];
    scaleAnimation.fillMode = kCAFillModeForwards;
    [scaleLayer addAnimation:scaleAnimation forKey:@"scale"];

參考資料

core animation官方文檔
淺談animation
CABasicAnimation使用總結(jié)
顯式動畫
隱式動畫
讓你的動畫動起來

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末仍劈,一起剝皮案震驚了整個濱河市厕倍,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌贩疙,老刑警劉巖讹弯,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異屋群,居然都是意外死亡,警方通過查閱死者的電腦和手機坏挠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進店門芍躏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人降狠,你說我怎么就攤上這事对竣。” “怎么了榜配?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵否纬,是天一觀的道長。 經(jīng)常有香客問我蛋褥,道長临燃,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任烙心,我火速辦了婚禮膜廊,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘淫茵。我一直安慰自己爪瓜,他們只是感情好,可當我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布成箫。 她就那樣靜靜地躺著维费,像睡著了一般。 火紅的嫁衣襯著肌膚如雪襟铭。 梳的紋絲不亂的頭發(fā)上薄货,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天翁都,我揣著相機與錄音,去河邊找鬼菲驴。 笑死荐吵,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的赊瞬。 我是一名探鬼主播先煎,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼巧涧!你這毒婦竟也來了薯蝎?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤谤绳,失蹤者是張志新(化名)和其女友劉穎占锯,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體缩筛,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡消略,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了瞎抛。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片艺演。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖桐臊,靈堂內(nèi)的尸體忽然破棺而出胎撤,到底是詐尸還是另有隱情,我是刑警寧澤断凶,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布伤提,位于F島的核電站,受9級特大地震影響认烁,放射性物質(zhì)發(fā)生泄漏肿男。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一却嗡、第九天 我趴在偏房一處隱蔽的房頂上張望次伶。 院中可真熱鬧,春花似錦稽穆、人聲如沸冠王。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽柱彻。三九已至豪娜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間哟楷,已是汗流浹背瘤载。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留卖擅,地道東北人鸣奔。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像惩阶,于是被迫代替她去往敵國和親挎狸。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,877評論 2 345

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

  • 在iOS中隨處都可以看到絢麗的動畫效果断楷,實現(xiàn)這些動畫的過程并不復(fù)雜锨匆,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,465評論 6 30
  • 在iOS中隨處都可以看到絢麗的動畫效果冬筒,實現(xiàn)這些動畫的過程并不復(fù)雜恐锣,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,094評論 5 13
  • 顯式動畫 顯式動畫舞痰,它能夠?qū)σ恍傩宰鲋付ǖ淖远x動畫土榴,或者創(chuàng)建非線性動畫,比如沿著任意一條曲線移動响牛。 屬性動畫 ...
    清風沐沐閱讀 1,921評論 1 5
  • 本文轉(zhuǎn)載自:http://www.cocoachina.com/ios/20150105/10812.html 為...
    idiot_lin閱讀 1,248評論 0 1
  • 前言 本文只要描述了iOS中的Core Animation(核心動畫:隱式動畫玷禽、顯示動畫)、貝塞爾曲線娃善、UIVie...
    GitHubPorter閱讀 3,600評論 7 11