基于屬性的動畫

基于屬性的動畫是指在動畫執(zhí)行過程中隨時間改變的是layer層的一些單一屬性仑鸥,比如position典挑、background color以及bounds等。本文主要闡述的是核心動畫的抽象屬性動畫以及為layer屬性所提供的基本的以及關(guān)鍵幀動畫。

Property-Based Abstraction

CAPropertyAnimationCAAnimation的一個為layer的某個屬性提供特定動畫的一個子類曙寡。基于屬性的動畫支持那些能夠被數(shù)學(xué)插入屬性值的一些熟悉的動畫效果寇荧,包括:

  • 整數(shù)和小數(shù)
  • CGRect, CGPoint, CGSizeCGAffineTransform結(jié)構(gòu)體
  • CATransform3D結(jié)構(gòu)體
  • CGColor以及CGImage

像所有的動畫一樣举庶,屬性動畫必須要是某一個特定layer的動畫。這個需要被執(zhí)行動畫的layer屬性是通過key-value鍵值對的方式來訪問揩抡。例如户侥,需要對一個layer的x坐標(biāo)執(zhí)行動畫,需要通過key path“position.x”來定義一個動畫峦嗤,并且將這個動畫賦值給這個layer蕊唐。
你不需要直接創(chuàng)建一個CAPropertyAnimation對象實例,而是需要創(chuàng)建一個CABasicAnimation或者CAKeyframeAnimation的實例對象烁设。

Basic Animations

CABasicAnimation動畫類為layer屬性提供了基本的替梨、單關(guān)鍵幀動畫,可以構(gòu)建一個CABasicAnimation實例對象装黑,并通過* animationWithKeyPath:方法來定義layer所需要執(zhí)行動畫的屬性副瀑。
圖1表示的是layer的position屬性從
(74.0,74.0)(566.0,406.0),并且父層的bounds屬性為 (0.0,0.0,640.0,480.0)*曹体。

3second.png

配置基礎(chǔ)動畫的插入值

通過CABasicAnimationfromValue俗扇、* byValuetoValue屬性來確定被插入的值箕别。雖然都是可選項铜幽,但是至少有兩個值應(yīng)該是非空的滞谢,也就是(non-nil*)的。

這幾個屬性的使用方法通常有以下幾種:

  • fromValue以及toValue都是非空的除抛,那么插入的值就是介于這兩者之間的狮杨。
  • fromValue以及byValue是非空的,那么插入的值就是介于fromValue以及(fromValue+byValue)之間的到忽。
  • byValuetoValue是非空的橄教,那么插入的值就介于(toValue-byValue)以及toValue之間的。
  • fromValue是非空的喘漏,那么插入的值就介于fromValue和當(dāng)前值的中間护蝶。
  • toValue是非空的,那么插入的值就在keyPath的當(dāng)前值和toValue之間
  • byValue非空翩迈,隨時間變化的值在keyPath對應(yīng)的當(dāng)前值以及該值加上byValue之后的值中間
  • 所有的屬性都nil

基礎(chǔ)動畫的例子

該段代碼能夠?qū)崿F(xiàn)和圖1一樣的效果

CABasicAnimation *theAnimation;
 
// create the animation object, specifying the position property as the key path
// the key path is relative to the target animation object (in this case a CALayer)
theAnimation=[CABasicAnimation animationWithKeyPath:@"position"];
 
// set the fromValue and toValue to the appropriate points
theAnimation.fromValue=[NSValue valueWithPoint:NSMakePoint(74.0,74.0)];
theAnimation.toValue=[NSValue valueWithPoint:NSMakePoint(566.0,406.0)];
 
// set the duration to 3.0 seconds
theAnimation.duration=3.0;
 
// set a custom timing function
theAnimation.timingFunction=[CAMediaTimingFunction functionWithControlPoints:0.25f :0.1f :0.25f :1.0f];

關(guān)鍵幀動畫——Keyframe Animations

CAKeyframeAnimation與基礎(chǔ)動畫相似持灰,支持關(guān)鍵幀動畫。但是负饲,它是可以為執(zhí)行動畫的目標(biāo)對象的某個屬性設(shè)置一組數(shù)值來表述該屬性值隨動畫進行的變化堤魁。

圖2 表述了一個layer的position屬性的使用CGPathRef的5秒鐘的關(guān)鍵幀動畫

5second.png

關(guān)鍵幀動畫的值

關(guān)鍵幀動畫通常是以以下兩種方式來使用:通過pathCore Graphics path)屬性或者是一組Values屬性

Core Graphics通常用來執(zhí)行layer層的anchorPoint或者position動畫,也就是說返十,執(zhí)行的是CGPoints屬性動畫妥泉。路徑中的每一個點都定義了確定關(guān)鍵幀動畫的一部分以及插入的點(除了moveto點),但是如果擁有了一個確定的path路徑的話洞坑,那么這個values屬性值就會被忽略盲链。
默認情況下,layer會按照設(shè)定的旋轉(zhuǎn)方式進行旋轉(zhuǎn)執(zhí)行检诗,設(shè)定旋轉(zhuǎn)方式rotationMode為* kCAAnimationRotateAuto或者 kCAAnimationRotateAutoReverse會使layer依照路徑軌跡進行旋轉(zhuǎn)匈仗。
提供一系列的
values*屬性值供layer的不同類型屬性執(zhí)行動畫。例如:

  • 一組CGImage對象并且設(shè)置動畫的關(guān)鍵路徑為layercontent屬性逢慌,將會使layer按照給定的圖片執(zhí)行動畫悠轩。
  • 一組CGRects對象并且設(shè)置動畫關(guān)鍵路徑為layerframe屬性,會使layer的內(nèi)容在給定的矩形范圍內(nèi)重復(fù)執(zhí)行攻泼。
  • 一組CATransform3D矩陣火架,并且設(shè)定動畫關(guān)鍵路徑為transform屬性。

Keyframe Timing and Pacing Extensions

關(guān)鍵幀動畫要比基本動畫擁有更加復(fù)雜的時間以及執(zhí)行節(jié)奏模型忙菠。
忽略繼承的timingFunction屬性何鸡,可以傳一組數(shù)值給CAMediaTimingFunction。每個時間函數(shù)都描述了關(guān)鍵幀隨動畫執(zhí)行的變化牛欢。
雖然CAKeyframeAnimation擁有duration屬性骡男,但是可以通過keyTimes屬性來細微的調(diào)整動畫的執(zhí)行時機。
keyTimes屬性定義了動畫執(zhí)行范圍內(nèi)關(guān)鍵幀的一系列NSNumber對象傍睹。每個值都是介于0.0~1.0之間的隔盛。所有keyTimes元素定義了關(guān)鍵幀的值在整個動畫持續(xù)時間內(nèi)百分比犹菱。每一個元素都不能比之前的元素小。
keyTimes的值基于calculationMode屬性的值:

  • 如果calculationMode設(shè)置為kCAAnimationLinear吮炕,那么第一個和最后一個元素必須分別為0.01.0腊脱。
  • 如果calculationMode設(shè)置為kCAAnimationDiscrete,那么第一個元素必須是0.0
  • 如果calculationMode設(shè)置為kCAAnimationPaced龙亲,那么keyTimes屬性的值就沒有作用了陕凹。

關(guān)鍵幀動畫例子

下面的這段代碼會形成和圖2一樣的動畫效果。

// create a CGPath that implements two arcs (a bounce)
CGMutablePathRef thePath = CGPathCreateMutable();
CGPathMoveToPoint(thePath,NULL,74.0,74.0);
CGPathAddCurveToPoint(thePath,NULL,74.0,500.0,
                                   320.0,500.0,
                                   320.0,74.0);
CGPathAddCurveToPoint(thePath,NULL,320.0,500.0,
                                   566.0,500.0,
                                   566.0,74.0);
 
CAKeyframeAnimation * theAnimation;
 
// create the animation object, specifying the position property as the key path
// the key path is relative to the target animation object (in this case a CALayer)
theAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
theAnimation.path=thePath;
 
// set the duration to 5.0 seconds
theAnimation.duration=5.0;
 
 
// release the path
CFRelease(thePath);
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末鳄炉,一起剝皮案震驚了整個濱河市杜耙,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌拂盯,老刑警劉巖泥技,帶你破解...
    沈念sama閱讀 212,332評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異磕仅,居然都是意外死亡,警方通過查閱死者的電腦和手機簸呈,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,508評論 3 385
  • 文/潘曉璐 我一進店門榕订,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蜕便,你說我怎么就攤上這事劫恒。” “怎么了轿腺?”我有些...
    開封第一講書人閱讀 157,812評論 0 348
  • 文/不壞的土叔 我叫張陵两嘴,是天一觀的道長。 經(jīng)常有香客問我族壳,道長憔辫,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,607評論 1 284
  • 正文 為了忘掉前任仿荆,我火速辦了婚禮枫耳,結(jié)果婚禮上扔枫,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好痒给,可當(dāng)我...
    茶點故事閱讀 65,728評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著挣菲,像睡著了一般贮喧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上舔庶,一...
    開封第一講書人閱讀 49,919評論 1 290
  • 那天抛蚁,我揣著相機與錄音陈醒,去河邊找鬼。 笑死篮绿,一個胖子當(dāng)著我的面吹牛孵延,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播亲配,決...
    沈念sama閱讀 39,071評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼尘应,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了吼虎?” 一聲冷哼從身側(cè)響起犬钢,我...
    開封第一講書人閱讀 37,802評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎思灰,沒想到半個月后玷犹,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,256評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡洒疚,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,576評論 2 327
  • 正文 我和宋清朗相戀三年歹颓,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片油湖。...
    茶點故事閱讀 38,712評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡巍扛,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出乏德,到底是詐尸還是另有隱情撤奸,我是刑警寧澤,帶...
    沈念sama閱讀 34,389評論 4 332
  • 正文 年R本政府宣布喊括,位于F島的核電站胧瓜,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏郑什。R本人自食惡果不足惜府喳,卻給世界環(huán)境...
    茶點故事閱讀 40,032評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蹦误。 院中可真熱鬧劫拢,春花似錦、人聲如沸强胰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽偶洋。三九已至熟吏,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背牵寺。 一陣腳步聲響...
    開封第一講書人閱讀 32,026評論 1 266
  • 我被黑心中介騙來泰國打工悍引, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人帽氓。 一個月前我還...
    沈念sama閱讀 46,473評論 2 360
  • 正文 我出身青樓趣斤,卻偏偏與公主長得像,于是被迫代替她去往敵國和親黎休。 傳聞我的和親對象是個殘疾皇子浓领,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,606評論 2 350

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

  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復(fù)雜势腮,今天將帶大家一窺ios動畫全貌联贩。在這里你可以看...
    每天刷兩次牙閱讀 8,471評論 6 30
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復(fù)雜捎拯,今天將帶大家一窺iOS動畫全貌泪幌。在這里你可以看...
    F麥子閱讀 5,104評論 5 13
  • 1. 簡介 Core Animation 中文翻譯為核心動畫,它是一組非常強大的動畫處理API署照,使用它能做出非常炫...
    lltree閱讀 637評論 2 6
  • 在iOS實際開發(fā)中常用的動畫無非是以下四種:UIView動畫祸泪,核心動畫,幀動畫建芙,自定義轉(zhuǎn)場動畫浴滴。 1.UIView...
    請叫我周小帥閱讀 3,082評論 1 23
  • 本文轉(zhuǎn)載自:http://www.cocoachina.com/ios/20150105/10812.html 為...
    idiot_lin閱讀 1,250評論 0 1