火星網校
教你如何快速製作彈跳加載動畫
今天教你如何快速製作一個彈跳的加載小動畫，如下圖所示，這個小動畫要快速做出來，需要解決解決兩個技術難點，第一個是食物圖標的彈跳，第二個是文本的彈跳。
食物圖標的彈跳
話不多說，先看看食物圖標的彈跳怎麼做，可以看到其實就是一個簡單的位移動畫，難的地方是節奏的調整。
詳細思路如下：
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期學員王佳蕊作品
熱門課程
專業講師指導 快速擺脫技能困惑
相關文章
多種教程 總有一個適合自己專業問題谘詢
你擔心的問題，火星幫你解答-
為給新片造勢，迪士尼這次豁出去了，拿出壓箱底的一眾經典IP，開啟了夢幻聯動朱迪和尼克奉命潛入偏遠地帶臥底調查 截至11月24日......
-
此前Q2問答環節，鄒濤曾將《解限機》首發失利歸結於“商業化保守”和“灰產猖獗”，導致預想設計與實際遊玩效果偏差大，且表示該遊戲......
-
2025 Google Play年度遊戲頒獎：洞察移動遊戲新趨勢
玩家無需四處收集實體卡，輕點屏幕就能開啟驚喜開包之旅，享受收集與對戰樂趣庫洛遊戲的《鳴潮》斬獲“最佳持續運營遊戲”大獎，這不僅......
-
說明：文中所有的配圖均來源於網絡 在人們的常規認知裏，遊戲引擎領域的兩大巨頭似乎更傾向於在各自賽道上激烈競爭，然而，隻要時間足......
-
在行政服務優化層麵，辦法提出壓縮國產網絡遊戲審核周期，在朝陽、海澱等重點區將審批納入綜合窗口；完善版權服務機製，將遊戲素材著作......
-
未畢業先就業、組團入職、紮堆拿offer...這種好事，再多來一打！
眾所周知，火星有完善的就業推薦服務圖為火星校園招聘會現場對火星同學們來說，金三銀四、金九銀十並不是找工作的唯一良機火星時代教育......
