言

上個周寫了一篇大屏開發(fā)經(jīng)驗總結(jié)，引來了不少朋友圍觀，還未瀏覽的朋友可以直接跳轉(zhuǎn)：juejin.cn/post/736541…

很多前端在開發(fā)大屏的時候，一般都會涉及很多動畫效果開發(fā)，但我發(fā)現(xiàn)大部分前端動畫開發(fā)能力薄弱。

今天，我給大家介紹一下我常用到的一些比較好用的動畫開發(fā)庫，基本上能夠滿足99.9%的業(yè)務(wù)開發(fā)需求，讓產(chǎn)品經(jīng)理和UI小姐姐看完后給你狂豎大拇指，記得收藏點贊噢~

gsap

做前端動畫，我強推這個框架，真的很好用！

GSAP（GreenSock Animation Platform）是一個用于創(chuàng)建高性能、跨瀏覽器的動畫的JavaScript庫。它提供了許多強大而靈活的API，允許開發(fā)者創(chuàng)建各種復(fù)雜的動畫效果。

使用起來非常簡單，我們實現(xiàn)一個動畫，將.box這個元素在x軸方向向右移動200px，耗時2秒

  gsap.to(".box", { 
    x: 200,
    duration: 2
  });

當然，這只是gsap功能的冰山一角，它還有很多可以讓我們高效工作的能力：

1. CSS屬性動畫：可以對幾乎所有CSS屬性進行動畫處理，包括不常用的屬性。
2. 時間線控制：提供時間線功能，可以方便地控制動畫的序列和并行。
3. 緩動函數(shù)：內(nèi)置多種緩動函數(shù)，可以創(chuàng)建更自然的運動效果。
4. SVG和Canvas動畫：支持SVG和HTML5 Canvas元素的動畫。
5. 復(fù)雜動畫路徑：可以創(chuàng)建復(fù)雜的運動路徑，實現(xiàn)復(fù)雜的動畫效果。
6. 3D動畫：雖然GSAP主要用于2D動畫，但也支持一些3D動畫效果。
7. 插件系統(tǒng)：有豐富的插件系統(tǒng)，可以擴展其功能，比如MorphSVG插件可以創(chuàng)建SVG圖形的形變動畫。
8. 性能優(yōu)化：GSAP在性能上做了大量優(yōu)化，可以處理大量的動畫而不影響頁面性能。
9. 跨瀏覽器兼容性：確保動畫在各種瀏覽器和設(shè)備上都能平滑運行。

GSAP的一個關(guān)鍵特點是它對性能的優(yōu)化，它使用優(yōu)化的算法和瀏覽器的請求動畫幀（requestAnimationFrame）API來實現(xiàn)流暢的動畫效果。

此外，GSAP的API設(shè)計得非常人性化，易于學(xué)習(xí)和使用，同時它還提供了大量的文檔和示例來幫助開發(fā)者快速上手。

gsap官方地址：gsap.com

lottie

Lottie 是一個由愛彼迎（Airbnb）開發(fā)的開源動畫庫，主要用法就是UI設(shè)計通過專業(yè)動畫軟件（如After Effects）設(shè)計好之后，輸出json文件，然后通過 Lottie 將這些動畫無縫地集成到移動app和網(wǎng)頁中。

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

Lottie優(yōu)勢：

1. After Effects 兼容性：Lottie 支持將 After Effects 項目（.json 格式的動畫數(shù)據(jù)）直接轉(zhuǎn)換為可在應(yīng)用和網(wǎng)頁中使用的動畫。
2. 跨平臺：Lottie 支持多種平臺，包括 Android、iOS、Web（通過 React Native、Vue、Angular 等框架）。
3. 性能炸裂：Lottie 使用原生的圖形和動畫代碼，這意味著動畫性能通常比使用 CSS 或 JavaScript 直接編寫的動畫更優(yōu)。
4. 定制化：動畫可以被定制和動態(tài)修改，例如更改顏色、大小、速度等。
5. 輕量級：Lottie 動畫文件體積小，因為它們只包含關(guān)鍵幀數(shù)據(jù)，而不是完整的視頻或序列幀。
6. 易于使用：Lottie 提供了簡單的 API，使得在項目中集成動畫變得非常容易。
7. 動畫效果豐富：由于它基于 After Effects，Lottie 可以支持復(fù)雜的動畫效果，包括3D效果、遮罩、表達式等。
8. 實時渲染：Lottie 動畫是實時渲染的，這意味著動畫可以在不同的屏幕尺寸和分辨率下保持高質(zhì)量。
9. 社區(qū)支持：作為一個開源項目，Lottie 有一個活躍的社區(qū)，不斷有新的功能和改進被加入。
10. 動畫緩存：Lottie 支持動畫的緩存，可以提高重復(fù)播放動畫的性能。

Lottie 的使用場景非常廣泛，從簡單的加載指示器到復(fù)雜的交互式動畫，都可以用 Lottie 來實現(xiàn)。

Lottie官方地址：airbnb.io/lottie/#/we…

React Spring

React Spring：react開發(fā)者的福音，這款框架是基于React的動畫庫，它使用基于物理的動畫，可以創(chuàng)建非常自然和流暢的動畫效果。

初始化一個簡單的動畫，讓div從左向右移動：

import { useSpring, animated } from '@react-spring/web'

export default function MyComponent() {
  const springs=useSpring({
    from: { x: 0 },
    to: { x: 100 },
  })

  return (
    <animated.div
      style={{
        width: 80,
        height: 80,
        background: '#ff6d6d',
        borderRadius: 8,
        ...springs,
      }}
    />
  )
}

React Spring官方地址：www.react-spring.dev/docs/gettin…

Anime.js

Anime.js：一個輕量級的JavaScript動畫庫，它使用CSS屬性和SVG，可以創(chuàng)建平滑的CSS和SVG動畫

初始化一個簡單的動畫：

anime({
  targets: '.css-prop-demo .el',
  left: '240px',
  backgroundColor: '#FFF',
  borderRadius: ['0%', '50%'],
  easing: 'easeInOutQuad'
});

說實話，看api，有點類似于gsap動畫庫，也不知道它倆是怎么個關(guān)系~

Anime.js官方地址：animejs.com/documentati…

其他動畫庫

還有很多其他的動畫庫，但是作者本人還沒用過，如果有用過的小伙伴也可以在評論區(qū)發(fā)表一下使用體驗或者看法。

1. Framer Motion：也是一個基于React的動畫庫，它提供了一個簡單的API來創(chuàng)建動畫和交互效果。
2. Velocity.js：一個強大的動畫引擎，可以與jQuery結(jié)合使用，提供豐富的動畫效果。
3. Popmotion：一個功能全面的動作和動畫庫，支持React和非React環(huán)境。
4. Web Animations API：是現(xiàn)代瀏覽器提供的原生JavaScript動畫API，允許開發(fā)者以編程方式創(chuàng)建復(fù)雜的動畫。
5. KUTE.js：一個輕量級的動畫庫，專注于性能和易用性，支持CSS屬性、SVG和自定義屬性的動畫。
6. Flickity：雖然主要是一個輕量級的畫廊和卡丁車庫，但它也提供了一些基本的動畫功能。
7. GreenSock Draggable：GSAP的一個插件，允許元素的拖放，可以創(chuàng)建交互式的動畫效果。
8. CyberConnect：一個基于Web Animations API的庫，可以創(chuàng)建復(fù)雜的動畫和過渡效果。

總結(jié)

目前筆者用的比較多的是gsap和lottie，特別是在threejs項目中，用gsap做動畫再合適不過，而lottie大部分時間我是用來展示一些復(fù)雜的無交互的動畫開發(fā)。

作者：攻城師不浪
鏈接：https://juejin.cn/post/7367696432935419944

用Adobe After Effects (AE) 制作MG動畫是一種常見的做法，盡管AE的學(xué)習(xí)曲線相對較高，但通過逐步學(xué)習(xí)和實踐，你可以掌握這項技能。下面是使用AE制作MG動畫的基本流程和操作：

1. 準備階段

• 規(guī)劃概念: 確定MG動畫的主題、故事板和設(shè)計風(fēng)格。
• 收集素材: 搜集所需的圖片、音頻、視頻和其他視覺元素。
• 創(chuàng)建故事板: 設(shè)計每個場景的布局和動作流程。

2. 創(chuàng)建項目

• 新建項目: 打開AE，點擊“文件” > “新建” > “項目”，命名項目并保存。
• 新建合成: 在項目面板中點擊“新建” > “合成”，設(shè)定合成的尺寸（通常為1920x1080像素）、幀速率、持續(xù)時間和背景顏色。

3. 構(gòu)建動畫

• 繪制元素: 使用形狀圖層工具（矩形、橢圓、多邊形等）來繪制靜態(tài)元素。
• 添加文本: 在工具欄中選擇文本工具，輸入文字并調(diào)整字體、大小和顏色。
• 創(chuàng)建動畫: 使用關(guān)鍵幀來定義動畫的起始和結(jié)束狀態(tài)，例如移動、旋轉(zhuǎn)、縮放等。
• 應(yīng)用效果: 為元素添加各種視覺效果，如陰影、發(fā)光、模糊等。

4. 動態(tài)元素

• 使用鋼筆工具: 繪制路徑和動態(tài)線條，為指針、箭頭等創(chuàng)建流暢的動畫。
• 路徑動畫: 將元素沿著特定路徑移動，可以通過繪制路徑來實現(xiàn)。

5. 時間軸管理

• 調(diào)整層順序: 在時間軸面板中管理各個圖層的順序。
• 使用預(yù)合成: 對復(fù)雜的元素或場景進行預(yù)合成，便于管理和編輯。

6. 視覺效果與轉(zhuǎn)場

• 過渡效果: 為場景間的切換添加過渡效果，比如淡入淡出、滑動等。
• 視覺特效: 應(yīng)用AE內(nèi)置的效果插件，或者安裝第三方插件來增強視覺效果。

7. 后期處理

• 添加音頻: 導(dǎo)入背景音樂或音效，并調(diào)整音量和同步點。
• 顏色校正: 使用色彩校正工具調(diào)整整體色調(diào)和對比度。
• 導(dǎo)出視頻: 設(shè)置輸出格式、分辨率、碼率等參數(shù)，導(dǎo)出最終的視頻文件。

8. 實踐案例

• 示例一: 制作一個倒計時三秒的MG動畫。新建合成，持續(xù)時間為10秒。創(chuàng)建純色背景層。使用形狀圖層繪制圓圈，添加動畫效果。調(diào)整動畫的關(guān)鍵幀以實現(xiàn)所需的效果。
• 示例二: 制作指針動畫。使用矩形工具和橢圓工具繪制底圖和橢圓。復(fù)制橢圓并填充不同顏色，制作刻度。使用鋼筆工具畫出指針。調(diào)整刻度、指針和表盤的旋轉(zhuǎn)。開啟運動模糊選項，調(diào)整運動模糊效果。
• MG動畫的風(fēng)格多種多樣，可以適應(yīng)不同的應(yīng)用場景和創(chuàng)意需求。以下是幾種常見的MG動畫風(fēng)格：

1. 扁平化風(fēng)格：簡潔、直接，色彩鮮明，使用簡單的形狀和顏色。
2. MBE描邊風(fēng)格：一種獨特的輪廓描邊風(fēng)格，邊緣通常帶有圓形或圓角。
3. 線條風(fēng)格：使用線條來構(gòu)成畫面，可以是精細的手繪線條或簡單的幾何線條。
4. 手繪插畫風(fēng)格：給人以溫馨、自然的感覺，通常使用手繪的線條和色彩。
5. 點線科技風(fēng)格：具有高端、大氣的特點，以科技感的線條為主。
6. 3D風(fēng)格：使用電腦生成的3D模型和動畫，給人一種立體、真實的感覺。
7. 抽象風(fēng)格：使用抽象的形狀和顏色，以及非線性的剪輯。
8. 文字動畫風(fēng)格：主要通過文字的變化來產(chǎn)生動態(tài)效果。
9. 科幻風(fēng)格：具有未來感和科技感，主要表現(xiàn)在機械設(shè)備、太空、機器人等方面。
10. 奇幻風(fēng)格：表現(xiàn)為神秘、異域、魔法等元素，營造神話般的氛圍。
11. 戰(zhàn)斗風(fēng)格：以激烈的場面、精彩的動作為主要特點。
12. 競技風(fēng)格：以運動、比賽、競技為主題。

關(guān)于MG動畫相關(guān)的崗位素材，你可以從以下幾個途徑尋找：

• 在線素材平臺：如 Shutterstock, Adobe Stock, Pond5, VideoHive 等，這些網(wǎng)站提供大量的MG動畫模板和素材。
• 專業(yè)社區(qū)：Behance, Dribbble 和 ArtStation 等網(wǎng)站上有許多專業(yè)的設(shè)計師分享的作品，可以從中獲取靈感或聯(lián)系作者定制素材。
• 動畫制作軟件內(nèi)置資源：Adobe After Effects, Blender, Toon Boom 等軟件通常會有內(nèi)置的模板和資源庫。
• 專門的MG動畫素材網(wǎng)站：如 Artlist, PremiumBeat 等專注于視頻和動畫素材的網(wǎng)站。
• 以下是一些常用的MG動畫制作軟件：

1. Adobe After Effects：
2. 專業(yè)級別的動畫制作軟件，廣泛應(yīng)用于影視后期制作和MG動畫創(chuàng)作。
3. 支持2D和3D動畫，可以創(chuàng)建復(fù)雜的動畫效果。
4. 學(xué)習(xí)曲線較陡峭，但對于專業(yè)人士來說是非常強大的工具。
5. Adobe Animate（原名Flash Professional）：
6. 適用于創(chuàng)建矢量動畫和交互式內(nèi)容。
7. 特別適合制作基于Web的動畫，支持HTML5 Canvas, WebGL, Flash/SWF 等輸出格式。
8. Cinema 4D：
9. 一款3D建模和動畫軟件，也常用于MG動畫的制作。
10. 提供了直觀的界面和強大的3D渲染功能。
11. Blender：
12. 免費開源的3D建模和動畫軟件。
13. 可以用來制作高質(zhì)量的MG動畫，支持多種渲染引擎。
14. Toon Boom Harmony：
15. 高級的2D動畫制作軟件，廣泛應(yīng)用于電視動畫和電影制作。
16. 提供了高級的繪畫和動畫工具。
17. Moho (Anime Studio)：
18. 適合制作2D動畫，特別是骨骼綁定技術(shù)使得角色動畫更加容易。
19. 提供了直觀的界面和強大的動畫工具。
20. 萬彩動畫大師：
21. 入門級的MG動畫制作軟件，易于上手。
22. 內(nèi)置了豐富的動畫模板、場景和特效，適合初學(xué)者。
23. Renderforest：
24. 在線動畫視頻制作平臺，無需下載軟件。
25. 提供了大量的模板和預(yù)設(shè)動畫效果，適合社交媒體營銷等場景。
26. Biteable：
27. 在線視頻制作工具，適合快速套用模板制作視頻。
28. 適合社交媒體平臺上的視頻制作，也有MG動畫模板。
29. 秀展網(wǎng)：
30. 在線制作MG動畫的網(wǎng)站，無需下載軟件。
31. 提供大量模板，支持云端同步，方便異地編輯。

MG動畫個人怎么變現(xiàn)

1. 承接項目：
2. 承接來自企業(yè)和個人客戶的定制項目，如制作產(chǎn)品介紹、品牌宣傳、教育課程等內(nèi)容的MG動畫。
3. 通過自由職業(yè)者平臺（如Upwork、Freelancer、豬八戒網(wǎng)等）尋找客戶和項目。
4. 在線課程和教程：
5. 制作關(guān)于MG動畫制作技巧的在線課程，在各大在線教育平臺（如Udemy、Coursera、騰訊課堂等）銷售。
6. 發(fā)布免費的教程吸引粉絲，然后推出付費的進階課程或一對一輔導(dǎo)服務(wù)。
7. YouTube頻道：
8. 創(chuàng)建一個YouTube頻道，發(fā)布創(chuàng)意的MG動畫作品，積累觀眾并通過YouTube廣告分成計劃獲得收入。
9. 也可以通過頻道推廣自己的其他業(yè)務(wù)，如定制服務(wù)或產(chǎn)品。
10. 社交媒體營銷：
11. 利用微博、抖音、快手等社交媒體平臺發(fā)布作品，吸引粉絲并推廣自己的服務(wù)。
12. 通過社交媒體上的影響力接廣告合作。
13. 制作和銷售模板：
14. 設(shè)計并銷售MG動畫模板給需要快速制作內(nèi)容的企業(yè)和個人。
15. 可以通過專門的市場（如VideoHive、Motion Array等）出售這些模板。
16. 制作微課或短片：
17. 制作教育性質(zhì)的微課或者短片，用于在線教育平臺或者企業(yè)的內(nèi)部培訓(xùn)。
18. 與教育機構(gòu)合作，為其開發(fā)教學(xué)資源。
19. 制作微信表情包：
20. 制作具有個性的MG動畫表情包，在微信表情開放平臺上線，通過下載和贊賞等方式獲取收益。
21. 個人品牌商品化：
22. 將自己的MG動畫形象或設(shè)計印刷在T恤、杯子等商品上，通過電商平臺（如淘寶、京東等）銷售。
23. 版權(quán)授權(quán)：
24. 將自己的原創(chuàng)MG動畫作品授權(quán)給其他媒體平臺使用，比如授權(quán)給電視臺、電影制片廠等作為背景動畫。
25. 參與比賽和獎項：
26. 參加國內(nèi)外的動畫競賽，如果獲獎可以提高知名度，進而帶來更多的商業(yè)機會。
27. 開設(shè)個人工作室：
28. 如果條件允許，可以開設(shè)自己的動畫工作室，提供全方位的動畫解決方案，包括創(chuàng)意策劃、腳本編寫、動畫制作等。

通過以上步驟，你可以開始在AE中制作簡單的MG動畫。隨著經(jīng)驗的積累，你會學(xué)會更多高級技巧和技術(shù)。希望這能幫助你入門AE的MG動畫制作！