簡(jiǎn)介：本課程帶領(lǐng)大家使用JS和CSS3技術(shù)實(shí)現(xiàn)粽子動(dòng)畫(huà)的效果，課程分為“分析動(dòng)畫(huà)特效”和“開(kāi)發(fā)”兩個(gè)部分，分析動(dòng)畫(huà)部分使用“關(guān)鍵時(shí)間點(diǎn)逆向分析”的方法帶領(lǐng)大家把動(dòng)畫(huà)制作過(guò)程揭秘出來(lái)，“開(kāi)發(fā)”部分，首先對(duì)動(dòng)畫(huà)效果進(jìn)行深入剖析、然后再進(jìn)行動(dòng)畫(huà)的一步一步分步制作。
第1章 課程介紹及分析
本章節(jié)對(duì)效果進(jìn)行了演示，以及使用了“關(guān)鍵時(shí)間點(diǎn)逆向分析”的方法帶領(lǐng)大家把動(dòng)畫(huà)制作過(guò)程揭秘出來(lái)。
第2章 代碼實(shí)現(xiàn)
本章節(jié)先對(duì)靜態(tài)界面&元件概念進(jìn)行講解，然后使用純 CSS 實(shí)現(xiàn)動(dòng)畫(huà)和過(guò)渡動(dòng)畫(huà)效果，以及腳本實(shí)現(xiàn)時(shí)間線(xiàn)類(lèi)和構(gòu)建場(chǎng)景動(dòng)畫(huà)，到最后完成粽子的旋轉(zhuǎn)動(dòng)畫(huà)效果。
- 視頻： 2-1 開(kāi)發(fā)環(huán)境介紹 (03:37)
- 視頻： 2-2 完成基本界面元素（一） (10:40)
- 視頻： 2-3 完成基本界面元素（二） (11:13)
- 視頻： 2-4 定義抖動(dòng)的CSS動(dòng)畫(huà) (07:16)
- 視頻： 2-5 完成祝福語(yǔ)CSS過(guò)渡動(dòng)畫(huà) (08:37)
- 視頻： 2-6 動(dòng)畫(huà)樣式（粽肉動(dòng)畫(huà)） (17:11)
- 視頻： 2-7 動(dòng)畫(huà)樣式（文字動(dòng)畫(huà)） (08:26)
- 視頻： 2-8 動(dòng)畫(huà)樣式定義（文字視角） (07:46)
- 視頻： 2-9 腳本編寫(xiě)時(shí)間類(lèi)構(gòu)造器 (10:38)
- 視頻： 2-10 用時(shí)間類(lèi)編寫(xiě)展開(kāi)粽子動(dòng)畫(huà)序列（一） (10:06)
- 視頻： 2-11 用時(shí)間類(lèi)編寫(xiě)展開(kāi)粽子動(dòng)畫(huà)序列（二） (04:20)
- 視頻： 2-12 實(shí)現(xiàn)托盤(pán)旋轉(zhuǎn)動(dòng)畫(huà) (15:45)
- 視頻： 2-13 圖片加載器解決閃動(dòng) (03:48)
第3章 總結(jié)
本章帶領(lǐng)大家對(duì)課程所講解到的關(guān)鍵知識(shí)點(diǎn)進(jìn)行了總結(jié)及知識(shí)擴(kuò)展。