JS动画理论

动画（Animation）

动画意味着随着时间而变化，尤其指视觉上的变化，包括位置、形态等的变化。运动基本上表现为物体随时间，发生位置上的变化；形态基本表现为大小、颜色、透明度、形状等随时间的变化。

图像以每秒24帧的速度播放，最容易看成运动的图像。比这个速度再慢些，会由于停顿时间较长，人眼会感觉影像不连贯。人眼似乎不能分辨比这个帧频再快的速度，理论上讲，帧频再快也不会使动画变得更真实，虽然快速的帧频，看上去会更平滑。

三角学（Trigonometry）

三角学是研究三角形与其边和角关系的学科。一个三角形有三条边和三个角，这些边和角存在着一些特殊的关系。比如，增大其中任何一个角，那么该角对应的边就会增长，假设其它两条边长度不，其它两个角会变小。我们在动画中，经常遇到的是直角三角形模型，其中一个角为90度。

勾股定理

直角三角形两直角边长的平方和等于斜边长的平方。由上图可推出： b² + c² = a²

斜边公式

（一）已知两条直角边的长度 ，可按勾股定理计算斜边 ：a² = b² + c²

（二）已知一条直角边和一个锐角，可用直角三角函数计算斜边。

 

∠B+∠C=90°

 

正弦（sine）

sinB = ∠B的对边(AC)/斜边(BC)

余弦（cosine）

cosB = ∠B的邻边(AB)/斜边(BC)

正切（tangent）

tanB =  ∠B的对边(AC)/∠B的邻边(AB)

反正弦（arcsine）

∠B = Math.asin(∠B的对边(AC)/斜边(BC))

反余弦（arccosine）

∠B = Math.acos(∠B的邻边(AB)/斜边(BC))

反正切（arctangent）

∠B = Math.atan(∠B的对边(AC)/∠B的邻边(AB))

坐标系（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）

弹性运动，加速度与距离成正比。物体离目标很远，再用上加速度，会使物体移动速度越来越快。当物体接近目标是，加速度减小。物体飞过目标点，再由反向加速度将它拉回来，最终，用摩擦力使其静止。