中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

是什么樣的滑動(dòng)能讓人有‘哇哦’的效果呢？

滑動(dòng)是最完美地展示了通過(guò)觸摸屏直接操作的例子。滾動(dòng)視圖遵從于你的手指，當(dāng)你的手指離開(kāi)屏幕時(shí)，視圖會(huì)自然地繼續(xù)滑動(dòng)直到該停止的時(shí)候停止。它用自然的方式減速，甚至在快到界限的時(shí)候也能表現(xiàn)出細(xì)膩的彈力效果?；瑒?dòng)在任何時(shí)候都保持相應(yīng)，并且看上去非常真實(shí)。

動(dòng)畫(huà)的狀態(tài)

在 iOS 中的大部分動(dòng)畫(huà)仍然沒(méi)有按照最初 iPhone 指定的滑動(dòng)標(biāo)準(zhǔn)實(shí)現(xiàn)。這里有很多動(dòng)畫(huà)一旦它們運(yùn)行就不能交互（比如說(shuō)解鎖動(dòng)畫(huà)，主界面中打開(kāi)文件夾和關(guān)閉文件夾的動(dòng)畫(huà)，和導(dǎo)航欄切換的動(dòng)畫(huà)，還有很多）。

然而現(xiàn)在有一些應(yīng)用給我一種始終在控制動(dòng)畫(huà)的體驗(yàn)，我們可以直接操作那些我在用的動(dòng)畫(huà)。當(dāng)我們將這些應(yīng)用和其他的應(yīng)用相比較之后，我們就能感覺(jué)到明顯的區(qū)別。這些應(yīng)用中最優(yōu)秀的有最初的 Twitter iPad app， 和現(xiàn)在的 Facebook Paper。但目前，使用直接操作為主并且可以中斷動(dòng)畫(huà)的應(yīng)用仍然很少。這就給我們做出更好的應(yīng)用提供了機(jī)會(huì)，讓我們的應(yīng)用有更不同的，更高質(zhì)量的體驗(yàn)。

真實(shí)交互式動(dòng)畫(huà)的挑戰(zhàn)

當(dāng)我們用 UIView 或者 CAAnimation 來(lái)實(shí)現(xiàn)交互式動(dòng)畫(huà)時(shí)會(huì)有兩個(gè)大問(wèn)題: 這些動(dòng)畫(huà)會(huì)將你在屏幕上的內(nèi)容和 layer 上的實(shí)際的特定屬性分離開(kāi)來(lái)，并且他們直接操作這些特定屬性。

模型 (Model) 和顯示 (Presentation) 的分離

Core Animation 是通過(guò)分離 layer 的模型屬性和你在屏幕上看到的界面 (顯示層) 的方式來(lái)設(shè)計(jì)的，這就導(dǎo)致我們很難去創(chuàng)建一個(gè)可以在任何時(shí)候能交互的動(dòng)畫(huà)，因?yàn)樵趧?dòng)畫(huà)時(shí)，模型和界面已經(jīng)不能匹配了。這時(shí)，我們不得不通過(guò)手動(dòng)的方式來(lái)同步這兩個(gè)的狀態(tài)，來(lái)達(dá)到改變動(dòng)畫(huà)的效果：

1. view.layer.center?=?view.layer.presentationLayer.center;
2. [view.layer?removeAnimationForKey:@”animation”];
3. //?添加新動(dòng)畫(huà)

直接控制 vs 間接控制

CAAnimation 動(dòng)畫(huà)的更大的問(wèn)題是它們是直接在 layer 上對(duì)屬性進(jìn)行操作的。這意味著什么呢？比如我們想指定一個(gè) layer 從坐標(biāo)為 (100, 100) 的位置運(yùn)動(dòng)到 (300, 300) 的位置，但是在它運(yùn)動(dòng)到中間的時(shí)候，我們想它停下來(lái)并且讓它回到它原來(lái)的位置，事情就變得非常復(fù)雜了。如果你只是簡(jiǎn)單地刪除當(dāng)前的動(dòng)畫(huà)然后再添加一個(gè)新的，那么這個(gè) layer 的速率就會(huì)不連續(xù)。

然而，我們想要的是一個(gè)漂亮的，流暢地減速和加速的動(dòng)畫(huà)。

只有通過(guò)間接操作動(dòng)畫(huà)才能達(dá)到上面的效果，比如通過(guò)模擬力在界面上的表現(xiàn)。新的動(dòng)畫(huà)需要用 layer 的當(dāng)前速度矢量作為參數(shù)傳入來(lái)達(dá)到流暢的效果。

看一下 UIView 中關(guān)于彈簧動(dòng)畫(huà)的 API

1. animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:

你會(huì)注意到速率是個(gè) CGFloat。所以當(dāng)我們給一個(gè)移動(dòng) view 的動(dòng)畫(huà)在其運(yùn)動(dòng)的方向上加一個(gè)初始的速率時(shí)，你沒(méi)法告知?jiǎng)赢?huà)這個(gè) view 現(xiàn)在的運(yùn)動(dòng)狀態(tài)，比如我們不知道要添加的動(dòng)畫(huà)的方向是不是和原來(lái)的 view 的速度方向垂直。為了使其成為可能，這個(gè)速度需要用向量來(lái)表示。

解決方案

讓我們看一下我們?cè)鯓觼?lái)正確實(shí)現(xiàn)一個(gè)可交互并且可以中斷的動(dòng)畫(huà)。我們來(lái)做一個(gè)類似于控制中心板的東西來(lái)實(shí)現(xiàn)這個(gè)效果（點(diǎn)擊視頻下面的開(kāi)始按鈕）：

這個(gè)控制板有兩個(gè)狀態(tài)：打開(kāi)和關(guān)閉。你可以通過(guò)點(diǎn)擊來(lái)切換這兩個(gè)狀態(tài)，或者通過(guò)上下拖動(dòng)來(lái)調(diào)調(diào)整它向上或向下。我要將這個(gè)控制面板的所有狀態(tài)都做到可以交互，甚至是在動(dòng)畫(huà)的過(guò)程中也可以，這是一個(gè)很大的挑戰(zhàn)。比如，當(dāng)你在這個(gè)控制板還沒(méi)有切換到打開(kāi)狀態(tài)的動(dòng)畫(huà)過(guò)程中，你點(diǎn)擊了它，那么它應(yīng)該從現(xiàn)在這個(gè)點(diǎn)的位置馬上回到關(guān)閉狀態(tài)的位置。在現(xiàn)在很多的應(yīng)用中，大部分都是用默認(rèn)的動(dòng)畫(huà) API，你必須要等一個(gè)動(dòng)畫(huà)結(jié)束之后你才能做自己想做的事情?；蛘撸绻悴坏却脑?，就會(huì)看到一個(gè)不連續(xù)的速度曲線。我們要解決這個(gè)問(wèn)題。

UIKit 力學(xué)
隨著 iOS7 的發(fā)布，蘋果向我們展示了一個(gè)叫 UIKit 力學(xué)的動(dòng)畫(huà)框架 (可以參見(jiàn) WWDC 2013 sessions?206?和?221)。UIKit 力學(xué)是一個(gè)基于模擬物理引擎的框架，只要你添加指定的行為到動(dòng)畫(huà)對(duì)象上來(lái)實(shí)現(xiàn)?UIDynamicItem?協(xié)議就能實(shí)現(xiàn)很多動(dòng)畫(huà)。這個(gè)框架非常強(qiáng)大，并且它能夠在多個(gè)物體間啟用像是附著和碰撞這樣的復(fù)雜行為。請(qǐng)看一下?UIKit Dynamics Catalog，確認(rèn)一下什么是可用的。

因?yàn)?UIKit 力學(xué)中的的動(dòng)畫(huà)是被間接驅(qū)動(dòng)的，就像我在上面提到的，這使我們實(shí)現(xiàn)真實(shí)的交互式動(dòng)畫(huà)成為可能，它能在任何時(shí)候被中斷并且擁有連續(xù)的加速度。同時(shí)，UIKit 力學(xué)在物理層的抽象上能完全勝任我們一般情況下在用戶界面中的所需要的所有動(dòng)畫(huà)。其實(shí)在大部分情況下，我們只會(huì)用到其中的一小部分功能。

定義行為
為了實(shí)現(xiàn)我們的控制板的行為，我們將使用 UIkit 力學(xué)中的兩個(gè)不同行為：UIAttachmentBehavior?和?UIDynamicItemBehavior。附著行為用來(lái)扮演彈簧的角色，它將界面向目標(biāo)點(diǎn)拉動(dòng)。另一方面，我們用動(dòng)態(tài) item behvaior 定義了比如摩擦系數(shù)這樣的界面的內(nèi)置屬性。

我創(chuàng)建了一個(gè)我們自己的行為子類，以將這兩個(gè)行為封裝到我們的控制板上:

1. @interface?PaneBehavior?:?UIDynamicBehavior
3. @property?(nonatomic)?CGPoint?targetPoint;
4. @property?(nonatomic)?CGPoint?velocity;
6. –?(instancetype)initWithItem:(id?<UIDynamicItem>)item;
8. @end

我們通過(guò)一個(gè) dynamic item 來(lái)初始化這個(gè)行為，然后就可以設(shè)置它的目標(biāo)點(diǎn)和我們想要的任何速度。在內(nèi)部，我們創(chuàng)建了附著行為和 dynamic item 行為，并且將這些行為添加到我們自定義的行為中:

1. –?(void)setup
2. {
3. ????UIAttachmentBehavior?*attachmentBehavior?=?[[UIAttachmentBehavior?alloc]?initWithItem:self.item?attachedToAnchor:CGPointZero];
4. ????attachmentBehavior.frequency?=?3.5;
5. ????attachmentBehavior.damping?=?.4;
6. ????attachmentBehavior.length?=?0;
7. ????[self?addChildBehavior:attachmentBehavior];
8. ????self.attachmentBehavior?=?attachmentBehavior;
10. ????UIDynamicItemBehavior?*itemBehavior?=?[[UIDynamicItemBehavior?alloc]?initWithItems:@[self.item]];
11. ????itemBehavior.density?=?100;
12. ????itemBehavior.resistance?=?10;
13. ????[self?addChildBehavior:itemBehavior];
14. ????self.itemBehavior?=?itemBehavior;
15. }

為了用 targetPoint 和 velocity 屬性來(lái)影響 item 的 behavior，我們需要重寫(xiě)它們的 setter 方法，并且分別修改在附著行為和 item behaviors 中的對(duì)應(yīng)的屬性。我們對(duì)目標(biāo)點(diǎn)的 setter 方法來(lái)說(shuō)，這個(gè)改動(dòng)很簡(jiǎn)單：

1. –?(void)setTargetPoint:(CGPoint)targetPoint
2. {
3. ????_targetPoint?=?targetPoint;
4. ????self.attachmentBehavior.anchorPoint?=?targetPoint;
5. }

對(duì)于 velocity 屬性，我們需要多做一些工作，因?yàn)?dynamic item behavior 只允許相對(duì)地改變速度。這就意味如果我們要將 velocity 設(shè)置為絕對(duì)值，首先我們就需要得到當(dāng)前的速度，然后再加上速度差才能得到我們的目標(biāo)速度。

1. –?(void)setVelocity:(CGPoint)velocity
2. {
3. ????_velocity?=?velocity;
4. ????CGPoint?currentVelocity?=?[self.itemBehavior?linearVelocityForItem:self.item];
5. ????CGPoint?velocityDelta?=?CGPointMake(velocity.x?–?currentVelocity.x,?velocity.y?–?currentVelocity.y);
6. ????[self.itemBehavior?addLinearVelocity:velocityDelta?forItem:self.item];
7. }

將Behavior投入使用

我們的控制板有三個(gè)不同狀態(tài)：在開(kāi)始或結(jié)束位置的靜止?fàn)顟B(tài)，正在被用戶拖動(dòng)的狀態(tài)，以及在沒(méi)有用戶控制時(shí)運(yùn)動(dòng)到結(jié)束位置的動(dòng)畫(huà)狀態(tài)。

為了將從直接操作狀態(tài) (用戶拖動(dòng)這個(gè)滑動(dòng)板) 過(guò)渡到動(dòng)畫(huà)狀態(tài)這個(gè)過(guò)程做的流暢，我們還有很多其他的事要做。當(dāng)用戶停止拖動(dòng)控制板時(shí)，它會(huì)發(fā)送一個(gè)消息到它的 delegate。根據(jù)這個(gè)方法，我們可以知道這個(gè)板應(yīng)該朝哪個(gè)方向運(yùn)動(dòng)，然后在我們自定義的 PaneBehavior 上設(shè)置結(jié)束點(diǎn)，以及初始速度 (這非常重要)，并將行為添加到動(dòng)畫(huà)器中去，以此確保從拖動(dòng)操作到動(dòng)畫(huà)狀態(tài)這個(gè)過(guò)程能夠非常流暢。

1. –?(void)draggableView:(DraggableView?*)view?draggingEndedWithVelocity:(CGPoint)velocity
2. {
3. ????PaneState?targetState?=?velocity.y?>=?0???PaneStateClosed?:?PaneStateOpen;
4. ????[self?animatePaneToState:targetState?initialVelocity:velocity];
5. }
7. –?(void)animatePaneToState:(PaneState)targetState?initialVelocity:(CGPoint)velocity
8. {
9. ????if?(!self.paneBehavior)?{
10. ????????PaneBehavior?*behavior?=?[[PaneBehavior?alloc]?initWithItem:self.pane];
11. ????????self.paneBehavior?=?behavior;
12. ????}
13. ????self.paneBehavior.targetPoint?=?[self?targetPointForState:targetState];
14. ????if?(!CGPointEqualToPoint(velocity,?CGPointZero))?{
15. ????????self.paneBehavior.velocity?=?velocity;
16. ????}
17. ????[self.animator?addBehavior:self.paneBehavior];
18. ????self.paneState?=?targetState;
19. }

一旦用戶用他的手指再次觸動(dòng)控制板時(shí)，我必須要將所有的 dynamic behavior 從 animator 刪除，這樣才不會(huì)影響控制板對(duì)拖動(dòng)手勢(shì)的響應(yīng)：

1. –?(void)draggableViewBeganDragging:(DraggableView?*)view
2. {
3. ????[self.animator?removeAllBehaviors];
4. }

我們不僅僅允許控制板可以被拖動(dòng)，還要允許它可以被點(diǎn)擊，讓它可以從一個(gè)位置跳轉(zhuǎn)到另一個(gè)位置以達(dá)到開(kāi)關(guān)的效果。一旦點(diǎn)擊事件發(fā)生，我們就會(huì)立即調(diào)整這個(gè)滑動(dòng)板的目標(biāo)位置。因?yàn)槲覀儾荒苤苯涌刂苿?dòng)畫(huà)，但是通過(guò)彈力和摩擦力，我們的動(dòng)畫(huà)可以非常流暢地執(zhí)行這個(gè)動(dòng)作：

1. –?(void)didTap:(UITapGestureRecognizer?*)tapRecognizer
2. {
3. ????PaneState?targetState?=?self.paneState?==?PaneStateOpen???PaneStateClosed?:?PaneStateOpen;
4. ????[self?animatePaneToState:targetState?initialVelocity:CGPointZero];
5. }

這樣就實(shí)現(xiàn)了我們的大部分功能了。你可以在?GitHub?上查看完整的例子。
重申一點(diǎn)：UIKit 力學(xué)可以通過(guò)在界面上模擬力來(lái)間接地驅(qū)動(dòng)動(dòng)畫(huà)（我們的例子中，使用的是彈力和摩擦力）。這間接地使我們?cè)谌魏螘r(shí)候都能以連續(xù)的速度曲線來(lái)與界面進(jìn)行交互。

現(xiàn)在我們已經(jīng)通過(guò) UIKit 力學(xué)實(shí)現(xiàn)了整個(gè)交互，讓我們回顧一下這個(gè)場(chǎng)景。這個(gè)例子的動(dòng)畫(huà)中我們只用了 UIKit 力學(xué)中一小部分功能，并且它的實(shí)現(xiàn)方式也非常簡(jiǎn)單。對(duì)于我們來(lái)說(shuō)這是一個(gè)去理解它其中的過(guò)程的很好的例子，但是如果我們使用的環(huán)境中沒(méi)有 UIKit 力學(xué) (比如說(shuō)在 Mac 上)，或者你的使用場(chǎng)景中不能很好的適用 UIKit 力學(xué)呢。

自己操作動(dòng)畫(huà)

至于在你的應(yīng)用中大部分時(shí)間會(huì)用的動(dòng)畫(huà)，比如簡(jiǎn)單的彈力動(dòng)畫(huà)，我們控制它真的不難。我們可以做一個(gè)練習(xí)，來(lái)看看如何拋棄 UIKit 力學(xué)這個(gè)巨大的黑盒子，看要如何“手動(dòng)”來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的交互。想法非常簡(jiǎn)單：我們只要每秒修改這個(gè) view 的 frame 60 次。每一幀我們都基于當(dāng)前速度和作用在 view 上的力來(lái)調(diào)整 view 的 frame 就可以了。

物理原理

首先讓我們看一下我們需要知道的基礎(chǔ)物理知識(shí)，這樣我們才能實(shí)現(xiàn)出剛才使用 UIKit 力學(xué)實(shí)現(xiàn)的那種彈簧動(dòng)畫(huà)效果。為了簡(jiǎn)化問(wèn)題，雖然引入第二個(gè)維度也是很直接的，但我們?cè)谶@里只關(guān)注一維的情況 (在我們的例子中就是這樣的情況)。

我們的目標(biāo)是依據(jù)控制面板當(dāng)前的位置和上一次動(dòng)畫(huà)后到現(xiàn)在為止經(jīng)過(guò)的時(shí)間，來(lái)計(jì)算它的新位置。我們可以把它表示成這樣：

y = y0 + Δy

位置的偏移量可以通過(guò)速度和時(shí)間的函數(shù)來(lái)表達(dá)：

Δy = v ? Δt

這個(gè)速度可以通過(guò)前一次的速度加上速度偏移量算出來(lái)，這個(gè)速度偏移量是由力在 view 上的作用引起的。

v = v0 + Δv

速度的變化可以通過(guò)作用在這個(gè) view 上的沖量計(jì)算出來(lái)：

Δv = (F ? Δt) / m

現(xiàn)在，讓我們看一下作用在這個(gè)界面上的力。為了得到彈簧效果，我們必須要將摩擦力和彈力結(jié)合起來(lái)：

F = F_spring + F_friction

彈力的計(jì)算方法我們可以從任何一本教科書(shū)中得到 (編者注：簡(jiǎn)單的胡克定律)：

F_spring = k ? x

k 是彈簧的勁度系數(shù)，x 是 view 到目標(biāo)結(jié)束位置的距離 (也就是彈簧的長(zhǎng)度)。因此，我們可以把它寫(xiě)成這樣：

F_spring = k ? abs(y_target – y0)

摩擦力和 view 的速度成正比：

F_friction = μ ? v

μ 是一個(gè)簡(jiǎn)單的摩擦系數(shù)。你可以通過(guò)別的方式來(lái)計(jì)算摩擦力，但是這個(gè)方法能很好地做出我們想要的動(dòng)畫(huà)效果。

將上面的表達(dá)式放在一起，我們就可以算出作用在界面上的力：

F = k ? abs(y_target – y0) + μ ? v

為了實(shí)現(xiàn)起來(lái)更簡(jiǎn)單點(diǎn)些，我們將 view 的質(zhì)量設(shè)為 1，這樣我們就能計(jì)算在位置上的變化：

Δy = (v0 + (k ? abs(y_target – y0) + μ ? v) ? Δt) ? Δt

實(shí)現(xiàn)動(dòng)畫(huà)

為了實(shí)現(xiàn)這個(gè)動(dòng)畫(huà)，我們首先需要?jiǎng)?chuàng)建我們自己的 Animator 類，它將扮演驅(qū)動(dòng)動(dòng)畫(huà)的角色。這個(gè)類使用了 CADisplayLink，CADisplayLink 是專門用來(lái)將繪圖與屏幕刷新頻率相同步的定時(shí)器。換句話說(shuō)，如果你的動(dòng)畫(huà)是流暢的，這個(gè)定時(shí)器就會(huì)每秒調(diào)用你的方法60次。接下來(lái)，我們需要實(shí)現(xiàn) Animation 協(xié)議來(lái)和我們的 Animator 一起工作。這個(gè)協(xié)議只有一個(gè)方法，animationTick:finished:。屏幕每次被刷新時(shí)都會(huì)調(diào)用這個(gè)方法，并且在方法中會(huì)得到兩個(gè)參數(shù)：第一個(gè)參數(shù)是前一個(gè) frame 的持續(xù)時(shí)間，第二個(gè)參數(shù)是一個(gè)指向 BOOL 的指針。當(dāng)我們?cè)O(shè)置這個(gè)指針的值為 YES 時(shí)，我們就可以與 Animator 取得通訊并匯報(bào)動(dòng)畫(huà)完成；

1. @protocol?Animation?<NSObject>
2. –?(void)animationTick:(CFTimeInterval)dt?finished:(BOOL?*)finished;
3. @end

我們會(huì)在下面實(shí)現(xiàn)這個(gè)方法。首先，根據(jù)時(shí)間間隔我們來(lái)計(jì)算由彈力和摩擦力的合力。然后根據(jù)這個(gè)力來(lái)更新速度，并調(diào)整 view 的中心位置。最后，當(dāng)這個(gè)速度降低并且 view 到達(dá)結(jié)束位置時(shí)，我們就停止這個(gè)動(dòng)畫(huà)：

1. –?(void)animationTick:(CFTimeInterval)dt?finished:(BOOL?*)finished
2. {
3. ????static?const?float?frictionConstant?=?20;
4. ????static?const?float?springConstant?=?300;
5. ????CGFloat?time?=?(CGFloat)?dt;
7. ????//摩擦力?=?速度?*?摩擦系數(shù)
8. ????CGPoint?frictionForce?=?CGPointMultiply(self.velocity,?frictionConstant);
9. ????//彈力?=?(目標(biāo)位置?–?當(dāng)前位置)?*?彈簧勁度系數(shù)
10. ????CGPoint?springForce?=?CGPointMultiply(CGPointSubtract(self.targetPoint,?self.view.center),?springConstant);
11. ????//力?=?彈力?–?摩擦力
12. ????CGPoint?force?=?CGPointSubtract(springForce,?frictionForce);
14. ????//速度?=?當(dāng)前速度?+?力?*?時(shí)間?/?質(zhì)量
15. ????self.velocity?=?CGPointAdd(self.velocity,?CGPointMultiply(force,?time));
16. ????//位置?=?當(dāng)前位置?+?速度?*?時(shí)間
17. ????self.view.center?=?CGPointAdd(self.view.center,?CGPointMultiply(self.velocity,?time));
19. ????CGFloat?speed?=?CGPointLength(self.velocity);
20. ????CGFloat?distanceToGoal?=?CGPointLength(CGPointSubtract(self.targetPoint,?self.view.center));
21. ????if?(speed?<?0.05?&&?distanceToGoal?<?1)?{
22. ????????self.view.center?=?self.targetPoint;
23. ????????*finished?=?YES;
24. ????}
25. }

這就是這個(gè)方法里的全部?jī)?nèi)容。我們把這個(gè)方法封裝到一個(gè) SpringAnimation 對(duì)象中。除了這個(gè)方法之外，這個(gè)對(duì)象中還有一個(gè)初始化方法，它指定了 view 中心的目標(biāo)位置 (在我們的例子中，就是打開(kāi)狀態(tài)時(shí)界面的中心位置，或者關(guān)閉狀態(tài)時(shí)界面的中心位置) 和初始的速度。

將動(dòng)畫(huà)添加到 view 上

我們的 view 類剛好和使用 UIDynamic 的例子一樣：它有一個(gè)拖動(dòng)手勢(shì)，并且根據(jù)拖動(dòng)手勢(shì)來(lái)更新中心位置。它也有兩個(gè)同樣的 delegate 方法，這兩個(gè)方法會(huì)實(shí)現(xiàn)動(dòng)畫(huà)的初始化。首先，一旦用戶開(kāi)始拖動(dòng)控制板時(shí)，我們就取消所有動(dòng)畫(huà)：

1. –?(void)draggableViewBeganDragging:(DraggableView?*)view
2. {
3. ????[self?cancelSpringAnimation];
4. }

一旦停止拖動(dòng)，我們就根據(jù)從拖動(dòng)手勢(shì)中得到的最后一個(gè)速率值來(lái)開(kāi)始我們的動(dòng)畫(huà)。我們根據(jù)拖動(dòng)狀態(tài) paneState 計(jì)算出動(dòng)畫(huà)的結(jié)束位置：

1. –?(void)draggableView:(DraggableView?*)view?draggingEndedWithVelocity:(CGPoint)velocity
2. {
3. ????PaneState?targetState?=?velocity.y?>=?0???PaneStateClosed?:?PaneStateOpen;
4. ????self.paneState?=?targetState;
5. ????[self?startAnimatingView:view?initialVelocity:velocity];
6. }
8. –?(void)startAnimatingView:(DraggableView?*)view?initialVelocity:(CGPoint)velocity
9. {
10. ????[self?cancelSpringAnimation];
11. ????self.springAnimation?=?[UINTSpringAnimation?animationWithView:view?target:self.targetPoint?velocity:velocity];
12. ????[view.animator?addAnimation:self.springAnimation];
13. }

剩下來(lái)要做的就是添加點(diǎn)擊動(dòng)畫(huà)了，這很簡(jiǎn)單。一旦我們觸發(fā)這個(gè)狀態(tài)，就開(kāi)始動(dòng)畫(huà)。如果這里正在進(jìn)行彈簧動(dòng)畫(huà)，我們就用當(dāng)時(shí)的速度作為開(kāi)始。如果這個(gè)彈簧動(dòng)畫(huà)是 nil，那么這個(gè)開(kāi)始速度就是 CGPointZero。想要知道為什么依然可以進(jìn)行動(dòng)畫(huà)，可以看看 animationTick:finished: 里的代碼。當(dāng)這個(gè)起始速度為 0 的時(shí)候，彈力就會(huì)使速度緩慢地增長(zhǎng)，直到面板到達(dá)目標(biāo)位置：

1. –?(void)didTap:(UITapGestureRecognizer?*)tapRecognizer
2. {
3. ????PaneState?targetState?=?self.paneState?==?PaneStateOpen???PaneStateClosed?:?PaneStateOpen;
4. ????self.paneState?=?targetState;
5. ????[self?startAnimatingView:self.pane?initialVelocity:self.springAnimation.velocity];
6. }

動(dòng)畫(huà)驅(qū)動(dòng)

最后，我們需要一個(gè) Animator，也就是動(dòng)畫(huà)的驅(qū)動(dòng)者。Animator 封裝了 display link。因?yàn)槊總€(gè) display link 都鏈接一個(gè)指定的 UIScreen，所以我們根據(jù)這個(gè)指定的 UIScreen 來(lái)初始化我們的 animator。我們初始化一個(gè) display link，并且將它加入到 run loop 中。因?yàn)楝F(xiàn)在還沒(méi)有動(dòng)畫(huà)，所以我們是從暫停狀態(tài)開(kāi)始的：

1. –?(instancetype)initWithScreen:(UIScreen?*)screen
2. {
3. ????self?=?[super?init];
4. ????if?(self)?{
5. ????????self.displayLink?=?[screen?displayLinkWithTarget:self?selector:@selector(animationTick:)];
6. ????????self.displayLink.paused?=?YES;
7. ????????[self.displayLink?addToRunLoop:[NSRunLoop?mainRunLoop]?forMode:NSRunLoopCommonModes];
8. ????????self.animations?=?[NSMutableSet?new];
9. ????}
10. ????return?self;
11. }

一旦我們添加了這個(gè)動(dòng)畫(huà)，我們要確保這個(gè) display link 不再是停止?fàn)顟B(tài)：

1. –?(void)addAnimation:(id<Animation>)animation
2. {
3. ????[self.animations?addObject:animation];
4. ????if?(self.animations.count?==?1)?{
5. ????????self.displayLink.paused?=?NO;
6. ????}
7. }

我們?cè)O(shè)置這個(gè) display link 來(lái)調(diào)用 animationTick: 方法，在每個(gè) Tick 中，我們都遍歷它的動(dòng)畫(huà)數(shù)組，并且給這些動(dòng)畫(huà)數(shù)組中的每個(gè)動(dòng)畫(huà)發(fā)送一個(gè)消息。如果這個(gè)動(dòng)畫(huà)數(shù)組中已經(jīng)沒(méi)有動(dòng)畫(huà)了，我們就暫停這個(gè) display link。

1. –?(void)animationTick:(CADisplayLink?*)displayLink
2. ?{
3. ?????CFTimeInterval?dt?=?displayLink.duration;
4. ?????for?(id<Animation>?a?in?[self.animations?copy])?{
5. ?????????BOOL?finished?=?NO;
6. ?????????[a?animationTick:dt?finished:&finished];
7. ?????????if?(finished)?{
8. ?????????????[self.animations?removeObject:a];
9. ?????????}
10. ?????}
11. ?????if?(self.animations.count?==?0)?{
12. ?????????self.displayLink.paused?=?YES;
13. ?????}
14. ?}

完整的項(xiàng)目在?GitHub?上。
權(quán)衡
我們必須記住，通過(guò) display link 來(lái)驅(qū)動(dòng)動(dòng)畫(huà) (就像我們剛才演示的例子，或者我們使用UIkit力學(xué)來(lái)做的例子，又或者是使用 Facebook 的 Pop 框架) 是有代價(jià)需要進(jìn)行權(quán)衡的。就像?Andy Matuschar 指出的那樣，UIView 和 CAAnimation 動(dòng)畫(huà)比其他任務(wù)更少受系統(tǒng)的影響，因?yàn)楸绕鹉愕膽?yīng)用來(lái)說(shuō)，渲染處于更高的優(yōu)先級(jí)。
回到 Mac

現(xiàn)在 Mac 中還沒(méi)有 UIKit 力學(xué)。如果你想在 Mac 中創(chuàng)建一個(gè)真實(shí)的交互式動(dòng)畫(huà)，你必須自己去實(shí)現(xiàn)這些動(dòng)畫(huà)。我們已經(jīng)向你展示了如何在 iOS 中實(shí)現(xiàn)這些動(dòng)畫(huà)，所以在 OS X 中實(shí)現(xiàn)相似的功能也是非常簡(jiǎn)單的。你可以查看在 GitHub 中的完整項(xiàng)目，如果你想要應(yīng)用到 OS X 中，這里還有一些地方需要修改：

1. 第一個(gè)要修改的就是 Animator。在Mac中沒(méi)有 CADisplayLink，但是取而代之的有 CVDisplayLink，它是以 C 語(yǔ)言為基礎(chǔ)的 API。創(chuàng)建它需要做更多的工作，但也是很直接。

2. iOS 中的彈簧動(dòng)畫(huà)是基于調(diào)整 view 的中心位置來(lái)實(shí)現(xiàn)的。而 OS X 中的 NSView 類沒(méi)有 center 這個(gè)屬性，所以我們用為 frame 中的 origin 做動(dòng)畫(huà)來(lái)代替。

3. 在 Mac 中是沒(méi)有手勢(shì)識(shí)別，所以我要在我們自定義的 view 子類中實(shí)現(xiàn) mouseDown:，mouseUp: 和 mouseDragged: 方法。

上面就是我們需要在 Mac 中使用我們的動(dòng)畫(huà)效果在代碼所需要做的修改。對(duì)于像這樣的簡(jiǎn)單 view，它能很好的勝任。但對(duì)于更復(fù)雜的動(dòng)畫(huà)，你可能就不會(huì)想通過(guò)為 frame 做動(dòng)畫(huà)來(lái)實(shí)現(xiàn)了，我們可以用 transform 來(lái)代替，瀏覽 Jonathan Willing 寫(xiě)的關(guān)于 OS X 動(dòng)畫(huà)的博客，你會(huì)獲益良多。

Facebook 的 POP 框架
上個(gè)星期圍繞著 Facebook 的?POP 框架的討論絡(luò)繹不絕。POP 框架是 Paper 應(yīng)用背后支持的動(dòng)畫(huà)引擎。它的操作非常像我們上面講的驅(qū)動(dòng)動(dòng)畫(huà)的例子，但是它以非常靈活的方式巧妙地封裝到了一個(gè)程序包中。

讓我們動(dòng)手用 POP 來(lái)驅(qū)動(dòng)我們的動(dòng)畫(huà)吧。因?yàn)槲覀冏约旱念愔幸呀?jīng)封裝了彈簧動(dòng)畫(huà)，這些改變就非常簡(jiǎn)單了。我們所要做的就是初始化一個(gè) POP 動(dòng)畫(huà)來(lái)代替我們剛才自己做的動(dòng)畫(huà)，并將下面這段代碼加入到 view 中：

1. –?(void)animatePaneWithInitialVelocity:(CGPoint)initialVelocity
2. {
3. ????[self.pane?pop_removeAllAnimations];
4. ????POPSpringAnimation?*animation?=?[POPSpringAnimation?animationWithPropertyNamed:kPOPViewCenter];
5. ????animation.velocity?=?[NSValue?valueWithCGPoint:initialVelocity];
6. ????animation.toValue?=?[NSValue?valueWithCGPoint:self.targetPoint];
7. ????animation.springSpeed?=?15;
8. ????animation.springBounciness?=?6;
9. ????[self.pane?pop_addAnimation:animation?forKey:@”animation”];
10. ????self.animation?=?animation;
11. }

你可以在?GitHub?中找到使用 POP 框架的完整例子。

讓其工作非常簡(jiǎn)單，并且通過(guò)它我們可以實(shí)現(xiàn)很多更復(fù)雜的動(dòng)畫(huà)。但是它真正強(qiáng)大的地方在于它能夠?qū)崿F(xiàn)真正的可交互和可中斷的動(dòng)畫(huà)，就像我們上面提到的那樣，因?yàn)樗苯又С忠运俣茸鳛檩斎雲(yún)?shù)。如果你打算從一開(kāi)始到被中斷這過(guò)程中的任何時(shí)候都能交互，像 POP 這樣的框架就能幫你實(shí)現(xiàn)這些動(dòng)畫(huà)，并且它能始終保證動(dòng)畫(huà)一直很平滑。

如果你不滿足于用 POPSpringAnimation 和 POPDecayAnimation 的開(kāi)箱即用的處理方式的話，POP 還提供了 POPCustomAnimation 類，它基本上是一個(gè) display link 的方便的轉(zhuǎn)換，來(lái)在動(dòng)畫(huà)的每一個(gè) tick 的回調(diào) block 中驅(qū)動(dòng)你自己的動(dòng)畫(huà)。

展望未來(lái)

隨著 iOS7 中從對(duì)擬物化的視覺(jué)效果的遠(yuǎn)離，以及對(duì) UI 行為的關(guān)注，真實(shí)的交互式動(dòng)畫(huà)通向未來(lái)的大道變得越來(lái)越明顯。它們也是將初代 iPhone 中滑動(dòng)行為的魔力延續(xù)到交互的各個(gè)方面的一條康莊大道。為了讓這些魔力成為現(xiàn)實(shí)，我們就不能在開(kāi)發(fā)過(guò)程中才想到這些動(dòng)畫(huà)，而是應(yīng)該在設(shè)計(jì)時(shí)就要考慮這些交互，這一點(diǎn)非常重要。

文章來(lái)自：CocoaChina