課程介紹

講師介紹

王亞男
王亞男，?？蛯Ｂ毨蠋煟瑩碛?年前端實(shí)戰(zhàn)開發(fā)經(jīng)驗(yàn)+1年授課經(jīng)驗(yàn)，曾獨(dú)立負(fù)責(zé)3個(gè)大型級(jí)項(xiàng)目，擔(dān)任團(tuán)隊(duì)敏捷教練，在開發(fā)實(shí)戰(zhàn)中及時(shí)發(fā)現(xiàn)團(tuán)隊(duì)問題，提出高效解決辦法。

課程提綱

第1章

制作酷炫動(dòng)畫，學(xué)會(huì)使用anime.js

課程介紹

搭建開發(fā)環(huán)境

anime.js基本功能的使用

交錯(cuò)動(dòng)畫

時(shí)間軸

控制、回調(diào)與助手

動(dòng)畫運(yùn)動(dòng)曲線

SVG動(dòng)畫

實(shí)踐上

實(shí)踐下
第2章

剖析anime.js 核心，手撕基本功能代碼

anime.js核心結(jié)構(gòu)解析

engine實(shí)現(xiàn)

處理目標(biāo)元素

目標(biāo)屬性和屬性參數(shù)的數(shù)據(jù)結(jié)合

獲取動(dòng)畫數(shù)據(jù)

整合處理params參數(shù)

完成動(dòng)畫基本結(jié)構(gòu)

屬性參數(shù)功能

動(dòng)畫參數(shù)
第3章

再探anime.js 核心，觸底屬性值的全方位解決方案

屬性值-初始值

屬性值-單位缺省

屬性值-特殊單位

屬性值-相對(duì)值計(jì)算

屬性值-顏色值

設(shè)置屬性值-from-to

設(shè)置屬性值-函數(shù)值

幀動(dòng)畫
第4章

深入 anime.js 核心，揭秘動(dòng)畫交互的本質(zhì)

交錯(cuò)方法1

交錯(cuò)方法2

交錯(cuò)方法3

控制-運(yùn)行-暫停

控制-反向-重置-設(shè)置狀態(tài)

回調(diào)-begin-update-complete

回調(diào)-loopBegin-loopComplete

回調(diào)-change-changeBegin-changeComplete

promise

助手-remove

助手-get-set

助手-random-running

助手-tick

時(shí)間軸-基礎(chǔ)

時(shí)間軸-參數(shù)

SVG-path

SVG-改變形狀-畫線

easing
第5章

項(xiàng)目實(shí)踐與總結(jié)，根本解決面試過程中的三層痛點(diǎn)

上照片墻案例1

上照片墻案例2

上照片墻案例3

鐘表案例

徒手完成SVG動(dòng)畫

疑難點(diǎn)總結(jié)-項(xiàng)目回顧與總結(jié)

前端高頻面試題-閉包

前端高頻面試題-遞歸

前端高頻面試題-深淺克隆

前端高頻面試題-動(dòng)畫性能

前端高頻面試題-vue-anime.js

常見問題

1.課程視頻有效期多久？: 答：課程視頻是可以隨時(shí)觀看學(xué)習(xí)的。

2.課程可以分享給身邊同學(xué)嗎？: 答：當(dāng)然可以，但一定要記得上?？凸俜狡脚_(tái)來學(xué)習(xí)哦。

3.版權(quán)問題: 答：版權(quán)歸?？吐殞?dǎo)所有，任何其他機(jī)構(gòu)、媒體、網(wǎng)站或個(gè)人未經(jīng)本網(wǎng)協(xié)議授權(quán)，不得發(fā)布/發(fā)表/轉(zhuǎn)載?？吐殞?dǎo)官方的課程鏈接/內(nèi)容，違者將依法追究相關(guān)責(zé)任。