火星網校
教你如何快速製作彈跳加載動畫
今天教你如何快速製作一個彈跳的加載小動畫，如下圖所示，這個小動畫要快速做出來，需要解決解決兩個技術難點，第一個是食物圖標的彈跳，第二個是文本的彈跳。
食物圖標的彈跳
話不多說，先看看食物圖標的彈跳怎麼做，可以看到其實就是一個簡單的位移動畫，難的地方是節奏的調整。
詳細思路如下：
1、將食物圖標做一個預合成，依次排列，一個圖標隻出現一秒鍾。（這樣做預合成的目的是減少K幀，等下我們可以給整個預合成做位移動畫即可。）
2、現在給整個圖標的預合成做上下運動的動畫，直接K位置關鍵幀即可。
默認效果是下圖這樣子的。
有木有覺得很僵硬？這是因為沒有調節動效節奏的問題，正常的彈跳應該是落下的時候加速，彈起的時候減速。
3、此時我們要調節關鍵幀的節奏了，看好了，這裏有個進階小技巧。選中這些在頂點位置的關鍵幀，然後 Alt + 鼠標左鍵雙擊關鍵幀，彈出關鍵幀速度調節窗口，將速度調為0，影響為80，即可快速做出彈跳動畫。
調節完節奏之後，是不是看起來舒服多了？
4、給預合成加一個旋轉動畫。
So，圖標的彈跳動畫就搞定了。
文本的彈跳
1、這裏先敲上一段文本。然後開啟對稱網格、網格（ 在AE內繪製圖形時，開啟這兩個選項繪製的圖形會更加精準，也更方便繪製哦 ）。
2、選中文本圖層，用鋼筆工具繪製一條蒙版路徑，並使用鋼筆工具的的添加錨點工具，在蒙版路徑中間的位置上加多一個錨點，並拉出控製手柄，方便調節路徑做動畫。
3、展開文本屬性，在路徑選項裏麵，選擇剛剛繪製的蒙版路徑。
4、根據圖標彈跳的節奏，給蒙版路徑K幀，調節向上向下彎曲，做成彈跳的文本。
做完一個彈跳之後，可以複製關鍵幀到下一個位置即可。
文本動畫最終效果如下：
有木有很Q彈的感覺？ 彈彈彈，彈走魚尾紋~
加上圖標的彈跳動畫，最終效果如下：
好了，最後，我們再整體包裝一下，一個簡單的加載動畫作品就誕生了~~
最後
好了，這個小教程到這裏就結束啦，希望可以幫到你！
原文地址：墨染動效（公眾號）
作者：墨染ART
下一篇 6個超級好用的AI冷門幹貨！
-
2101期學員李思庭作品
-
2104期學員林雪茹作品
-
2107期學員趙淩作品
-
2107期學員趙燃作品
-
2106期學員徐正浩作品
-
2106期學員弓莉作品
-
2105期學員白羽新作品
-
2107期學員王佳蕊作品
熱門課程
專業講師指導 快速擺脫技能困惑
相關文章
多種教程 總有一個適合自己專業問題谘詢
你擔心的問題，火星幫你解答-
UE5軟件開發學習路線——揭秘遊戲開發的核心技能 | 火星時代
本文詳細說明了UE5軟件開發的學習路線，助你快速掌握UE5開發技能，邁向遊戲開發行業的巔峰。
-
掌握UE4智慧城市學習，步入火星時代教育 | 虛擬現實學習平台
提供關於UE4智慧城市從初學到精通的全麵指導。在火星時代教育的引導下，我們可以利用虛擬現實技術更深入地理解城市設計的複雜性。
-
本文解析了UI布局設計培訓學校的排名信息，以及如何選一所適合自己的UI設計培訓學校，火星時代作為知名UI設計培訓機構，為你提供......
-
本文將為您介紹哪家UI設計培訓機構更優秀，並詳細分析火星時代教育的優勢。
-
火星時代教育的UE設計短期速成班，專業教師一對一授課，為您的設計夢想加速。
-
了解UI設計官方認證培訓，探索火星時代教育並揭示其在用戶界麵設計領域的影響力。改變你的設計思維，提升你的設計技能。
