基于屬性的動畫是指在動畫執(zhí)行過程中隨時間改變的是layer層的一些單一屬性仑鸥,比如position典挑、background color以及bounds等。本文主要闡述的是核心動畫的抽象屬性動畫以及為layer屬性所提供的基本的以及關(guān)鍵幀動畫。
Property-Based Abstraction
CAPropertyAnimation是CAAnimation的一個為layer的某個屬性提供特定動畫的一個子類曙寡。基于屬性的動畫支持那些能夠被數(shù)學(xué)插入屬性值的一些熟悉的動畫效果寇荧,包括:
- 整數(shù)和小數(shù)
- CGRect, CGPoint, CGSize和CGAffineTransform結(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)*曹体。
配置基礎(chǔ)動畫的插入值
通過CABasicAnimation的fromValue俗扇、* byValue、toValue屬性來確定被插入的值箕别。雖然都是可選項铜幽,但是至少有兩個值應(yīng)該是非空的滞谢,也就是(non-nil*)的。
這幾個屬性的使用方法通常有以下幾種:
- fromValue以及toValue都是非空的除抛,那么插入的值就是介于這兩者之間的狮杨。
- fromValue以及byValue是非空的,那么插入的值就是介于fromValue以及(fromValue+byValue)之間的到忽。
- byValue和toValue是非空的橄教,那么插入的值就介于(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)鍵幀動畫
關(guān)鍵幀動畫的值
關(guān)鍵幀動畫通常是以以下兩種方式來使用:通過path(Core 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)鍵路徑為layer的content屬性逢慌,將會使layer按照給定的圖片執(zhí)行動畫悠轩。
- 一組CGRects對象并且設(shè)置動畫關(guān)鍵路徑為layer的frame屬性,會使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.0和1.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);