• 授課方式
    錄播視頻+社群交流+答疑輔導
  • 開課時間
    隨到隨學
  • 適合人群
    求職前端崗位,想獲得具有競爭力的項目和簡歷亮點的同學
  • 課程時長
    1800分鐘

課程介紹

點擊“進入課程”即可免費學習

講師介紹

  • 王亞男
    王亞男,牛客專職老師,擁有5年前端實戰開發經驗+1年授課經驗,曾獨立負責3個大型級項目,擔任團隊敏捷教練,在開發實戰中及時發現團隊問題,提出高效解決辦法。

課程提綱

  • 第1章
    制作酷炫動畫,學會使用anime.js

    課程介紹

    搭建開發環境

    anime.js基本功能的使用

    交錯動畫

    時間軸

    控制、回調與助手

    動畫運動曲線

    SVG動畫

    實踐上

    實踐下



  • 第2章
    剖析anime.js 核心,手撕基本功能代碼

    anime.js核心結構解析

    engine實現

    處理目標元素

    目標屬性和屬性參數的數據結合

    獲取動畫數據

    整合處理params參數

    完成動畫基本結構

    屬性參數功能

    動畫參數

  • 第3章
    再探anime.js 核心,觸底屬性值的全方位解決方案

    屬性值-初始值

    屬性值-單位缺省

    屬性值-特殊單位

    屬性值-相對值計算

    屬性值-顏色值

    設置屬性值-from-to

    設置屬性值-函數值

    幀動畫

  • 第4章
    深入 anime.js 核心,揭秘動畫交互的本質

    交錯方法1

    交錯方法2

    交錯方法3

    控制-運行-暫停

    控制-反向-重置-設置狀態

    回調-begin-update-complete

    回調-loopBegin-loopComplete

    回調-change-changeBegin-changeComplete

    promise

    助手-remove

    助手-get-set

    助手-random-running

    助手-tick

    時間軸-基礎

    時間軸-參數

    SVG-path

    SVG-改變形狀-畫線

    easing

  • 第5章
    項目實踐與總結,根本解決面試過程中的三層痛點

    上照片墻案例1

    上照片墻案例2

    上照片墻案例3

    鐘表案例

    徒手完成SVG動畫

    疑難點總結-項目回顧與總結

    前端高頻面試題-閉包

    前端高頻面試題-遞歸

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

    前端高頻面試題-動畫性能

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

常見問題

1.課程是真的免費嗎?如何獲得?

答:牛客職導自研課程的免費都是真實有效的,直接點擊“進入課程”按鈕即可免費觀看學習,不用有任何其他的操作,同學們可以放心學習。

2.課程視頻有效期多久?
答:課程視頻是可以隨時觀看學習的。
3.課程可以分享給身邊同學嗎?
答:當然可以,但一定要記得上牛客官方平臺來學習哦。
4.版權問題

答:雖然課程是免費的,但版權依然歸牛客職導所有,任何其他機構、媒體、網站或個人未經本網協議授權,不得發布/發表/轉載牛客職導官方的課程鏈接/內容,違者將依法追究相關責任。

最近正在學

久热热在线视频精品店4