iOS動畫之CAKeyframeAnimation

我們首先來看看Core Animation類的繼承關(guān)系圖

687474703a2f2f696d672e6d792e6373646e2e6e65742f75706c6f6164732f3230313530372f32332f313433373631373536325f333139302e706e67.png

下面通過蘋果官方的API來介紹CAKeyframeAnimation

CAKeyframeAnimation
An object that provides keyframe animation capabilities for a layer object.
//為圖層對象提供關(guān)鍵幀動畫功能的對象。

Overview
You create a CAKeyframeAnimation object using the inherited animationWithKeyPath: method, specifying the key path of the property that you want to animate on the layer. You can then specify the keyframe values to use to control the timing and animation behavior.
//使用繼承的animationWithKeyPath:方法創(chuàng)建CAKeyframeAnimation對象绪商,指定要在圖層上進行動畫處理的屬性的鍵路徑苛谷。 然后,您可以指定要用于控制時序和動畫行為的關(guān)鍵幀值格郁。
For most types of animations, you specify the keyframe values using the values and keyTimes properties. During the animation, Core Animation generates intermediate values by interpolating between the values you provide. When animating a value that is a coordinate point, such as the layer’s position, you can specify a path for that point to follow instead of individual values. The pacing of the animation is controlled by the timing information you provide.
//對于大多數(shù)類型的動畫腹殿,您可以使用values和keyTimes屬性指定關(guān)鍵幀值独悴。 在動畫期間,Core Animation通過在您提供的值之間插值來生成中間值锣尉。 當(dāng)作為坐標(biāo)點的值(例如圖層的位置)進行動畫處理時刻炒,可以指定該點的路徑而不是單個值。 動畫的步調(diào)由您提供的時間信息控制自沧。


Providing keyframe values:

values(指定要用于動畫的關(guān)鍵幀值的對象數(shù)組落蝙。)
An array of objects that specify the keyframe values to use for the animation.
path(基于點的屬性的路徑)
The path for a point-based property to follow.


Keyframe timing:

keyTimes(NSNumber對象的可選數(shù)組,用于定義應(yīng)用給定關(guān)鍵幀段的時間)
An optional array of NSNumber objects that define the time at which to apply a given keyframe segment.
timingFunctions(CAMediaTimingFunction對象的可選數(shù)組暂幼,用于定義每個關(guān)鍵幀段的步調(diào)。)
An optional array of CAMediaTimingFunction objects that define the pacing for each keyframe segment.
calculationMode(指定接收器如何計算中間關(guān)鍵幀值移迫。)
Specifies how intermediate keyframe values are calculated by the receiver.


Rotation Mode Attribute:

rotationMode(確定沿路徑動畫的對象是否旋轉(zhuǎn)以匹配路徑切線旺嬉。)
Determines whether objects animating along the path rotate to match the path tangent.


Cubic Mode Attributes:

tensionValues(定義曲線緊密度的NSNumber對象數(shù)組)
An array of NSNumber objects that define the tightness of the curve.
continuityValues(NSNumber對象的數(shù)組,定義了時序曲線拐角的銳度)
An array of NSNumber objects that define the sharpness of the timing curve’s corners.
biasValues(一個NSNumber對象數(shù)組厨埋,用于定義曲線相對于控制點的位置)
An array of NSNumber objects that define the position of the curve relative to a control point.


Constants:

Rotation Mode Values(這些常量由rotationMode屬性使用邪媳。)
These constants are used by the rotationMode property.
Value calculation modes(這些常量由calculateMode屬性使用)
These constants are used by the calculationMode property.

CAKeyframeAnimation

  • CAKeyframeAnimation和CABaseAnimation都屬于CAPropertyAnimatin的子類,CABaseAnimation只能從一個數(shù)值(fromValue)變換成另一個數(shù)值(toValue),而CAKeyframeAnimation則會使用一個NSArray保存一組關(guān)鍵幀.
重要屬性
  • values : 一個NSArray對象。里面的元素稱為”關(guān)鍵幀”(keyframe),動畫對象會在指定的時間(duration)內(nèi)荡陷,依次顯示values數(shù)組中的每一個關(guān)鍵幀
  • path : (畫圓雨效、橢圓、貝塞兒曲線)可以設(shè)置一個CGPathRef\CGMutablePathRef,讓層跟著路徑移動,path只對CALayer的anchorPoint和position起作用,如果你設(shè)置了path废赞,那么values將被忽略
  • keyTimes : 可以為對應(yīng)的關(guān)鍵幀指定對應(yīng)的時間點,其取值范圍為0到1.0,keyTimes中的每一個時間值都對應(yīng)values中的每一幀.當(dāng)keyTimes沒有設(shè)置的時候,各個關(guān)鍵幀的時間是平分的
  • timingFunctions: 控制動畫快進慢出徽龟、慢進快出等特性
  • rotationMode(確定沿路徑動畫的對象是否旋轉(zhuǎn)以匹配路徑切線)
  • tensionValues(定義曲線緊密度的NSNumber對象數(shù)組)
  • continuityValues(NSNumber對象的數(shù)組,定義了時序曲線拐角的銳度)
  • biasValues(一個NSNumber對象數(shù)組唉地,用于定義曲線相對于控制點的位置)
  • Rotation Mode Values(這些常量由rotationMode屬性使用据悔。)
  • Value calculation modes(這些常量由calculateMode屬性使用)

由API我們知道我們需要使用animationWithKeyPath:方法來創(chuàng)建一個CAKeyframeAnimation(關(guān)鍵幀)對象,指定要在圖層上進行動畫處理的屬性的鍵路徑,通過設(shè)置values和keyTimes屬性來指定關(guān)鍵幀值耘沼,例如:

//創(chuàng)建動畫并指定動畫鍵路徑
CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//通過values來設(shè)置關(guān)鍵幀值
NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-50)];
NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2-50)];
NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2+50)];
NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2+50)];
NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2-50)];
NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50)];
anima.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil];
anima.duration = 2.0f;
anima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];//設(shè)置動畫的節(jié)奏
anima.delegate = self;//設(shè)置代理极颓,可以檢測動畫的開始和結(jié)束
[_demoView.layer addAnimation:anima forKey:@"keyFrameAnimation"];


使用path

CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//這個方法根據(jù)傳入的rect矩形參數(shù)繪制一個內(nèi)切曲線。
//當(dāng)傳入的rect是一個正方形時群嗤,繪制的圖像是一個內(nèi)切圓菠隆;
//當(dāng)傳入的rect是一個長方形時,繪制的圖像是一個內(nèi)切橢圓狂秘。
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(SCREEN_WIDTH/2-100, SCREEN_HEIGHT/2-100, 200, 200)];
anima.path = path.CGPath;
anima.duration = 2.0f;
[_demoView.layer addAnimation:anima forKey:@"pathAnimation"];


你可以指定一個values數(shù)組來指定動畫的執(zhí)行過程(路徑)骇径,也可以通過設(shè)置path來指定動畫的執(zhí)行過程(路徑)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市赃绊,隨后出現(xiàn)的幾起案子既峡,更是在濱河造成了極大的恐慌,老刑警劉巖碧查,帶你破解...
    沈念sama閱讀 223,207評論 6 521
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件运敢,死亡現(xiàn)場離奇詭異校仑,居然都是意外死亡,警方通過查閱死者的電腦和手機传惠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,455評論 3 400
  • 文/潘曉璐 我一進店門迄沫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人卦方,你說我怎么就攤上這事羊瘩。” “怎么了盼砍?”我有些...
    開封第一講書人閱讀 170,031評論 0 366
  • 文/不壞的土叔 我叫張陵尘吗,是天一觀的道長。 經(jīng)常有香客問我浇坐,道長睬捶,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,334評論 1 300
  • 正文 為了忘掉前任近刘,我火速辦了婚禮擒贸,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘觉渴。我一直安慰自己介劫,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,322評論 6 398
  • 文/花漫 我一把揭開白布案淋。 她就那樣靜靜地躺著座韵,像睡著了一般。 火紅的嫁衣襯著肌膚如雪哎迄。 梳的紋絲不亂的頭發(fā)上回右,一...
    開封第一講書人閱讀 52,895評論 1 314
  • 那天,我揣著相機與錄音漱挚,去河邊找鬼翔烁。 笑死,一個胖子當(dāng)著我的面吹牛旨涝,可吹牛的內(nèi)容都是我干的蹬屹。 我是一名探鬼主播,決...
    沈念sama閱讀 41,300評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼白华,長吁一口氣:“原來是場噩夢啊……” “哼慨默!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起弧腥,我...
    開封第一講書人閱讀 40,264評論 0 277
  • 序言:老撾萬榮一對情侶失蹤厦取,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后管搪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體虾攻,經(jīng)...
    沈念sama閱讀 46,784評論 1 321
  • 正文 獨居荒郊野嶺守林人離奇死亡铡买,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,870評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了霎箍。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片奇钞。...
    茶點故事閱讀 40,989評論 1 354
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖漂坏,靈堂內(nèi)的尸體忽然破棺而出景埃,到底是詐尸還是另有隱情,我是刑警寧澤顶别,帶...
    沈念sama閱讀 36,649評論 5 351
  • 正文 年R本政府宣布谷徙,位于F島的核電站,受9級特大地震影響驯绎,放射性物質(zhì)發(fā)生泄漏蒂胞。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,331評論 3 336
  • 文/蒙蒙 一条篷、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蛤织,春花似錦赴叹、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,814評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至摊鸡,卻和暖如春绽媒,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背免猾。 一陣腳步聲響...
    開封第一講書人閱讀 33,940評論 1 275
  • 我被黑心中介騙來泰國打工是辕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人猎提。 一個月前我還...
    沈念sama閱讀 49,452評論 3 379
  • 正文 我出身青樓获三,卻偏偏與公主長得像,于是被迫代替她去往敵國和親锨苏。 傳聞我的和親對象是個殘疾皇子疙教,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,995評論 2 361

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

  • 在iOS中隨處都可以看到絢麗的動畫效果跺嗽,實現(xiàn)這些動畫的過程并不復(fù)雜权谁,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,517評論 6 30
  • 在iOS實際開發(fā)中常用的動畫無非是以下四種:UIView動畫叛溢,核心動畫葵诈,幀動畫裸弦,自定義轉(zhuǎn)場動畫祟同。 1.UIView...
    請叫我周小帥閱讀 3,117評論 1 23
  • 先看看CAAnimation動畫的繼承結(jié)構(gòu) CAAnimation{ CAPropertyAnimation { ...
    時間不會倒著走閱讀 1,658評論 0 1
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復(fù)雜烁兰,今天將帶大家一窺iOS動畫全貌耐亏。在這里你可以看...
    F麥子閱讀 5,119評論 5 13
  • 已經(jīng)記不清楚這是第幾次爭吵,日子過得平淡連爭吵也是沪斟,除了妒忌無非是前緣未了的私事广辰,這次爭吵早已預(yù)料到,從看到...
    丫丫丫吖吖閱讀 338評論 0 0