教程：掃碼付款小動效
原作者：Nikita Melnikov（dribbble）
首先，這個動效的設計師是我在dribbble上非常喜歡的一位設計師，他製作了好多有趣的動效，無論是2D還是3D的，雖然現在無法原創出像他的那麼優秀的作品，但是對於他作品的臨摹還是可以讓我獲益匪淺。
那麼拿到這麼一個動圖，我們首先需要做的是在AI中繪製我們需要的一些基本圖形，這裡我已經繪製好了，並作為附件進行了上傳。拿到AI檔案之後不要上手就跟著本篇教程做，先想一下為什麼我會繪製這幾張靜態圖，以及為什麼我會將一個畫面分成多個層。
接著我們就可以匯入AE裡進行動效製作了（30fps）。首先我們需要得到這樣的一個動畫效果。 
這裡需要製作兩個動畫，一個是杯子出現，一個是那個運動活躍熱氣。
首先是杯子，這裡先給大家詳細的關鍵幀數值，在進行一些說明。
杯身：錨點在杯子底部
0:00:00:00
位置：383.5，628.7
縮放：0，0
旋轉：+8
0:00:00:12
位置：405.3,339.8
0:00:00:14
位置：405.3，346.1
0:00:00:20
旋轉：-5.4
0:00:00:23
位置：399.5,400.7
縮放：100,100
0:00:00:24
旋轉：+3.2
0:00:00:26
旋轉：-1.6
0:00:00:27
旋轉：0
蓋子（這裡蓋子分成了兩層，不過上層的父級連結底層的蓋子，底層的錨點也同樣在底部）
0:00:00:09：
位置：404.6,237.8
縮放：30.6,30.6
0:00:00:17
位置：402.5,132.1
0:00:00:19
位置：402.5,132.1
0:00:00:24
位置：405.2,226.5
0:00:00:25
位置：402.4,239.6
0:00:00:26
位置：395.4,238.6
縮放：100,100
旋轉：+3.2
0:00:00:27
位置：397.4,239.1
0:00:00:28
位置：398.9,239.1
旋轉：-1.6
0:00:00:29
旋轉：0
到這裡就完成了我杯子的動畫，至於k幀，這立說明一下原因，首先我們可以觀察到杯身是從下方逐漸放大出現的，先上升後下降，並在現將後由於慣性搖晃了幾下。同樣的事也發生在蓋子上。所以對於杯身，在0幀的位置我們讓他位於合成的下部分，縮放為0，而在杯身上升到最高的地方時，我複製了做高出的位置關鍵幀，讓他在最高處多待幾幀以便模擬滯空效果，最終杯子落下，同時大小回到（100,100）。至於旋轉，我需要讓他滿足能量守恆，所以可以看到數值：+8，-5.4，+3.2，-1.6,0，這些數的絕對值在減小，而且這些關鍵幀之間的時間也越來越短，這裡指的一提的是，我並沒有在杯身到達（100,100）時使旋轉為-5.4，而是將-5.4的關鍵幀移到了之前，這樣我們的動效就沒有卡頓感，不會是一個一個區間動畫，而是一個動畫執行的時候，別的動畫也同時執行，這些從上圖可以十分直觀的看出來。當然同樣的規律也適用於蓋子，而且我甚至將杯身旋轉的最後3幀直接複製過來了，原因是這時蓋子已經落在了杯身上，他會跟著杯身一起運動，不過蓋子下落的力會讓蓋子反彈起來，所以我們將蓋子旋轉關鍵幀在時間軸上向後偏移幾幀，這也是動畫十二原則的第五條中的動作重疊原理的應用。還有一個大家很容易注意到的，我在位置上手動k了好多幀，這裡我是讓蓋子的錨點與杯身頂部的中點在y軸上大致相同，至於為甚麼不完全相同，因為形變，空氣阻力都是一些不定因素。最後就是關鍵幀速度曲線的調節，這個其實大體的節奏很容易調節，我們可以想象一下，將籃球向上丟擲最終落地，它的y位置上的速度一定是先快後慢直至0，此時也到達了最高點，然後下落，速度隨著下降越來越快，以這種物理規律推下去，而想要的到最完美的節奏需要不斷不斷的嘗試與經驗，所以大家如果單純按照上面的時間k幀，在最後的蓋子位置k幀可能很難的到自己想要的那種感覺。
接下開說的就是熱氣的製作：
首先，我們用鋼筆工具繪製一條直線，新增 Z字形 ，修改大小，每段的背脊的引數。在新增 修剪路徑 ，降低結束的值，確定我們想要的長度，然後滑鼠拖動偏移的數值，會發現我們想要的效果已經大致得到了，不過他的位置一直在改變，所以我們需要給他的位移k幀，讓熱氣看起來是在原地變化。 
下圖數值:
0:00:00:00
偏移：12.7
位置：390，-138
0:00:05:29
偏移：324.6
位置：-246.4.-138
這兩幀的圖形在調節之後是相同的，將0:00:00:00~0:00:05:29的動畫在0:00:06:00複製一份，當然在僅在0:00:06:00複製0:00:00:00的數值，並給偏移以及位置加上loopOut（“cycle”）表示式也能完成同樣的效果。
接下來是二維碼的動畫，這裡二維碼的白底是一個簡單的縮放的動畫，不多贅述，至於二維碼本身的圖形除了整體的縮放還有單獨的縮放。這裡進入內容，組，變化：組，調節縮放的數值做動畫。 
還有一點，這裡選中某個組，我們用錨點移動工具，同樣也是可以移動這個組的錨點的，然後給縮放新增彈性表示式（百度就有）。這裡的話，我用的是motion 2 自帶的新增彈性動畫功能，使用方法，選中關鍵幀，點選下圖的按鈕。然後在效果控制元件裡面會出現3個滑塊，第一個表示振幅，數值越大搖晃的範圍越大，第二個表示頻率，數值越大搖的越快，第三個表示阻力，數值越大搖晃趨於平穩的時間越快。如果用滑塊來控制彈性表示式的話（無非是將amp，freq，decay連結出來，用滑塊控制數值），控制原理是相同的。當然，關鍵幀（一定要是線性關鍵幀，不要緩動）之間的時間長短也會有不同的影響，相距的時間越短越明顯。我的三個數值為10,40,80. 
接下來是手機出現的動畫，這裡需要將手與手機先分離，就是手機與手的圖層複製一層，刪除內容裡的組，一個留下手，一個留下手機。（這裡如果在AI裡面分好的話會省時間）。
手機繫結父級為手，對手做縮放與旋轉 ，必要的話可以加上一點位置動畫來豐富動畫，對旋轉做彈性效果，用上述兩種方法一種都行。同樣手機自身也有一個搖晃動畫，同樣給旋轉一個彈性效果。手機與手出現的同時，二維碼移動至手機螢幕。
然後是掃碼動畫，這個動畫，顯示繪製一個矩形，然後修剪路徑得到一個角，將形狀複製一層，改變修改路徑的偏移引數，用此方法做出四個角，做縮放動畫，並給他加一個alpha遮罩為手機的螢幕。 
聚焦後，有個手靠近二維碼遠離我們的動畫，掃描完成又有一個拉近的動畫，這裡就是簡單的縮放。然後二維碼有一個被掃描的動畫，在講之前的二維碼動畫時，大家細心的話，會發現還有一層二維碼，就是現在的這個動畫，需要兩個，因為我改變的二維碼各個組的錨點，這樣縮放動畫較之前是不同的，而且這裡我用的是緩動關鍵幀，沒有使用彈性動畫，因為使用彈性縮放會看起來特別的彆扭，大家可以自行嘗試一下。然後是大拇指的動畫，這裡沒有別的什麼方法就只有k幀，我是錄了一個自己使用支付寶掃碼的視訊，對照著自己的手指做的動畫，為此還損失了3元（難受）。
路徑的關鍵幀也不是很複雜，而且經過觀察手指按壓是先快後慢。後面的選擇價格的手指滑動也是用的路徑動畫，而且手指滑動之後有一個短暫的停頓時間。這些都是我自己觀察自己的付款視訊發現的。
然後就是歐元的付款了。 
有一定ae基礎的一下就能看出來就是一個遮罩動畫。這裡我輸了0,1,2三個文字，並且將他們按上面排列，1父級為0,2父級為1，這樣0向上移移動，1,2也會一起運動。來到合成外。畫一個下圖的矩形作為該合成的alpha遮罩，當然用蒙版也是可以的。 
還有一個付款完成的對勾動畫，我們用鋼筆繪製一個√，然後新增修建路徑，對結束K幀0->100，如果你的動畫是反的，那是因為你是從右往左畫的，解決方法有兩個，一個是結束設定為100，修改開始的引數。另一個是點選如下按鈕。這個是反向路徑。 
做到這裡我們已經大致完成了動畫了，還差最後一步，手機變奶茶，這裡就是硬切動畫。首先我們給手旋轉做彈性動畫，然後在過程中我們切斷手機圖層（alt+]），讓他在這個時間之後就沒有了，然後我們將第一步做的奶茶動畫的合成拿來，改變一下旋轉，讓他的旋轉與手機的旋轉一致，同時調節一下縮放讓手握住奶茶，然後在同樣的時間點讓奶茶動畫出現（alt+[）,同時父級連結手。由於手機，奶茶的父級都為手，而且銜接的那個時間點旋轉的數值相同，所以即便是硬切，節奏也是相同的，給錢我們的感覺就像是變魔術，手機變成了奶茶。
做到這想必大家還有一個問題，手機，奶茶都在大拇指與手指的上面，這裡是最後的處理了，將已經完整的做好的帶有全部動畫的手的合成複製一層（這裡是在專案裡複製，不要直接在圖層面板複製合成，那樣修改複製出來的，原合成的內容也會跟著一起修改），順序放在最上面，然後獨顯手指與大拇指圖層。
重要到真正的最後了，輸出視訊，ps轉gif，完成了。 