動畫翻譯3

自然的動畫

可以使用標準的時間曲線，但那并不是最優(yōu)方案,并且不一定會帶給用戶令人贊嘆和愉悅的感覺，因為標準時間曲線型的動畫總會個人一種機械而不流暢的感覺，不像實際生活中的物件接受到外力所作出的一些反應(yīng)。
如果我們想要做出真實自然的動畫效果，就要探究真實環(huán)境中物體受到外力時做出的反應(yīng)，然后去模仿物體當(dāng)時的反應(yīng)。而這個正是處理軟件中的動畫效果的秘密訣竅。

但是一個真實自然的動作是什么樣的呢？哪個可以作為物體根據(jù)物理法則移動的例子呢？

tanhuang.png

一個在末端系著一個物體的彈簧可以很好的說明這個問題。它運動起來像是你可以預(yù)見的那樣，因為你之前已經(jīng)很熟悉末端帶有物體的彈簧的運動軌跡。它的運動軌跡和標準的Ease曲線又是很不同的，我們看下末端有物體的彈簧的運動軌跡。

guiji.png

zuni.png

彈簧效果的動畫運動曲線和easing類型的動畫曲線比較相似（因為它們都是曲線！），但是它們的實現(xiàn)機制是不同的。easing動畫曲線是通過定義不同的貝塞爾曲線來操縱句柄來影響曲線的形狀的。但是，有許多曲線和波動并不能用貝塞爾曲線來進行描述，而其中就包括質(zhì)量——阻尼彈簧系統(tǒng)。
這種類型的運動通常備用來創(chuàng)作流暢的、彈簧效果的動畫，可以通過末端的物體的質(zhì)量、彈簧的張力、以及阻尼的大小等來影響曲線形狀。

彈.png

• 質(zhì)量 是指系在彈簧末端的物體的質(zhì)量。
• 張力 是指彈簧能夠拉長多少并且決定于彈簧的厚度和環(huán)繞方式。
• 阻尼或者摩擦力 是指當(dāng)你從水中拔出手或者是想要在水中快走所收到的阻力。

這些都是定義彈簧動畫的關(guān)鍵因素。

如果你想自己封裝實現(xiàn)一些web 、iOS或者是其它平臺的彈簧效果的動畫，你就必須了解一些彈簧系統(tǒng)動畫背后的一些數(shù)學(xué)原理。而對于iOS來說，已經(jīng)有了一些優(yōu)秀的動畫框架（由蘋果公司和其它公司構(gòu)建的），可以使用這些現(xiàn)存的框架來實現(xiàn)一些流暢自然、彈簧效果動畫。

當(dāng)我們仔細觀察一些動畫代碼之前，我們應(yīng)該討論一下iOS的界面和動畫發(fā)展。

從UIKit & 核心動畫開始

從最基本的層面上將，屏幕上所顯示的控件都屬于UIView類。他們是矩形的，通過坐標系和緯度來定義他們顯示在屏幕上的位置和尺寸。UIView是UIKit框架中用來構(gòu)建界面的最基本的。每一個View有可能在內(nèi)部繪有文字、形狀、圖片等。例如，status bar是顯示在屏幕頂部的一條長的窄的View，而它內(nèi)部的所有控件（時間、電池標識、信號強度指示等）都是些其他的View。
有一些特殊的UIView是具有獨特的功能和屬性的。像UIButton是用來構(gòu)建界面按鈕的，而UIImageView則是用來展示圖片的，UILabel是用來展示文字信息，UITableView是用來展示一些表格數(shù)據(jù)。你也可以自定義一些View用來展示一些你想展示的任何東西。
下面是一個屏幕截屏，該界面被分解為多個不同的View。

jietu.png

• 1、carrier圖片View
• 2、WiFi信號強度指示
• 3、當(dāng)前時間
• 4、電量指示
• 5、“漢堡包”菜單按鈕
• 6、標題欄
• 7、一個用來切換子菜單的按鈕
• 8、一個* UITableViewCell*的View，用來顯示UITableView的一行展示的所有元素。
• 9、UILabel展示的標題
• 10、評論按鈕，包含有評論的數(shù)目以及一個表示評論的氣泡圖
• 11、顯示轉(zhuǎn)發(fā)URL地址的UILabel
• 12、用UILabel展示的數(shù)據(jù)

如果你對iOS界面開發(fā)不是很熟悉的話，可以仔細觀察下自己喜歡的APP，看看能不能對完成的界面進行分解，這樣你就可以將他們按照分解的部分進行代碼實現(xiàn)。

UIView承擔(dān)著很多責(zé)任，其中一個就是需要響應(yīng)外界的事件。界面里的任何View都可以響應(yīng)外界事件，你也可以定義某些特殊的View能夠響應(yīng)用戶對他們的點擊事件。
UIView在本質(zhì)上是一個包含圖形內(nèi)容的矩形。處于其他View的上層或者緊挨著其他View，也可能有一些很好的透明的效果。
你可以想象一下，在一個屏幕上移動View是一個多么大的挑戰(zhàn)。

蘋果公司推出核心動畫的原因

核心動畫Core Animation是一個快速有效實現(xiàn)圖形復(fù)合效果動畫框架。雖然他的名字里含有animation，但是如果你認為它只能做這些事情，那你就大錯特錯了。實際上，它負責(zé)將所有的View渲染到屏幕上、進行快速的透明度計算、圖片過濾和可視效果。雖然當(dāng)初是為iOS設(shè)計的，但是自從OSX 10.5以后，在Mac平臺上同樣適用。
為了管理由GPU渲染到屏幕上的圖形內(nèi)容，Core Animation將CALayer作為主力。CALayer才是那個實實在在做界面渲染工作的，實際上，UIView是封裝了CALayer和核心動畫，并且在蘋果內(nèi)部稱為“Layer kit”！當(dāng)你操縱屏幕上顯示的View的位置或者維度的時候，你實際上是在移動它的CALayer。核心動畫在硬件管理層上合成和操縱你APP界面內(nèi)容的展示，使顯示變得流暢而不卡頓。iOS所能實現(xiàn)的動畫效果，都是因為核心動畫框架的原因。

kuangjia.png

是時候上一部分代碼了。讓我們開始設(shè)置屏幕上一個View對象的圓角半徑。因為是一個快速簡單案例的原因，我們將這個UIView對象放在main window上，但是如果你是在做一個真實的APP的話，就需要將這個View對象放在管理當(dāng)前屏幕的一個控制器中。

注意：如果你是剛剛開始接觸iOS開發(fā)和Objective-C，我建議先看一下我寫的對 Obj-C and Cocoa的[介紹]:https://designthencode.com/scratch/，也或者你可以繼續(xù)學(xué)習(xí)。

UIView *redBall = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
redBall.backgroundColor = [UIColor redColor];
redBall.layer.cornerRadius = 50;
[self.window addSubview:redBall];

我們創(chuàng)建了一個紅色的UIView對象，然后通過定義他的X和Y坐標以及寬高限制在屏幕上的顯示位置。我們設(shè)置它的backgroundColor為紅色。像上面講過的那樣，如果要設(shè)置一個View對象的圓角，可以通過View對象的layer層來設(shè)置，所以我們使用layer.cornerRadius為50（View對象寬高的一半）。如果你將這段代碼寫在APP的代理文件當(dāng)中-application:didFinishLaunchingWithOptions方法中，你會在程序一啟動的時候就看到下面這樣的情形。

hongqiu.png

UIView *redBall = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
redBall.backgroundColor = [UIColor redColor];
redBall.layer.cornerRadius = 50;
[self.window addSubview:redBall];

[UIView animateWithDuration:.5 delay:0
    options:UIViewAnimationOptionCurveEaseInOut animations:^{
    redBall.transform = CGAffineTransformMakeScale(2.0, 2.0);
} completion:NULL];

這段代碼調(diào)用了+animateWithDuration:delay:options:animations:completion:這個UIView對象提供的一些實現(xiàn)動畫效果方法中的其中一種。第一個參數(shù)：duration設(shè)置為0.5秒，第二個參數(shù)delay設(shè)置為0.
這個options參數(shù)是用來讓我們選擇動畫進行的方式的，而對于本例來說我們選擇了UIViewAnimationOptionCurveEaseInOut這種效果，而這種效果是一個簡單的ease-in-out的時間曲線。其它的曲線有線性、 ease-in 和 ease-out。
接下來，我們在block代碼塊中設(shè)置了動畫效果最終的狀態(tài)值。核心動畫會自動的在當(dāng)前值和最終值之間流暢的修改尺寸的值，產(chǎn)生流暢的動畫效果。在這個案例當(dāng)中，我希望動畫最終效果是球的尺寸變?yōu)樵瓉碜畛醭叽绲膬杀叮晕以O(shè)置了transform屬性設(shè)置為了一個新的值，他是一個矩陣用來表示如何通過線性代數(shù)方式修改當(dāng)前對象屬性。有多種操縱當(dāng)前View對象的transform屬性的方法（縮放比例、旋轉(zhuǎn)、位置）等，所以蘋果提供了一系列的函數(shù)來修改這些你感興趣的值，我們的例子中就是對縮放比例進行的修改。設(shè)置transform屬性為CGAffineTransformMakeScale(2.0, 2.0)，意味著我們希望除了縮放比例以外的其它屬性值保持不變，而尺寸則變?yōu)樵瓉淼膬杀丁?br> 因為我們并不想在這個動畫結(jié)束以后有其它的動作，所以我們將完成參數(shù)設(shè)置為NULL。

如果我們在block代碼塊中修改幾個View對象相關(guān)的屬性，那么這個屬性值會在動畫持續(xù)時間內(nèi)隨著尺寸大小的改變而改變。現(xiàn)在我們在這個代碼塊中繼續(xù)修改一些其它相關(guān)屬性。

UIView *redBall = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
redBall.backgroundColor = [UIColor redColor];
redBall.layer.cornerRadius = 50;
[self.window addSubview:redBall];

[UIView animateWithDuration:.5 delay:0
    options:UIViewAnimationOptionCurveEaseInOut animations:^{
    redBall.backgroundColor = [UIColor greenColor];
    redBall.transform = CGAffineTransformConcat(
        CGAffineTransformMakeScale(2.0, 2.0),
        CGAffineTransformMakeTranslation(75, 0));
} completion:NULL];

首先，我們將backgroundColor的屬性從紅色變?yōu)榫G色。核心動畫會自動改變并添加中間顏色。
接下來，我們改變了View對象的兩個transform屬性：它的尺寸和位移。位移就是將View對象向上、下、左、右進行移動。在我們的案例當(dāng)中，我們將View對象向右移動了75.我們使用CGAffineTransformConcat()函數(shù)將兩個屬性變化的動畫合并成為一個，然后我們可以將一個單獨的transform矩陣賦值給這個View對象。

現(xiàn)在理解了嗎？雖然矩陣轉(zhuǎn)換有點復(fù)雜并且不是太好理解，但是因為蘋果的整合，所以即使你沒有線性代數(shù)的額背景，也可以實現(xiàn)很好的動畫效果。改變一個View對象的transform矩陣是一個很好地實現(xiàn)動畫的方法。

iOS7里的彈簧動畫

從iOS7開始，蘋果開始給當(dāng)前的動畫系列中添加了彈簧效果動畫方法。實際上，增加的不僅僅是這些。UIKit Dynamics框架是一個融合了物理原理的，你可以給View對象添加一些諸如萬有引力現(xiàn)象、粘性彈簧效果以及外力的效果。
我們可以看一下iOS7更新的對額外參數(shù)實現(xiàn)彈簧效果的動畫代碼塊。

UIView *redBall = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
redBall.backgroundColor = [UIColor redColor];
redBall.layer.cornerRadius = 50;
[self.window addSubview:redBall];

[UIView animateWithDuration:3 delay:0 usingSpringWithDamping:.3
    initialSpringVelocity:0 options:0 animations:^{
    redBall.transform = CGAffineTransformMakeTranslation(300, 0);
} completion:NULL];

這是一個很長的方法，這里出現(xiàn)了一些我們之前方法中所沒有出現(xiàn)過的參數(shù)。包括阻尼和初始的彈簧速度。彈簧的阻尼是一個介于0~1之間的值，1表示的是過阻尼彈簧系統(tǒng)，沒有震蕩效果，0表示的是沒有阻尼的情況，會出現(xiàn)很多的震蕩效果。速度參數(shù)表示的是物體初始狀態(tài)下運動的快慢，這個效果在配合手勢使用的時候是很有用的。
我們例子中，我們設(shè)置彈簧阻尼為0.3（一個合理的值），速度為0.動畫持續(xù)時間被延長了，因為震蕩效果的存在，小球要花一些時間來平復(fù)。
個人認為，iOS7提供的方法并沒有按照我認為的應(yīng)有的方式來運動，或者說他們并沒有提供足夠的接口來改進這個動畫效果。當(dāng)你構(gòu)建了一個Mac APP并且需要這個UIKit Dynamics動畫的時候就悲劇了。如果你的應(yīng)用是iOS7之前的版本呢？因為你并不能在iOS7之前的版本中使用這個動畫效果。
那么我們應(yīng)該如何實現(xiàn)自然地、彈簧效果的動畫呢？有么有其它的選擇方案呢？我下面將給大家介紹的方案絕對算得上是很好的替代方案，我對這兩個框架有著毫不掩飾的喜歡，并且在之前提交的APP中都是用了這兩個框架，而且會在以后繼續(xù)使用。
一個是 JNWSpringAnimation,一個是Pop by Facebook。

JNWSpringAnimation

這個框架是由一個Mac和iOS開發(fā)者所寫的。為了更好地理解為什么它是強大的。我們就不得不再次說說核心動畫了。
像之前提到過的那樣，核心動畫的時間曲線是由貝塞爾曲線定義的。在核心動畫里，你可以設(shè)置線性、ease——in 和ease-in-out or ease-out ，又或者你可以自主的像在CSS中一樣來控制貝塞爾曲線的控制點。
但是，你并不能通過這種方式來定義彈簧動畫，因為它們的形狀太過高級了。那么，我們應(yīng)該怎么辦呢？我們能不能創(chuàng)作一個類似的動畫效果呢？
【動畫圖】
除了之前我們所介紹那種復(fù)雜的不好理解的動畫效果，蘋果還為開發(fā)者提供了一個CAKeyframeAnimation。
CAKeyframeAnimation動畫是一種可以設(shè)置多個值的一種動畫效果，你可以使用它來實現(xiàn)復(fù)雜的動畫效果，比如控件上一秒在這個位置，然后下一秒在下一個方位。
JNWSpringAnimation工作的額方式是，先定義彈簧的阻尼、張力和質(zhì)量，然后告訴你要進行動畫的屬性，然后JNWSpringAnimation會給每一個部分設(shè)置1/60秒時間的動畫，并最終通過調(diào)用CAKeyframeAnimation來實現(xiàn)多個屬性的動畫效果。你所要做的，就是給CALayer設(shè)置keyframe動畫效果，核心動畫會一秒鐘遍歷這些60次知道到達最終值狀態(tài)和動畫完成。

讓我們來看一下如何使用JNWSpringAnimation來對不同的屬性實現(xiàn)不同的彈簧動畫效果。我們將對之前的紅色的球的尺寸從原始變?yōu)樵瓉淼膬杀叮砸环N定義好的曲線效果。

JNWSpringAnimation *scale =
    [JNWSpringAnimation animationWithKeyPath:@"transform.scale"];

在一開始，我們定義一個JNWSpringAnimation對象，一個新的動畫實例，并且命名為scale。我們把初始化值傳遞給了transform.scale，但是這是什么意思呢？這個key path只是一個我們想要實現(xiàn)動畫效果的屬性。這個是CALayer對象的一個屬性，也是我們使用keyframe動畫所真正要操縱的屬性。還記得為什么核心動畫的主力是CALayer么？

JNWSpringAnimation *scale =
    [JNWSpringAnimation animationWithKeyPath:@"transform.scale"];
scale.damping = 9;
scale.stiffness = 100;
scale.mass = 2;

我們也必須要JNWSpringAnimation知道要哪些屬性產(chǎn)生動畫效果，也要知道這些屬性的開始值和終值。

JNWSpringAnimation *scale =
    [JNWSpringAnimation animationWithKeyPath:@"transform.scale"];
scale.damping = 9;
scale.stiffness = 100;
scale.mass = 2;
scale.fromValue = @(1.0);
scale.toValue = @(2.0);

既然JNWSpringAnimation知道動畫的初始值和終值以及我們想要模仿的彈簧效果，現(xiàn)在我們可以將這些效果賦值給我們想要進行動畫的小球的層（CALayer）了。

JNWSpringAnimation *scale =
    [JNWSpringAnimation animationWithKeyPath:@"transform.scale"];
scale.damping = 9;
scale.stiffness = 100;
scale.mass = 2;
scale.fromValue = @(1.0);
scale.toValue = @(2.0);

[redBall.layer addAnimation:scale forKey:scale.keyPath];

核心動畫包含有三個layer層，每個曾都在展示屏幕內(nèi)容中發(fā)揮著至關(guān)重要的作用。

• 模態(tài)層（model layer ）模態(tài)層顯示layer的所有屬性，即使是靜態(tài)的沒有動畫的。例如，我們給一個矩形設(shè)置圓角屬性，我們就是給模態(tài)層的屬性進行設(shè)置。每當(dāng)你修改layer的一個屬性值，都會更新模態(tài)層。模態(tài)層中的屬性在動畫過程中不會改變，并且能夠反映添加動畫之前的一些狀況。
• 展示層（presentation layer）這個層顯示一些正在進行動畫的一些屬性，不應(yīng)該設(shè)置這個層中額一些屬性，相反的，你可以從當(dāng)前l(fā)ayer中讀取一些當(dāng)前動畫中l(wèi)ayer的一些屬性。
• 渲染層（render）用來真正的渲染屏幕上的一些圖形。你不需要和它進行交互或者式知道現(xiàn)在的狀態(tài)。

當(dāng)我們給一個層添加動畫的時候，動畫操縱的是展示層的值，而當(dāng)完成時候，動畫就會自動從當(dāng)前層上移除而且這個層的值也會回到layer真實的靜態(tài)的值。

JNWSpringAnimation *scale =
    [JNWSpringAnimation animationWithKeyPath:@"transform.scale"];
scale.damping = 9;
scale.stiffness = 100;
scale.mass = 2;
scale.fromValue = @(1.0);
scale.toValue = @(2.0);

[redBall.layer addAnimation:scale forKey:scale.keyPath];
redBall.transform = CGAffineTransformMakeScale(2.0, 2.0);

通過手動的將transform的值改為2.0倍，layer也會保持在最終值的狀態(tài)。
你也許會想，當(dāng)我們用UIView動畫的時候并沒有遇到這種問題嘛。UIView的block形式是創(chuàng)建動畫的一種最簡便的方法。但是又要受限于默認的給定的幾種動畫形式或者是彈簧黃動畫的版本問題。如果你想全面控制你的動畫，你就要轉(zhuǎn)用CAAnimation，而JNWSpringAnimation就是其中一個。

JNWSpringAnimation *scale =
    [JNWSpringAnimation animationWithKeyPath:@"transform.scale"];
scale.damping = 13;
scale.stiffness = 540;
scale.mass = 11;

scale.fromValue = @(1.0);
scale.toValue = @(2);

[redBall.layer addAnimation:scale forKey:scale.keyPath];
redBall.transform = CGAffineTransformMakeScale(2.0, 2.0);

這個彈簧動畫效果就會比較慢，而且震蕩幅度相對較大，

下一個例子是沒有震蕩效果，并且會快速的降速并且慢慢的達到最終的狀態(tài)。這就是所說的過阻尼的效果。

// All the other parts of the code are the same
scale.damping = 6;
scale.stiffness = 6;
scale.mass = 1;

接下來我們看看如何實現(xiàn)彈簧效果的旋轉(zhuǎn)動畫：

JNWSpringAnimation *scale =
    [JNWSpringAnimation animationWithKeyPath:@"transform.rotation"];
scale.damping = 10;
scale.stiffness = 100;
scale.mass = 3;

scale.fromValue = @(0);
scale.toValue = @(M_PI_2);

[redBall.layer addAnimation:scale forKey:scale.keyPath];
redBall.transform = CGAffineTransformMakeRotation(M_PI_2);

因為是個旋轉(zhuǎn)動畫，所以初始值和最終值都會是通過弧度制來進行定義的，為了方便，我們使用CGAffineTransformMakeRotation()函數(shù)來設(shè)置模態(tài)層的值。

JNWSpringAnimation *scale = [JNWSpringAnimation
    animationWithKeyPath:@"transform.translation.x"];
scale.damping = 7;
scale.stiffness = 7;
scale.mass = 1;

scale.fromValue = @(0);
scale.toValue = @(400);

[redBall.layer addAnimation:scale forKey:scale.keyPath];
redBall.transform = CGAffineTransformMakeTranslation(400, 0);

為了達到最終效果，我們通過CGAffineTransformMakeTranslation(400, 0)屬性來設(shè)置transform屬性的值。

JNWSpringAnimation *scale = [JNWSpringAnimation
    animationWithKeyPath:@"transform.scale"];
scale.damping = 9;
scale.stiffness = 9;
scale.mass = 1;
scale.fromValue = @(1);
scale.toValue = @(4.0);

[redBall.layer addAnimation:scale forKey:scale.keyPath];
redBall.transform = CGAffineTransformScale(redBall.transform, 4.0, 4.0);

JNWSpringAnimation *rotate = [JNWSpringAnimation
    animationWithKeyPath:@"transform.rotation"];
rotate.damping = 9;
rotate.stiffness = 9;
rotate.mass = 1;
rotate.fromValue = @(0);
rotate.toValue = @(M_PI);

[redBall.layer addAnimation:rotate forKey:rotate.keyPath];
redBall.transform = CGAffineTransformRotate(redBall.transform, M_PI);

第一個動畫是一個尺寸從1.0 ~ 4.0倍大小變化的動畫，第一個不同點是，這個動畫結(jié)合了之前的例子的效果。
這里我們使用了CGAffineTransformScale()而不是CGAffineTransformMakeScale()函數(shù)，CGAffineTransformMakeScale(),使用這個函數(shù)的原因是我們把當(dāng)前的變化效果作為第一個參數(shù)，一起操縱這個layer的轉(zhuǎn)變矩陣。