计算机动画原理：
无论动画多么简单，始终要定义两个基本状态，开始状态和结束状态。没有他们，我们将无法定义插值状态，从而填补两者之间的空白。
基础知识点：
1.帧：连续变换的多张画面，其中每一幅画面都是帧
2.帧率：用于度量一定时间内的帧数，测量单位是FPS
3.帧率与人眼：一般每秒10--12帧人会认为画面是连贯的，这个现象称为视觉暂留，目前主流显卡，屏幕输出都是60FPS,效果流畅
空白补全方式
1.补间动画：
绘制关键帧，补间动画师补充关键帧交付
2.逐帧动画：纯手绘
前端动画的分类：
一 Css动画：
实现方式1
animation
animation-name属性指定应用的一系列动画，每个名称代表由@keyframes定义的动画序列。
animation-duration属性指定一个动画的时长。
animation-timing-function属性定义css动画在每一动画周期中执行的节奏
animation-delay CSS属性定义动画于什么时候开始，即延迟多少秒执行
animation-iteration-count CSS属性定义动画在结束前运行的次数 可以是1次，可以无限循环
animation-direction css属性指示动画是否反向播放
animation-play-sate CSS定义一个动画是否运行或者暂停。
实现方式2
Css形体变换-Transform API (只能转换由盒模型定位的元素）
类型：Tanslate(移动），scal(缩放),rotate(旋转），skew(倾斜）
Dom加载完成时或者class发生变化时触发。
div{
Transiton:<property<<duration><timing-function><delay>;
}
实现方式3
Keyframe实现动画：
通过定义动画序列的关键帧的样式来控制动画中的中间步骤
Svg动画
通常有三种方式：SMI，JS，CSS
Filter css属性将模糊或颜色偏移等图形效果应用于元素
JS笔画的原理：
stroke-dashoffset，stroke-dasharray配合使用笔画效果。
1.stroke-dashoffset可控制用来描边图案范式他是一个数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则数列*2.
2.stroke-dasharray属性指定了dash模式到路径开始的距离。
Path路径-d属性（路径描述）：
大写字母跟随的是绝对路径x，y,小写为相对路径dx.dy
M/m绘制起始点
C/c绘制贝塞尔曲线
Z/z将当前点与起始点用直线连接
计算path长度-path.getTotalLength()
计算path上某个点的坐标-path.getPointAtLength(lengthNumei)
Js动画
js执行动画的核心思想: r=vt
