AE打造炫酷實用加載動畫圖文教程

練習加載動畫的時候，發現一個很簡單的動效也有很多小的知識點，總結一下分享大家，希望對有需要的人有所幫助！接下來看下這篇AE打造炫酷實用加載動畫圖文教程吧！

先來看一下效果

第一步    建立合成800*800（大小自己決定就好），背景為#000000

第二步   繪製三角形

畫一個三角形方法很多，這裏隻說我用到的這種。

在合成麵板創建一個形狀圖層，點擊添加，選擇多邊星形，將“點”設置為3

將三角形調整到合適的大小和位置，繼續點擊添加“填充”設置三角形的顏色；

添加“描邊”將三角形設置為圓角（描邊的“線段連接”選擇為“圓角連接”），根據需要設置描邊寬度，

描邊的顏色與填充顏色保持一致，以下是我用參數

繪製好之後，複製一層（Ctrl+D），調整一下顏色

第三步   移動位置

首先將兩個三角形的初始位置調整好，兩個三角形呈對角樣子，且稍有重合（可根據個人喜好決定是否重合），如圖

選中兩個三角形（記得給圖層命名以便於區分）點擊“p”位置選項，在起始點打上關鍵幀；

依次調整三角形的位置，關鍵幀停留到1S處，

將白色三角形向左平移至黃色三角形的上方，黃色三角形向右平移至白色下方，如圖

繼續調整位置，在2S處打上關鍵幀，

將白色三角形沿斜線向下，黃色三角形沿斜線向上，移動路徑如圖

繼續移動位置，在3S處打上關鍵幀，直接複製0S處的關鍵幀即可，

讓這個移動路徑形成一個閉合的三角形。

注意：移動的路徑是一個曲線三角形，這裏選擇鋼筆工具，

點擊一下錨點，曲線變成直線了（相當於PS中的轉換點工具），如圖

選中兩個三角形的位置關鍵幀，給每個幀設置緩動，快捷鍵F9（或者點擊動畫-關鍵幀輔助-緩動），優化動畫效果

第四步   添加空圖層

新建一個空圖層，添加旋轉動畫，快捷鍵R。

在初始位置打上關鍵幀，旋轉度數為0；移動關鍵幀指標到3S處（即結束點），

將旋轉圈數設置為-1，即逆時針旋轉360度（與剛剛設的三角形移動方向有關）。

隱藏空圖層，將兩個三角形的父級選為剛才創建的空圖層，為動畫添加上一個旋轉的效果，使動畫銜接更加流暢，如圖

好了，枯燥的過程終於過去了，來看看成果吧

作者：沉溺妖妖

來源：UI中國