前端開(kāi)發(fā):JavaScript 動(dòng)畫(huà)庫(kù)
文為大家推薦一些實(shí)用的JavaScript 動(dòng)畫(huà)庫(kù),希望在今后的前端過(guò)程中有所幫助!
1、jquery.transit(擁有超級(jí)流暢的 CSS3 變換和過(guò)渡的 jQuery 插件)
2、velocity(加速 JavaScript 動(dòng)畫(huà))
3、bounce.js(可以立刻創(chuàng)建有趣的 CSS3 動(dòng)畫(huà))
4、GreenSock-JS(適用于所有主流瀏覽器的高性能 HTML5 動(dòng)畫(huà))
5、TransitionEnd(是一個(gè)運(yùn)用 transitonend 事件的、跨瀏覽器的庫(kù))
6、Dynamics.js(用于創(chuàng)建基于物理知識(shí)的 CSS 動(dòng)畫(huà)庫(kù))
切圖 qietu(.com)
言
上個(gè)周寫(xiě)了一篇大屏開(kāi)發(fā)經(jīng)驗(yàn)總結(jié),引來(lái)了不少朋友圍觀,還未瀏覽的朋友可以直接跳轉(zhuǎn):juejin.cn/post/736541…
很多前端在開(kāi)發(fā)大屏的時(shí)候,一般都會(huì)涉及很多動(dòng)畫(huà)效果開(kāi)發(fā),但我發(fā)現(xiàn)大部分前端動(dòng)畫(huà)開(kāi)發(fā)能力薄弱。
今天,我給大家介紹一下我常用到的一些比較好用的動(dòng)畫(huà)開(kāi)發(fā)庫(kù),基本上能夠滿足99.9%的業(yè)務(wù)開(kāi)發(fā)需求,讓產(chǎn)品經(jīng)理和UI小姐姐看完后給你狂豎大拇指,記得收藏點(diǎn)贊噢~
gsap
做前端動(dòng)畫(huà),我強(qiáng)推這個(gè)框架,真的很好用!
GSAP(GreenSock Animation Platform)是一個(gè)用于創(chuàng)建高性能、跨瀏覽器的動(dòng)畫(huà)的JavaScript庫(kù)。它提供了許多強(qiáng)大而靈活的API,允許開(kāi)發(fā)者創(chuàng)建各種復(fù)雜的動(dòng)畫(huà)效果。
使用起來(lái)非常簡(jiǎn)單,我們實(shí)現(xiàn)一個(gè)動(dòng)畫(huà),將.box這個(gè)元素在x軸方向向右移動(dòng)200px,耗時(shí)2秒
gsap.to(".box", {
x: 200,
duration: 2
});
當(dāng)然,這只是gsap功能的冰山一角,它還有很多可以讓我們高效工作的能力:
- CSS屬性動(dòng)畫(huà):可以對(duì)幾乎所有CSS屬性進(jìn)行動(dòng)畫(huà)處理,包括不常用的屬性。
- 時(shí)間線控制:提供時(shí)間線功能,可以方便地控制動(dòng)畫(huà)的序列和并行。
- 緩動(dòng)函數(shù):內(nèi)置多種緩動(dòng)函數(shù),可以創(chuàng)建更自然的運(yùn)動(dòng)效果。
- SVG和Canvas動(dòng)畫(huà):支持SVG和HTML5 Canvas元素的動(dòng)畫(huà)。
- 復(fù)雜動(dòng)畫(huà)路徑:可以創(chuàng)建復(fù)雜的運(yùn)動(dòng)路徑,實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)效果。
- 3D動(dòng)畫(huà):雖然GSAP主要用于2D動(dòng)畫(huà),但也支持一些3D動(dòng)畫(huà)效果。
- 插件系統(tǒng):有豐富的插件系統(tǒng),可以擴(kuò)展其功能,比如MorphSVG插件可以創(chuàng)建SVG圖形的形變動(dòng)畫(huà)。
- 性能優(yōu)化:GSAP在性能上做了大量?jī)?yōu)化,可以處理大量的動(dòng)畫(huà)而不影響頁(yè)面性能。
- 跨瀏覽器兼容性:確保動(dòng)畫(huà)在各種瀏覽器和設(shè)備上都能平滑運(yùn)行。
GSAP的一個(gè)關(guān)鍵特點(diǎn)是它對(duì)性能的優(yōu)化,它使用優(yōu)化的算法和瀏覽器的請(qǐng)求動(dòng)畫(huà)幀(requestAnimationFrame)API來(lái)實(shí)現(xiàn)流暢的動(dòng)畫(huà)效果。
此外,GSAP的API設(shè)計(jì)得非常人性化,易于學(xué)習(xí)和使用,同時(shí)它還提供了大量的文檔和示例來(lái)幫助開(kāi)發(fā)者快速上手。
gsap官方地址:gsap.com
lottie
Lottie 是一個(gè)由愛(ài)彼迎(Airbnb)開(kāi)發(fā)的開(kāi)源動(dòng)畫(huà)庫(kù),主要用法就是UI設(shè)計(jì)通過(guò)專業(yè)動(dòng)畫(huà)軟件(如After Effects)設(shè)計(jì)好之后,輸出json文件,然后通過(guò) Lottie 將這些動(dòng)畫(huà)無(wú)縫地集成到移動(dòng)app和網(wǎng)頁(yè)中。
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)勢(shì):
- After Effects 兼容性:Lottie 支持將 After Effects 項(xiàng)目(.json 格式的動(dòng)畫(huà)數(shù)據(jù))直接轉(zhuǎn)換為可在應(yīng)用和網(wǎng)頁(yè)中使用的動(dòng)畫(huà)。
- 跨平臺(tái):Lottie 支持多種平臺(tái),包括 Android、iOS、Web(通過(guò) React Native、Vue、Angular 等框架)。
- 性能炸裂:Lottie 使用原生的圖形和動(dòng)畫(huà)代碼,這意味著動(dòng)畫(huà)性能通常比使用 CSS 或 JavaScript 直接編寫(xiě)的動(dòng)畫(huà)更優(yōu)。
- 定制化:動(dòng)畫(huà)可以被定制和動(dòng)態(tài)修改,例如更改顏色、大小、速度等。
- 輕量級(jí):Lottie 動(dòng)畫(huà)文件體積小,因?yàn)樗鼈冎话P(guān)鍵幀數(shù)據(jù),而不是完整的視頻或序列幀。
- 易于使用:Lottie 提供了簡(jiǎn)單的 API,使得在項(xiàng)目中集成動(dòng)畫(huà)變得非常容易。
- 動(dòng)畫(huà)效果豐富:由于它基于 After Effects,Lottie 可以支持復(fù)雜的動(dòng)畫(huà)效果,包括3D效果、遮罩、表達(dá)式等。
- 實(shí)時(shí)渲染:Lottie 動(dòng)畫(huà)是實(shí)時(shí)渲染的,這意味著動(dòng)畫(huà)可以在不同的屏幕尺寸和分辨率下保持高質(zhì)量。
- 社區(qū)支持:作為一個(gè)開(kāi)源項(xiàng)目,Lottie 有一個(gè)活躍的社區(qū),不斷有新的功能和改進(jìn)被加入。
- 動(dòng)畫(huà)緩存:Lottie 支持動(dòng)畫(huà)的緩存,可以提高重復(fù)播放動(dòng)畫(huà)的性能。
Lottie 的使用場(chǎng)景非常廣泛,從簡(jiǎn)單的加載指示器到復(fù)雜的交互式動(dòng)畫(huà),都可以用 Lottie 來(lái)實(shí)現(xiàn)。
Lottie官方地址:airbnb.io/lottie/#/we…
React Spring
React Spring:react開(kāi)發(fā)者的福音,這款框架是基于React的動(dòng)畫(huà)庫(kù),它使用基于物理的動(dòng)畫(huà),可以創(chuàng)建非常自然和流暢的動(dòng)畫(huà)效果。
初始化一個(gè)簡(jiǎn)單的動(dòng)畫(huà),讓div從左向右移動(dòng):
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:一個(gè)輕量級(jí)的JavaScript動(dòng)畫(huà)庫(kù),它使用CSS屬性和SVG,可以創(chuàng)建平滑的CSS和SVG動(dòng)畫(huà)
初始化一個(gè)簡(jiǎn)單的動(dòng)畫(huà):
anime({
targets: '.css-prop-demo .el',
left: '240px',
backgroundColor: '#FFF',
borderRadius: ['0%', '50%'],
easing: 'easeInOutQuad'
});
說(shuō)實(shí)話,看api,有點(diǎn)類似于gsap動(dòng)畫(huà)庫(kù),也不知道它倆是怎么個(gè)關(guān)系~
Anime.js官方地址:animejs.com/documentati…
其他動(dòng)畫(huà)庫(kù)
還有很多其他的動(dòng)畫(huà)庫(kù),但是作者本人還沒(méi)用過(guò),如果有用過(guò)的小伙伴也可以在評(píng)論區(qū)發(fā)表一下使用體驗(yàn)或者看法。
- Framer Motion:也是一個(gè)基于React的動(dòng)畫(huà)庫(kù),它提供了一個(gè)簡(jiǎn)單的API來(lái)創(chuàng)建動(dòng)畫(huà)和交互效果。
- Velocity.js:一個(gè)強(qiáng)大的動(dòng)畫(huà)引擎,可以與jQuery結(jié)合使用,提供豐富的動(dòng)畫(huà)效果。
- Popmotion:一個(gè)功能全面的動(dòng)作和動(dòng)畫(huà)庫(kù),支持React和非React環(huán)境。
- Web Animations API:是現(xiàn)代瀏覽器提供的原生JavaScript動(dòng)畫(huà)API,允許開(kāi)發(fā)者以編程方式創(chuàng)建復(fù)雜的動(dòng)畫(huà)。
- KUTE.js:一個(gè)輕量級(jí)的動(dòng)畫(huà)庫(kù),專注于性能和易用性,支持CSS屬性、SVG和自定義屬性的動(dòng)畫(huà)。
- Flickity:雖然主要是一個(gè)輕量級(jí)的畫(huà)廊和卡丁車庫(kù),但它也提供了一些基本的動(dòng)畫(huà)功能。
- GreenSock Draggable:GSAP的一個(gè)插件,允許元素的拖放,可以創(chuàng)建交互式的動(dòng)畫(huà)效果。
- CyberConnect:一個(gè)基于Web Animations API的庫(kù),可以創(chuàng)建復(fù)雜的動(dòng)畫(huà)和過(guò)渡效果。
總結(jié)
目前筆者用的比較多的是gsap和lottie,特別是在threejs項(xiàng)目中,用gsap做動(dòng)畫(huà)再合適不過(guò),而lottie大部分時(shí)間我是用來(lái)展示一些復(fù)雜的無(wú)交互的動(dòng)畫(huà)開(kāi)發(fā)。
作者:攻城師不浪
鏈接:https://juejin.cn/post/7367696432935419944
用Adobe After Effects (AE) 制作MG動(dòng)畫(huà)是一種常見(jiàn)的做法,盡管AE的學(xué)習(xí)曲線相對(duì)較高,但通過(guò)逐步學(xué)習(xí)和實(shí)踐,你可以掌握這項(xiàng)技能。下面是使用AE制作MG動(dòng)畫(huà)的基本流程和操作:
1. 準(zhǔn)備階段
- 規(guī)劃概念: 確定MG動(dòng)畫(huà)的主題、故事板和設(shè)計(jì)風(fēng)格。
- 收集素材: 搜集所需的圖片、音頻、視頻和其他視覺(jué)元素。
- 創(chuàng)建故事板: 設(shè)計(jì)每個(gè)場(chǎng)景的布局和動(dòng)作流程。
2. 創(chuàng)建項(xiàng)目
- 新建項(xiàng)目: 打開(kāi)AE,點(diǎn)擊“文件” > “新建” > “項(xiàng)目”,命名項(xiàng)目并保存。
- 新建合成: 在項(xiàng)目面板中點(diǎn)擊“新建” > “合成”,設(shè)定合成的尺寸(通常為1920x1080像素)、幀速率、持續(xù)時(shí)間和背景顏色。
3. 構(gòu)建動(dòng)畫(huà)
- 繪制元素: 使用形狀圖層工具(矩形、橢圓、多邊形等)來(lái)繪制靜態(tài)元素。
- 添加文本: 在工具欄中選擇文本工具,輸入文字并調(diào)整字體、大小和顏色。
- 創(chuàng)建動(dòng)畫(huà): 使用關(guān)鍵幀來(lái)定義動(dòng)畫(huà)的起始和結(jié)束狀態(tài),例如移動(dòng)、旋轉(zhuǎn)、縮放等。
- 應(yīng)用效果: 為元素添加各種視覺(jué)效果,如陰影、發(fā)光、模糊等。
4. 動(dòng)態(tài)元素
- 使用鋼筆工具: 繪制路徑和動(dòng)態(tài)線條,為指針、箭頭等創(chuàng)建流暢的動(dòng)畫(huà)。
- 路徑動(dòng)畫(huà): 將元素沿著特定路徑移動(dòng),可以通過(guò)繪制路徑來(lái)實(shí)現(xiàn)。
5. 時(shí)間軸管理
- 調(diào)整層順序: 在時(shí)間軸面板中管理各個(gè)圖層的順序。
- 使用預(yù)合成: 對(duì)復(fù)雜的元素或場(chǎng)景進(jìn)行預(yù)合成,便于管理和編輯。
6. 視覺(jué)效果與轉(zhuǎn)場(chǎng)
- 過(guò)渡效果: 為場(chǎng)景間的切換添加過(guò)渡效果,比如淡入淡出、滑動(dòng)等。
- 視覺(jué)特效: 應(yīng)用AE內(nèi)置的效果插件,或者安裝第三方插件來(lái)增強(qiáng)視覺(jué)效果。
7. 后期處理
- 添加音頻: 導(dǎo)入背景音樂(lè)或音效,并調(diào)整音量和同步點(diǎn)。
- 顏色校正: 使用色彩校正工具調(diào)整整體色調(diào)和對(duì)比度。
- 導(dǎo)出視頻: 設(shè)置輸出格式、分辨率、碼率等參數(shù),導(dǎo)出最終的視頻文件。
8. 實(shí)踐案例
- 示例一: 制作一個(gè)倒計(jì)時(shí)三秒的MG動(dòng)畫(huà)。新建合成,持續(xù)時(shí)間為10秒。創(chuàng)建純色背景層。使用形狀圖層繪制圓圈,添加動(dòng)畫(huà)效果。調(diào)整動(dòng)畫(huà)的關(guān)鍵幀以實(shí)現(xiàn)所需的效果。
- 示例二: 制作指針動(dòng)畫(huà)。使用矩形工具和橢圓工具繪制底圖和橢圓。復(fù)制橢圓并填充不同顏色,制作刻度。使用鋼筆工具畫(huà)出指針。調(diào)整刻度、指針和表盤的旋轉(zhuǎn)。開(kāi)啟運(yùn)動(dòng)模糊選項(xiàng),調(diào)整運(yùn)動(dòng)模糊效果。
- MG動(dòng)畫(huà)的風(fēng)格多種多樣,可以適應(yīng)不同的應(yīng)用場(chǎng)景和創(chuàng)意需求。以下是幾種常見(jiàn)的MG動(dòng)畫(huà)風(fēng)格:
- 扁平化風(fēng)格:簡(jiǎn)潔、直接,色彩鮮明,使用簡(jiǎn)單的形狀和顏色。
- MBE描邊風(fēng)格:一種獨(dú)特的輪廓描邊風(fēng)格,邊緣通常帶有圓形或圓角。
- 線條風(fēng)格:使用線條來(lái)構(gòu)成畫(huà)面,可以是精細(xì)的手繪線條或簡(jiǎn)單的幾何線條。
- 手繪插畫(huà)風(fēng)格:給人以溫馨、自然的感覺(jué),通常使用手繪的線條和色彩。
- 點(diǎn)線科技風(fēng)格:具有高端、大氣的特點(diǎn),以科技感的線條為主。
- 3D風(fēng)格:使用電腦生成的3D模型和動(dòng)畫(huà),給人一種立體、真實(shí)的感覺(jué)。
- 抽象風(fēng)格:使用抽象的形狀和顏色,以及非線性的剪輯。
- 文字動(dòng)畫(huà)風(fēng)格:主要通過(guò)文字的變化來(lái)產(chǎn)生動(dòng)態(tài)效果。
- 科幻風(fēng)格:具有未來(lái)感和科技感,主要表現(xiàn)在機(jī)械設(shè)備、太空、機(jī)器人等方面。
- 奇幻風(fēng)格:表現(xiàn)為神秘、異域、魔法等元素,營(yíng)造神話般的氛圍。
- 戰(zhàn)斗風(fēng)格:以激烈的場(chǎng)面、精彩的動(dòng)作為主要特點(diǎn)。
- 競(jìng)技風(fēng)格:以運(yùn)動(dòng)、比賽、競(jìng)技為主題。
關(guān)于MG動(dòng)畫(huà)相關(guān)的崗位素材,你可以從以下幾個(gè)途徑尋找:
- 在線素材平臺(tái):如 Shutterstock, Adobe Stock, Pond5, VideoHive 等,這些網(wǎng)站提供大量的MG動(dòng)畫(huà)模板和素材。
- 專業(yè)社區(qū):Behance, Dribbble 和 ArtStation 等網(wǎng)站上有許多專業(yè)的設(shè)計(jì)師分享的作品,可以從中獲取靈感或聯(lián)系作者定制素材。
- 動(dòng)畫(huà)制作軟件內(nèi)置資源:Adobe After Effects, Blender, Toon Boom 等軟件通常會(huì)有內(nèi)置的模板和資源庫(kù)。
- 專門的MG動(dòng)畫(huà)素材網(wǎng)站:如 Artlist, PremiumBeat 等專注于視頻和動(dòng)畫(huà)素材的網(wǎng)站。
- 以下是一些常用的MG動(dòng)畫(huà)制作軟件:
- Adobe After Effects:
- 專業(yè)級(jí)別的動(dòng)畫(huà)制作軟件,廣泛應(yīng)用于影視后期制作和MG動(dòng)畫(huà)創(chuàng)作。
- 支持2D和3D動(dòng)畫(huà),可以創(chuàng)建復(fù)雜的動(dòng)畫(huà)效果。
- 學(xué)習(xí)曲線較陡峭,但對(duì)于專業(yè)人士來(lái)說(shuō)是非常強(qiáng)大的工具。
- Adobe Animate(原名Flash Professional):
- 適用于創(chuàng)建矢量動(dòng)畫(huà)和交互式內(nèi)容。
- 特別適合制作基于Web的動(dòng)畫(huà),支持HTML5 Canvas, WebGL, Flash/SWF 等輸出格式。
- Cinema 4D:
- 一款3D建模和動(dòng)畫(huà)軟件,也常用于MG動(dòng)畫(huà)的制作。
- 提供了直觀的界面和強(qiáng)大的3D渲染功能。
- Blender:
- 免費(fèi)開(kāi)源的3D建模和動(dòng)畫(huà)軟件。
- 可以用來(lái)制作高質(zhì)量的MG動(dòng)畫(huà),支持多種渲染引擎。
- Toon Boom Harmony:
- 高級(jí)的2D動(dòng)畫(huà)制作軟件,廣泛應(yīng)用于電視動(dòng)畫(huà)和電影制作。
- 提供了高級(jí)的繪畫(huà)和動(dòng)畫(huà)工具。
- Moho (Anime Studio):
- 適合制作2D動(dòng)畫(huà),特別是骨骼綁定技術(shù)使得角色動(dòng)畫(huà)更加容易。
- 提供了直觀的界面和強(qiáng)大的動(dòng)畫(huà)工具。
- 萬(wàn)彩動(dòng)畫(huà)大師:
- 入門級(jí)的MG動(dòng)畫(huà)制作軟件,易于上手。
- 內(nèi)置了豐富的動(dòng)畫(huà)模板、場(chǎng)景和特效,適合初學(xué)者。
- Renderforest:
- 在線動(dòng)畫(huà)視頻制作平臺(tái),無(wú)需下載軟件。
- 提供了大量的模板和預(yù)設(shè)動(dòng)畫(huà)效果,適合社交媒體營(yíng)銷等場(chǎng)景。
- Biteable:
- 在線視頻制作工具,適合快速套用模板制作視頻。
- 適合社交媒體平臺(tái)上的視頻制作,也有MG動(dòng)畫(huà)模板。
- 秀展網(wǎng):
- 在線制作MG動(dòng)畫(huà)的網(wǎng)站,無(wú)需下載軟件。
- 提供大量模板,支持云端同步,方便異地編輯。
MG動(dòng)畫(huà)個(gè)人怎么變現(xiàn)
- 承接項(xiàng)目:
- 承接來(lái)自企業(yè)和個(gè)人客戶的定制項(xiàng)目,如制作產(chǎn)品介紹、品牌宣傳、教育課程等內(nèi)容的MG動(dòng)畫(huà)。
- 通過(guò)自由職業(yè)者平臺(tái)(如Upwork、Freelancer、豬八戒網(wǎng)等)尋找客戶和項(xiàng)目。
- 在線課程和教程:
- 制作關(guān)于MG動(dòng)畫(huà)制作技巧的在線課程,在各大在線教育平臺(tái)(如Udemy、Coursera、騰訊課堂等)銷售。
- 發(fā)布免費(fèi)的教程吸引粉絲,然后推出付費(fèi)的進(jìn)階課程或一對(duì)一輔導(dǎo)服務(wù)。
- YouTube頻道:
- 創(chuàng)建一個(gè)YouTube頻道,發(fā)布創(chuàng)意的MG動(dòng)畫(huà)作品,積累觀眾并通過(guò)YouTube廣告分成計(jì)劃獲得收入。
- 也可以通過(guò)頻道推廣自己的其他業(yè)務(wù),如定制服務(wù)或產(chǎn)品。
- 社交媒體營(yíng)銷:
- 利用微博、抖音、快手等社交媒體平臺(tái)發(fā)布作品,吸引粉絲并推廣自己的服務(wù)。
- 通過(guò)社交媒體上的影響力接廣告合作。
- 制作和銷售模板:
- 設(shè)計(jì)并銷售MG動(dòng)畫(huà)模板給需要快速制作內(nèi)容的企業(yè)和個(gè)人。
- 可以通過(guò)專門的市場(chǎng)(如VideoHive、Motion Array等)出售這些模板。
- 制作微課或短片:
- 制作教育性質(zhì)的微課或者短片,用于在線教育平臺(tái)或者企業(yè)的內(nèi)部培訓(xùn)。
- 與教育機(jī)構(gòu)合作,為其開(kāi)發(fā)教學(xué)資源。
- 制作微信表情包:
- 制作具有個(gè)性的MG動(dòng)畫(huà)表情包,在微信表情開(kāi)放平臺(tái)上線,通過(guò)下載和贊賞等方式獲取收益。
- 個(gè)人品牌商品化:
- 將自己的MG動(dòng)畫(huà)形象或設(shè)計(jì)印刷在T恤、杯子等商品上,通過(guò)電商平臺(tái)(如淘寶、京東等)銷售。
- 版權(quán)授權(quán):
- 將自己的原創(chuàng)MG動(dòng)畫(huà)作品授權(quán)給其他媒體平臺(tái)使用,比如授權(quán)給電視臺(tái)、電影制片廠等作為背景動(dòng)畫(huà)。
- 參與比賽和獎(jiǎng)項(xiàng):
- 參加國(guó)內(nèi)外的動(dòng)畫(huà)競(jìng)賽,如果獲獎(jiǎng)可以提高知名度,進(jìn)而帶來(lái)更多的商業(yè)機(jī)會(huì)。
- 開(kāi)設(shè)個(gè)人工作室:
- 如果條件允許,可以開(kāi)設(shè)自己的動(dòng)畫(huà)工作室,提供全方位的動(dòng)畫(huà)解決方案,包括創(chuàng)意策劃、腳本編寫(xiě)、動(dòng)畫(huà)制作等。
通過(guò)以上步驟,你可以開(kāi)始在AE中制作簡(jiǎn)單的MG動(dòng)畫(huà)。隨著經(jīng)驗(yàn)的積累,你會(huì)學(xué)會(huì)更多高級(jí)技巧和技術(shù)。希望這能幫助你入門AE的MG動(dòng)畫(huà)制作!