• 跟动画有关的数学和物理公式角度与弧度互转朝鼠标指针（或任意一点）旋转创建波创建圆形创建椭圆获得两点间的距离绘制一条穿越某个点的曲线将角速度分解为x、y轴上的速度向量将角加速度（作用于物体上的力）分解为x、y轴上的加速度将加速度加入速度向量将速度向量加入位置坐标移除越界物体重置越界物体屏幕环绕越界物体应用摩擦力（正确方法）应用摩擦力（简便方法）简单缓动简单弹动有偏移量的弹动基于距离的碰撞检测多物理碰撞检测坐标旋转反向坐标旋转动量守恒万有引力余弦定理基本透视图Z排序坐标旋转三维距离参考资料

跟动画有关的数学和物理公式

角度与弧度互转

radians=degrees*Math.PI/180degrees=radians*180/Math.PI

朝鼠标指针（或任意一点）旋转

dx=mouse.x-object.x;dy=mouse.y-boject.y;object.rotation=Math.atan2(dy,dx)*180/Math.PI;

创建波

(function(){  window.requestAnimationFrame(drawFrame,canvas);  value=center+Math.sin(angle)+range;  angle+=speed;}());

创建圆形

(function(){  window.requestAnimationFrame(drawFrame,canvas);  xposition=centerX + Math.cos(angle) * radius;  yposition=center + Math.sin(angle) * radius;  angle += speed;}());

创建椭圆

(function(){  window.requestAnimationFrame(drawFrame,canvas);  xposition=centerX + Math.cos(angle) * radiusX;  yposition=center + Math.sin(angle) * radiusY;  angle += speed;}());

获得两点间的距离

dx = x2 - x1;dy = y2 - y1;dist = Math.sqrt(dx * dx + dy * dy);

绘制一条穿越某个点的曲线

x1 = xt * 2 - (x0 + x2) / 2;y1 = yt * 2 - (y0 + y2) / 2;context.moveTo(x0, y0);context.quadraticCurveTo(x1, y1, x2, y2);

将角速度分解为x、y轴上的速度向量

vx = speed * Math.cos(angle);vy = speed * Math.sin(angle);

将角加速度（作用于物体上的力）分解为x、y轴上的加速度

ax = force * Math.cos(angle);ay = force * Math.sin(agnle);

将加速度加入速度向量

vx += ax;vy += ay;

将速度向量加入位置坐标

object.x += vx;object.y += vy;

移除越界物体

if(object.x - object.width /2 > right ||   object.x + object.width /2 < left ||   object.y - object.height /2 > bottom ||   object.y + object.height /2 < top){}

重置越界物体

if(object.x - object.width /2 > right ||   object.x + object.width /2 < left ||   object.y - object.height /2 > bottom ||   object.y + object.height /2 < top){}

屏幕环绕越界物体

if(object.x - object.width /2 > right){  object.x = left - object.width / 2;}else if(object.x + object.width /2 < left){  object.x = right + object.width /2;}if(object.y - object.height / 2 > bottom){  object.y = top -  object.height / 2;}else if(object.y + object.height / 2 < top){  object.y = bottom + object.height /2;}

应用摩擦力（正确方法）

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;

简单缓动

object.x += (targetX - object.x) * easing;object.y += (targetY - object.y) * easing;

简单弹动

vx += (targetX - object.x) * spring;vy += (targetY - object.y) * spring;object.x += (vx *= friction);object.y += (vy *= friction);

有偏移量的弹动

var dx = object.x - fixedX,    dy = object.y - fixedY,    angle = Math.atan2(dy,dx),    targetX = fixedX + Math.cos(angle) * springLength,    targetY = fixedX + Math.sin(angle) * springLength;

基于距离的碰撞检测

var dx = objectB.x - objectA.x,    dy = objectB.y - objectB.y,    dist = Math.sqrt(dx * dx + dy * dy);if(dist < objectA.radius + objectB.radius){}

多物理碰撞检测

objects.forEach(function(objectA, i){  for(var j = i + 1; j < objects.length; j++){    var objectB = objects[j];    //执行碰撞检测，在objectA和objectB之间。  }});

坐标旋转

x1 = x * Math.cos(rotation) - y * Math.sin(rotation);y1 = y * Math.cos(rotation) + x * Math.sin(rotation);

反向坐标旋转

x1 = x * Math.cos(rotation) + y * Math.sin(rotation);y1 = y * Math.cos(rotation) - x * Math.sin(rotation);

动量守恒

var vxTotal = vx0 -vx1;vx0 = ((ball0.mass -ball1.mass) * vx0 + 2 * ball1.mass * vx1) / (ball0.mass + ball1.mass);vx1 = vxTotal + vx0;

万有引力

function gravitate(partA, partB){  var dx = partB.x - partA.x;      dy = partB.y - partA.y;      distSQ =  dx * dx + dy * dy;      dist = Math.sqrt(distSQ);      force = partA.mass * partB.mass / distSQ;      ax = force * dx /dist;      ay = force * dy / dist;  partA.vx += ax / partA.mass;  partA.vy += ax / partA.mass;  partB.vx -= ax / partB.mass;  partB.vy -= ax / partB.mass;}

余弦定理

var A = Math.acos((b * b + c * c - a * a) / (2 * b * c));var B = Math.acos((a * a + c * c - b * b) / (2 * a * c));var C = Math.acos((a * a + b * b - c * c) / (2 * a * b));

基本透视图

scale = fl / (fl + zpos);object.scaleX = object.scaleY = scale;object.alpha = scale;object.x = vanishingPointX + xpos * scale;object.y = vanishingPointY + ypos * scale;

Z排序

function zSort(a, b){  return (b.zpos - a.pos);}objects.sort(zsort);

坐标旋转

x1 = xpos * cos(angleZ) - ypos * sin(angleZ);y1 = ypos * cos(angleZ) - xpos * sin(angleZ);x1 = xpos * cos(angleY) - zpos * sin(angleY);z1 = zpos * cos(angleY) + xpos * sin(angleY);y1 = ypos * cos(angleX) - zpos * sin(angleX);z1 = zpos * cos(angleX) + ypos * sin(angleX);

三维距离

dist = Math.sqrt(dx * dx + dy * dy + dz * dz);

参考资料

• A Quick Look Into The Math Of Animations With JavaScript

原文: https://leohxj.gitbooks.io/front-end-database/content/animation/relative-math.html