动画（Animation）
动画意味着随着时间而变化，尤其指视觉上的变化，包括位置、形态等的变化。运动基本上表现为物体随时间，发生位置上的变化；形态基本表现为大小、颜色、透明度、形状等随时间的变化。
图像以每秒24帧的速度播放，最容易看成运动的图像。比这个速度再慢些，会由于停顿时间较长，人眼会感觉影像不连贯。人眼似乎不能分辨比这个帧频再快的速度，理论上讲，帧频再快也不会使动画变得更真实，虽然快速的帧频，看上去会更平滑。
三角学（Trigonometry）
三角学是研究三角形与其边和角关系的学科。一个三角形有三条边和三个角，这些边和角存在着一些特殊的关系。比如，增大其中任何一个角，那么该角对应的边就会增长，假设其它两条边长度不，其它两个角会变小。我们在动画中，经常遇到的是直角三角形模型，其中一个角为90度。
勾股定理
直角三角形两直角边长的平方和等于斜边长的平方。由上图可推出： b + c = a
斜边公式
坐标系（Coordinate System）
基于HTML文档的JS动画，文档左上角坐标为（0，0），X值从左向右不断增大，Y值从上到下不断增大。
旋转（Rotation）
波形（waveform）
正弦曲线：y=sin(x)
余弦曲线：y=cos(x)
创建波形：
value = center + Math.sin(angle)*range;
angle += speed;
创建圆形：
posx = centerX + Math.cos(angle)*radius;
posy = centerY + Math.sin(angle)*radius;
angle += speed;
创建椭圆：
posx = centerX + Math.cos(angle)*radiusX;
posy = centerY + Math.sin(angle)*radiusY;
angle += speed;
两点间距离：
dx = x2 - x1;
dy = y1 - y2;
dist = Math.sqrt(dx*dx + dy*dy);
加速度（accelerate）
加速度就是使速度加快，减速度就是使速度减慢。
speed += a*speed;
角速度转换为想x，y速度向量
vx = speed * Math.cos(angle);
vy = speed * Math.sin(angle);
角加速度转换为 x，y加速度
ax = force * Math.cos(angle);
ay = force * Math.sin(angle);
速度转换：
vx += ax;
vy += ay;
边界（edge）
边界是一个矩形，就是物体运动不能超过这个矩形范围，这个范围我们一般设为浏览器可视范围。
if(posx - width > right){
posx = left - width;
}else if(posx < left){
posx = left;
}
if(posy - height > bottom){
posy = bottom - height;
}else if(posy < top){
posy = top;
}
反弹（rebound）
反弹即改变物体运动的运动方向为反方向。
摩擦力（Friction）
摩擦力是与速度方向相反的力，从速度中减去这个值。如果摩擦力大于速度，速度就变为0。常用的做法是在速度上乘以0.9或0.8，速度会无限接近零，但永远不会等于0 。这种做法的好处是速度永远不会变为负数，不需要进行判断。
speed = Math.sqrt(vx*vx + vy*vy);
angle = Math.atan2(vy, vx);
if(speed > friction){
speed -= friction;
}else {
speed = 0;
}
vx = Math.cos(angle) * speed;
vy = Math.sin(angle) * speed;
或者
vx *= friction;
vy *= friction;
缓动（easing）
缓动运动，速度与距离成反比，物体离目标越远，物体速度越快。当物体与目标点非常接近时，物体几乎停止运动。
缓动速查： http://easings.net/zh-cn
弹性（springing）
弹性运动，加速度与距离成正比。物体离目标很远，再用上加速度，会使物体移动速度越来越快。当物体接近目标是，加速度减小。物体飞过目标点，再由反向加速度将它拉回来，最终，用摩擦力使其静止。