Animation Properties(譯文)2
回顧上一部分所闡述的內(nèi)容，如何從一個(gè)空白的畫布實(shí)現(xiàn)一個(gè)漂亮的動(dòng)畫？這些動(dòng)畫效果是如何實(shí)現(xiàn)的？這些獨(dú)特的屬性和特征是如何從一個(gè)值變化到另外一個(gè)值？如果你想實(shí)現(xiàn)你腦海中的動(dòng)畫效果，你需要考慮在動(dòng)畫實(shí)施的過程中究竟發(fā)生了些什么，有哪些屬性是被操縱著的。
- 位置 屏幕上控件的X 和Y 坐標(biāo)的改變
- 透明度 屏幕上控件的透明度（從0.0 ~ 1.0）的變化
- 縮放比例 控件相對(duì)于原始尺寸的大小。1.0 意味著控件是原始的寬高，0.5意味著控件的寬高只有原來的一半，0.0則意味著控件的寬度和高度都為0，但是不是說這個(gè)控件不存在，它仍然存在在當(dāng)前坐標(biāo)系里。2.0則意味著控件當(dāng)前的比例是原始比例的2倍。
以上這3個(gè)屬性是用戶在設(shè)計(jì)iOS APP的時(shí)候主要調(diào)整的幾個(gè)屬性值。你可以通過改變這幾個(gè)屬性的值或者是交叉使用來達(dá)到意想不到的動(dòng)畫效果。
那么，拿位置、透明度、縮放比例這三個(gè)屬性能做些什么呢？操縱這些數(shù)據(jù)又能在屏幕上實(shí)現(xiàn)什么效果呢？
位置——position
如果你想移動(dòng)一個(gè)控件，就可以通過操縱他的position位置來實(shí)現(xiàn)這個(gè)效果。將一個(gè)控件向下移動(dòng)意味著你在增加它自身的Y坐標(biāo)值，因?yàn)樽鴺?biāo)系的原點(diǎn)位于APP的左上角。如果你想將一個(gè)控件從屏幕底部移動(dòng)到屏幕的中央位置，應(yīng)該首先將控件的Y坐標(biāo)值設(shè)置為比屏幕Y軸最大坐標(biāo)值大的一個(gè)值，然后將Y值通過動(dòng)畫變?yōu)槠聊恢虚g位置。
透明度
將控件的透明度從100%不透明——>一定的透明度，可以通過改變opaque或者是alpha屬性來改變。這一屬性可以很好的實(shí)現(xiàn)控件從跟背景很好的融合到完全凸顯的一個(gè)狀態(tài)的改變。如果你緩慢的將一個(gè)控件從屏幕上移除的話，控件的透明度會(huì)突然變到0.一般的會(huì)將透明度的變化動(dòng)畫和其它的屬性一起使用來達(dá)到預(yù)期效果，例如：將一個(gè)控件從屏幕之外移動(dòng)到屏幕中（position），并同時(shí)將透明度從0.0（透明）到（不透明）進(jìn)行轉(zhuǎn)換。
縮放比例
如果你想將一個(gè)控件變得更大或者更小（可以是兩個(gè)維度的成比例的變化，也可以是在某個(gè)維度上的縮放變化），可以通過操縱控件的scale屬性來達(dá)到這個(gè)效果。想創(chuàng)建一個(gè)模態(tài)的像iOS7原生的alertView一樣的alert？只需要改變它的視覺比例，首先需要設(shè)置他的比例為1.3x（要比原始尺寸大），然后將比例變到1.0x（原始尺寸）并且透明度從0——>1.0，這樣就可以實(shí)現(xiàn)。
既然我們已經(jīng)介紹過在實(shí)際動(dòng)畫創(chuàng)作過程中應(yīng)用廣泛的屬性，接下來我們就來實(shí)現(xiàn)一些案例效果。
在Jeff的地圖動(dòng)畫效果中同時(shí)使用了位置、透明度和縮放比例這幾個(gè)屬性。
- 最底層的界面緩慢的縮放并且降低了透明度，所以它才能夠很平滑的縮放到底層。
- 底涂層是從一個(gè)大于原始尺寸的比例以及一個(gè)0.0的opacity開始的，然后才變?yōu)樵汲叽绮⑶覍⒉煌该鞫壬仙?.0.并且位置上網(wǎng)上走了。
雖然這位置、透明度和縮放比例可以帶給你一些比較好的動(dòng)畫效果，但在做動(dòng)畫效果的時(shí)候仍然可以同時(shí)使用其他的一些可以做動(dòng)畫的屬性。在這里我們介紹一些在動(dòng)畫效果中經(jīng)常使用的其它幾個(gè)動(dòng)畫屬性。
顏色 你可以像CSS動(dòng)畫一樣，實(shí)現(xiàn)顏色從一個(gè)值變換到另外一個(gè)值。而這個(gè)顏色則可以是字體、背景色或者是界面上的一個(gè)層。你可以在點(diǎn)擊或者是在一個(gè)新的界面出現(xiàn)的時(shí)候?qū)崿F(xiàn)顏色改變的效果。
旋轉(zhuǎn) 界面中的控件可以從0360°之間的任意角度開始，然后最后回到0°。旋轉(zhuǎn)的角度通常是用弧度制來表示（02π），輕微的旋轉(zhuǎn)可以讓平淡的界面變得更加新引人，尤其是當(dāng)你同時(shí)應(yīng)用彈簧效果的時(shí)候。
3D 對(duì)界面上的控件實(shí)現(xiàn)3D動(dòng)畫效果，也就是說控件是在三維角度進(jìn)行運(yùn)動(dòng)，不是背向用戶運(yùn)動(dòng)就是朝向用戶旋轉(zhuǎn)運(yùn)動(dòng)。而旋轉(zhuǎn)角度也會(huì)像2D動(dòng)畫一樣通過弧度制來進(jìn)行表示。
構(gòu)建動(dòng)畫
打比方說，動(dòng)畫是一座房子，那么你至少需要了解建造房屋的斧子、扳手等其他工具，你對(duì)動(dòng)畫的元素和工具很熟悉，也就是那些你想要拿來構(gòu)建動(dòng)畫效果的屬性。但是，知道這些并不足以使你創(chuàng)造出好的動(dòng)畫效果出來。
現(xiàn)在我們應(yīng)該規(guī)劃一下如何實(shí)現(xiàn)一個(gè)動(dòng)畫效果。
- Item最初的屬性是什么？是僅僅位于屏幕之后么？是完全透明的么？是不是縮放大一個(gè)極其微小的尺寸？很大么？
- Item的最終狀態(tài)的屬性是怎樣？現(xiàn)在是處于屏幕的中央么？是完全可見的么？已經(jīng)旋轉(zhuǎn)到一定角度了嗎額？現(xiàn)在是否有一個(gè)不同的背景色了呢
- 這個(gè)動(dòng)畫效果需要持續(xù)多長時(shí)間。
- 動(dòng)畫發(fā)生的時(shí)候Item會(huì)產(chǎn)生什么樣的變化？通常會(huì)有多個(gè)Item發(fā)生動(dòng)畫效果，一個(gè)緊接著另外一個(gè)。
對(duì)動(dòng)畫思路的思考和整理是一件很重要的事情。首先，這樣可以讓你將自己抽象畫的動(dòng)畫效果形象的描述給其他人；然后，這樣也可以使你意識(shí)到思路中的一些尚未解決問題；例如：Item2和Item1是否要同時(shí)開始動(dòng)畫效果啊，或者是是否要有一個(gè)緩慢的動(dòng)畫開始時(shí)間等之類的問題
也許你現(xiàn)在沒有答案，但是只要你開始整理思路，這些答案就會(huì)慢慢出現(xiàn)。
時(shí)間意味著一切
忘了介紹一個(gè)重要的關(guān)鍵因素，一個(gè)在實(shí)現(xiàn)一些漂亮而且自然的動(dòng)畫的時(shí)候，一個(gè)很容易迷惑的問題，時(shí)間。動(dòng)作發(fā)生和動(dòng)畫開始這個(gè)中間的時(shí)間。持續(xù)一個(gè)動(dòng)畫所花費(fèi)的時(shí)間。一個(gè)動(dòng)畫發(fā)生到下一個(gè)動(dòng)畫切入中間的時(shí)間。
而且，動(dòng)畫的本質(zhì)就是動(dòng)畫著的Item的屬性隨著時(shí)間在不停的發(fā)生改變。
最好的抓取動(dòng)畫的各個(gè)時(shí)間的狀態(tài)以及帶來的屬性隨時(shí)間的改變的最好的辦法就是像下面的這張圖一樣。
這個(gè)表格代表了一個(gè)動(dòng)畫類型。Y軸代表的是發(fā)生動(dòng)畫的屬性，在這里我們代表的是Item的縮放比例。在這個(gè)案例當(dāng)中，我們的動(dòng)畫開始從0.0（不可見）到1.0（Item的最原始的比例）；
水平坐標(biāo)軸則表示的是從動(dòng)畫開始到結(jié)束的時(shí)間。綠色的線就表示在各個(gè)特定的時(shí)間當(dāng)前Item的屬性所在的一個(gè)狀態(tài)。就像你看到的，這個(gè)線基本上是直的，也就是說屬性的改變比率是一樣的。這個(gè)例子當(dāng)中，Item是在1秒鐘的時(shí)間內(nèi)，縮放比例線性的從0.0~1.0的。這就是所謂的線性動(dòng)畫.
Ease
Y軸表示的是需要進(jìn)行動(dòng)畫的屬性值，例如是一個(gè)Item的尺寸和位置變化。Y軸的底部的數(shù)值表示的是動(dòng)畫開始時(shí)候的初始值。而Y軸的最大值則表示的是動(dòng)畫結(jié)束的時(shí)候的屬性的狀態(tài)值。X軸表示的是這個(gè)動(dòng)畫總的持續(xù)的時(shí)間。而那條線則表示的是動(dòng)畫效果的各個(gè)階段屬性值的變化。
