如同生活一樣，時(shí)間就是一切
有一個(gè)我至今沒提到的動(dòng)畫的關(guān)鍵成分，但它確實(shí)是創(chuàng)建一個(gè)非常棒的、自然的動(dòng)畫最重要的一塊拼圖。時(shí)間。在一個(gè)動(dòng)作發(fā)生和一個(gè)動(dòng)畫開始之間的時(shí)間。一個(gè)動(dòng)畫持續(xù)的時(shí)間。在兩個(gè)動(dòng)畫開始之間的時(shí)間。
當(dāng)然還有的是，你的動(dòng)畫元素的屬性如何隨著時(shí)間改變，只是動(dòng)畫的本質(zhì)。
最簡(jiǎn)單的可視化說明時(shí)間以及屬性隨著時(shí)間改變的效果的方式如下所示。
一個(gè)線性動(dòng)畫的時(shí)間曲線
圖像代表了一個(gè)動(dòng)畫。垂直坐標(biāo)軸表示你在動(dòng)畫的屬性值，在這個(gè)例子中是元素的比例。對(duì)于這個(gè)動(dòng)畫，我們會(huì)從比例值為0.0開始（對(duì)用戶不可見）并以1.0的比例值結(jié)束（元素的初始尺寸）。
水平軸表示動(dòng)畫開始（經(jīng)過0秒）到你的動(dòng)畫完成的時(shí)間，在這個(gè)例子中，是一個(gè)1秒長(zhǎng)的動(dòng)畫周期。橙色的線準(zhǔn)確地表示了在某個(gè)特定的時(shí)間點(diǎn)屬性值會(huì)變得怎樣。如你所見，橙色的線是完全筆直的，這意味著值隨著時(shí)間改變的比率是一個(gè)定值。對(duì)于這個(gè)動(dòng)畫，比例值隨著一秒的時(shí)間以一個(gè)不變的變更比率從0.0到1.0變化。
這種特殊的時(shí)間曲線說明了一個(gè)線性動(dòng)畫，例如一個(gè)球在一秒時(shí)間內(nèi)從比例0到比例1的線性動(dòng)畫。
這個(gè)球的比例隨著時(shí)間以固定的速度持續(xù)增長(zhǎng)，因?yàn)檫@個(gè)動(dòng)畫有一個(gè)線性的時(shí)間曲線。為什么要稱一個(gè)直線為曲線呢？因?yàn)槟愫苌僮寗?dòng)畫處于線性的時(shí)間下，大多數(shù)的動(dòng)畫時(shí)間圖看起來都是曲線。下面的四個(gè)圖形表示了一些典型的動(dòng)畫時(shí)間。
垂直軸表示你動(dòng)畫的屬性值，例如元素的比例或位置（如上面的圖形所討論的）。垂直軸的底部表示屬性的開始值，也就是為0的Y坐標(biāo)，垂直軸的頂部是屬性的結(jié)束值，也就是為100的Y坐標(biāo)。水平軸表示你的動(dòng)畫從開始到結(jié)束的時(shí)間，整個(gè)軸長(zhǎng)表示動(dòng)畫的周期。線準(zhǔn)確地指示了在特定的時(shí)間點(diǎn)屬性值會(huì)變成什么樣。
曲線的動(dòng)畫時(shí)間看起來是什么樣的？例如一個(gè)小球，以1秒的周期動(dòng)畫，但這次，我們要將其放在一個(gè)緩入緩出動(dòng)畫的球的旁邊，看看有什么不同。
緩入緩出動(dòng)畫的小球的時(shí)間曲線大致如下。
一個(gè)緩入緩出的曲線在很多地方都和線性時(shí)間曲線不同。首先，它確實(shí)是一個(gè)曲線，所以在0.25秒的時(shí)候比例不是0.25，值改變的速率不是恒定的。然后，最容易注意到的，它產(chǎn)生了一種不同的動(dòng)畫動(dòng)作，即慢慢地開始動(dòng)作（好像落后了一點(diǎn)）并且慢慢地結(jié)束（就好像接近最終比例的時(shí)候緩慢地變成最終值）。
線性動(dòng)畫曲線意味著你的屬性值隨著時(shí)間的流動(dòng)以恒定的步伐改變，而各種遲緩的圖形表示屬性值會(huì)緩慢地開始改變，或者緩慢地結(jié)束改變，或者兩者都有。
查看完整合集：https://github.com/Cloudox/Motion-Design-for-iOS
