使用ivx製做進場動畫的經驗總結

在案例製做中爲了讓展現效果更加精緻，可能用到一些進場的小動效。今天使用時間軸和軌跡作了3個小樣例給你們做爲一個參考。軌跡在以前的帖子裏已經講過了，時間軸可能還比較陌生，能夠把它理解爲一個對軌跡進行管理的組件。由於有時案例中會有不少組件都分別有各自的軌跡，而它們又是爲了實現一個整體效果，這時就會把這些子組件都添加到一個時間軸裏統一管理。

一．循環翻轉

這個動效比較簡單，時間軸內只有一個按鈕對象，咱們將它設置成一個正方形並添加上一個軌跡便可。

由於作的是一個進場動畫的效果，因此咱們須要開啓自動播放和循環播放（動畫出現了卻不動或者就播放一遍會冷場的呀）。原始時長控制的是下面時刻表的長度，時刻越長咱們則能夠添加更多的關鍵幀使控制更加精確，固然咱們也能夠經過改變播放速度設置案例實際運行時時間軸播放的時長。

咱們要作的效果是讓這個正方形繞X軸旋轉180°，再繞Y軸旋轉180°，因此一共須要添加3個關鍵幀。由於是循環播放，那麼最開始的關鍵幀和最末尾的關鍵幀組件的狀態必定要一致，這樣循環播放的時候才能流暢銜接（X軸或Y軸旋轉設置180°與0°靜態看是同樣的）。


二.循環分合

這個動畫咱們要實現的是四個小圓向中間移動直到重疊在一塊兒，而後各自回到初始位置再從新開始下一次播放的效果。咱們在時間軸裏添加好四個橢圓組件，給每一個橢圓添加一個軌跡。

設置上依舊是時間軸的初始狀態與末尾狀態要一致，因此每一個橢圓軌跡的第一個關鍵幀和結尾的關鍵幀都是橢圓的初始座標，而中間的關鍵幀四個橢圓的座標都設置爲中心重疊點便可。


三.循環節奏

循環節奏的效果用到了9個矩形，咱們須要它們呈一種階梯變化的效果。首先給每一個矩形設置原點縱座標爲50%，這樣咱們只須要在不一樣的關鍵幀中更改他們的高度便可了。（下圖只能看見7個矩形是由於有2個矩形高度爲0）


仍是先設置初始狀態和末尾狀態。我這裏設置的是從左到右9個矩形的初始和末尾幀高度依次爲0,16,32,48,64,48,32,16,0。同時還要注意一個對應關係，時間軸時長8s，則矩形從0高度變換到最大高度再變換到0高度這一個週期下來用時也應該是8s，因此從0高度到最大高度間隔4s，每秒變化16px。

而後，咱們只須要找出每一個矩形在本身的軌跡中處於最大高度和0高度的時間點添加關鍵幀便可。矩形1的軌跡在第0秒和第8秒都處於0高度，則第4秒添加關鍵幀設置矩形高度爲最大高度64px。矩形2在第0秒高度已是16px，因此它的最大高度時間點比矩形1提早1秒，即第3秒。同理，不難找出其它矩形處於最大高度的時間點，而矩形的0高度時間點又和最大高度時間點相差4秒，因此也很容易一個一個揪出來啦。

總結

使用軌跡的多數狀況下，咱們都是進行座標或者旋轉角度之類的改變，這就須要咱們創建一種時間與空間上的映射關係，算好每一個時間段內座標或者旋轉角度這些數值的變化量。還有就是關鍵幀的選取，咱們須要作的是找出組件在運動過程當中那些重要的轉折點，而不是去關心組件每時每刻的狀態，那樣作的話在設計和維護中都會增長很大工做量的。