Core Animation
Core Animation其實(shí)是一個令人誤解的命名。你可能認(rèn)為它只是用來做動畫的,但實(shí)際上它是從一個叫做Layer Kit這么一個不怎么和動畫有關(guān)的名字演變而來,所以做動畫這只是Core Animation特性的冰山一角。
CALayer 有一個屬性叫做contents,這個屬性的類型被定義為id,意味著它可以是任何類型的對象。在這種情況下,你可以給contents屬性賦任何值,你的app仍然能夠編譯通過。但是,在實(shí)踐中,如果你給contents賦的不是CGImage,那么你得到的圖層將是空白的。
contents這個奇怪的表現(xiàn)是由Mac OS的歷史原因造成的。它之所以被定義為id類型,是因為在Mac OS系統(tǒng)上,這個屬性對CGImage和NSImage類型的值都起作用,而如果你試圖在iOS平臺上將UIImage的值賦給它,只能得到一個空白的圖層。
在iOS上,一個圖層的position位于父圖層的左上角,由于錨點(diǎn)(anchorpoint默認(rèn)為(0.5,0.5))但是在Mac OS上,通常是位于左下角。Core Animation可以通過geometryFlipped屬性來適配這兩種情況,它決定了一個圖層的坐標(biāo)是否相對于父圖層垂直翻轉(zhuǎn),是一個BOOL類型。在iOS上通過設(shè)置它為YES意味著它的子圖層將會被垂直翻轉(zhuǎn),因此有時候會出現(xiàn)圖像倒置的原因。
和UIView嚴(yán)格的二維坐標(biāo)系不同,CALayer存在于一個三維空間當(dāng)中。
CATransform3D 3D變化,以及改變圖層的顯示順序。
顯示形態(tài)
- 隱式動畫
- 顯示動畫
- 過渡
iOS 5 帶來 CoreImage后,可以通過 CATransition 的 filter屬性,CIFilter 創(chuàng)建過渡動畫。
(自定義過渡效果:過渡動畫的基礎(chǔ)原則就是對原始圖層的外觀截圖,然后添加一段動畫后平滑的過渡到圖層改變之后的效果。 CALayer 的 -renderInContext: 把它繪制到當(dāng)前上下文中捕獲的內(nèi)容圖片,然后在另外的視圖中顯示出來,將截圖放置在原始視圖之上)
動畫類別
- Layer動畫
- UIView控件
- UIViewConroller轉(zhuǎn)場動畫 Secret制造商最近發(fā)布了一個新App叫做Ping,用戶可以收到他們感興趣內(nèi)容的消息,主屏幕和菜單之間的動畫 ping
- icon間的過渡動畫 icon 過渡
Link "Animation"
Core Animation 維護(hù)了兩個平行 layer 層次結(jié)構(gòu): model layer tree(模型層樹) 和 presentation layer tree(表示層樹)。前者中的 layers 反映了我們能直接看到的 layers 的狀態(tài),而后者的 layers 則是動畫正在表現(xiàn)的值的近似。雖然你可能不會去直接設(shè)置 presentation layer 的屬性,但是使用它的當(dāng)前值來創(chuàng)建新的動畫或者在動畫發(fā)生時與 layers 交互是非常有用的。
通過使用 -[CALayer presentationLayer] 和 -[CALayer modelLayer],你可以在兩個 layer 之間輕松切換。
基本動畫
x(t) = x0 + t△x; 線性插值的方法來實(shí)現(xiàn)的
CABasicAnimation 路徑的實(shí)現(xiàn)存在 完整路徑
多步動畫
CAKeyframeAnimation
關(guān)鍵幀(keyframe)使我們能夠定義動畫中任意的一個點(diǎn),然后讓 Core Animation 填充所謂的中間幀。
CATranstion(事務(wù)) 整個圖層內(nèi)容過渡的效果。
begin -> commit
沿路徑的動畫
復(fù)雜的路徑實(shí)現(xiàn),需要在關(guān)鍵幀values中存儲大量的CGPoint。 而更加便利的path屬性,
例如 CGPathCreateWithEllipseInRect(),我們創(chuàng)建一個圓形的 CGPath 作為我們的關(guān)鍵幀動畫的 path。
模擬物理現(xiàn)實(shí)的動畫
easing 函數(shù)是 linear。它在整個動畫上維持一個恒定的速度。在 Core Animation 中,這個功能由 CAMediaTimingFunction 類表示。
在一定限度內(nèi),你也可以使用 +functionWithControlPoints:::: 創(chuàng)建自己的 easing 函數(shù)。通過傳遞 cubic Bézier 曲線的兩個控制點(diǎn)的 x 和 y 坐標(biāo),你可以輕松的創(chuàng)建自定義 easing 函數(shù)。
時間軸和插值函數(shù)的輸入值,其鎖定在【0,1】,不能達(dá)到物理效果, git :<RBBAnimation> .
IOS 7 UIKit Dynamics 物理模擬框架, Pop , Core Animation
動畫類的時間函數(shù):
CADisplayLink
NSTimer
dispatch_queue-t _time
Quartz Core FrameWork
UIBezierPath + CADisplayLink
UIViewAnimationWithBlocks
POP
基本的靜態(tài)動畫,Pop還支持spring和decay動畫,有助于打造一個逼真的,基于物理的交互.key可以用來查詢現(xiàn)有的動畫。Pop接口作為一個NSObject上附加類別執(zhí)行。任何NSObject或者子類可以被動畫。
Pop有四個具體的動畫類型:spring, decay, basic和custom;
通過處理CADisplayLink和相關(guān)的time-step管理,POPCustomAnimation使創(chuàng)建自定義動畫和過渡變得更加容易。
最理想的動畫應(yīng)該是專門負(fù)責(zé)交互的設(shè)計師使用Quartz Composer或者AE之類的設(shè)計工具。
View層次的動畫,到 Layer 層次的動畫。動畫無非就是layer層的再次渲染。Pop 就不一樣了。如果說 Canvas 是對 Core Animation 的封裝,Pop 則是對 Core Animation(以及 UIDynamics)的再實(shí)現(xiàn)。模擬現(xiàn)實(shí)世界的物理交互是很麻煩的,動畫的本質(zhì)是根據(jù)時間函數(shù)來做插值。 不僅限制在Core Animation 的屬性中,Pop則可以自定義屬性來實(shí)現(xiàn)。好消息是 現(xiàn)在iOS9中添加了公開的 CASpringAnimation ,大家可以使用 彈性動畫。
彈性動畫:
“如何用阻尼振動函數(shù)創(chuàng)建出60個關(guān)鍵幀”,從而實(shí)現(xiàn)CALayer產(chǎn)生類似[UIView animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion] 的彈性動畫。
pop 動畫的流暢性,在于 Engine 的POPAnimator ,POP 是通過CADisplayLink 60 FPS 的特性進(jìn)行設(shè)計。
NSTimer 用于我們定義任務(wù)的執(zhí)行周期、資料的更新周期,他的執(zhí)行受到 CPU 的阻塞影響,而 CADisplayLink 則用于定義畫面的重繪、動畫的演變,他的執(zhí)行基于 frames 的間隔。
通過 CADisplayLink,Apple 允許你將 App 的重繪速度設(shè)定到和屏幕刷新頻率一致,由此你可以獲得非常流暢的交互動畫。
Decay Animation 就是 POP 提供的另外一個非常特別的動畫,他實(shí)現(xiàn)了一個衰減的效果。這個動畫有一個重要的參數(shù) velocity(速率),一般并不用于物體的自發(fā)動畫,而是與用戶的交互共生。這個和 iOS7 引入的 UIDynamic 非常相似,如果你想實(shí)現(xiàn)一些物理效果,這個也是非常不錯的選擇。
deceleration (負(fù)加速度) 是一個你會很少用到的值,默認(rèn)是就是我們地球的 0.998,如果你開發(fā)給火星人用,那么這個值你使用 0.376 會更合適。
原理:
Facebook Pop其實(shí)是基于CADisplayLink(Mac平臺上使用的CVDisplayLink)實(shí)現(xiàn)的獨(dú)立于Core Animation之外的動畫方案。
CAMediaTimingFunction 離散的進(jìn)行插值計算。
App 動效
好看的外觀還要有流暢的體驗:慣性,重力,均勻變速,碎片化運(yùn)動;
內(nèi)在美(優(yōu)化交互和提升體驗的作用)
(1)引導(dǎo)
- 動態(tài)聚焦
- 示意過渡
- 空間轉(zhuǎn)場 (為了避免兩個頁面之間的跳轉(zhuǎn)過于生硬,利用動效填補(bǔ)上了頁面跳轉(zhuǎn)的中間過程,使得體驗更加流暢和自然。)
(2)簡化
隱藏二級菜單,按鈕的動效化;
(3)反饋
抖動是增強(qiáng)反饋的方法之一,用動效反饋替代圖形文字的靜態(tài)提示,更加自然和引人注目;
相關(guān)
UIKit Dynamics 喵神
ShapeLayer
核心動畫高級技巧
合集
從Core Animation到Facebook‘s Pop
POP動畫實(shí)例
CALayer