第一章 制作酷炫动画，学会使用anime.js

第一节 课程介绍

• anime.js简介 （来源、流行程度、解决问题）
• 课程目标  （get的能力（1.动画的思维方式2.深度复习css）学习内容，具有的基础能力）
• 前端动画实现方式对比   （动画的原理、使用的特点、性能）

第二节 搭建开发环境

• vsCode
• 一个简单动画需求 （三种方式去写、对比）

第三节anime.js基本功能的使用 

• 动画的目标对象
• 可动画的目标属性参数
• 属性参数
• 动画参数
• 属性值
• 关键帧

第四节 交错动画

• 交错动画

第五节 时间轴

• 时间轴

第六节 控制、回调、助手

• 动画控制
• 回调
• 助手

第七节 动画运动曲线

• easing

第八节SVG动画

• 运动路径
• 变形
• 画线条

第九节anime.js实践

• 实现动画思路
• 动画实现

• 实现动画思路
• 动画实现

第二章 解剖anime.js核心，手撕基本功能源码

第一节 动画驱动核心

• 动画驱动原理
• 使用核心实现简单动画

第二节 动画目标

• anime targets数据分析
• css选择器参数
• dom对象参数
• js对象参数
• 数组参数
• targets植入核心动画

第三节 目标属性

• targets属性数据分析
• 属性数据设置
• argets属性类型判断
• targets属性设置
• targets属性参数植入核心动画

第四节 动画基础参数设置

• 动画基础参数分析
• 持续时间duration
• 延迟delay
• 末尾延迟endDelay
• 缓动easing
• 浮点数设置round
• 针对某个样式设置基础参数specific property parameters
• 函数参数function based parameters
• 动画基础参数整体植入核心动画

第五节 动画的方向、循环、自动执行

• 动画方向设置原理与方法
• 动画执行次数设置原理与方法
• 动画自动执行
• 将方向、循环、自动执行整体植入核心动画

第六节 帧动画设置

• 帧动画设置原理
• 动画帧
• 参数帧
• 帧植入到核心动画中

第三章 再探anime.js核心，触底属性值的全方位解决方案

第一节 动画属性值数据分析

• 可接受的属性值类型

第二节 属性值单位处理

• 缺省单位
• 特殊单位

第三节 属性值之计算

• 相对值
• from to
• 函数设置

第四节 特殊值

• 颜色值的类型与特点
• 颜色值的处理

第五节 整体数据处理植入到核心动画中

第四章 深入anime.js核心，揭秘动画交互的本质

第一节 交错动画

• 交错动画实现原理
• 交错动画实现

第二节 时间轴

• 时间轴动画实现原理
• 时间轴动画实现

第三节 动画控制

• 开始/暂停原理与实现
• 重新执行原理与实现
• 反向执行原理与实现
• 手动设置动画进程原理与实现
• 时间轴的控制原理与实现

第四节 回调

• 回调设置原理
• 更新回调
• 开始与完成回调
• 循环开始与循环完成回调
• 修改回调
• 修改开始与修改完成回调
• 动画完成的原理与实现回调 

第五节 助手

• 移除动画元素的原理与实现
• 获取元素样式的原理与实现
• 设置元素样式的原理与实现
• 随机数的设置
• tick的原理与实现
• running的实现

第六节EASING

• easing解决什么问题
• easing实现原理
• easing的各种算法的原理与实现简介
• easing植入动画核心 

第七节SVG

• SVG动画的基本原理
• 运动路径
• 变形
• 画线条
• SVG植入动画核心

第五章 项目实践与总结，根本解决面试过程中的三层痛点

第一节anime.js实现一个复杂的需求

• 复杂需求分析
• 动画实现

第二节 徒手实现复杂动画需求

• 复杂动画原理解析
• 动画实现

第三节 项目重点难点回顾

• 核心思想回顾
• 难点回顾