课程介绍

讲师介绍

王亚男
王亚男，牛客专职老师，拥有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