动画中常用的三角函数总结

三角函数基础

sine_of_angle = opposite / hypotense
cosine_of_angle = adjacent / hypotense
tangent_of_angle = opposite / adjacent

角度与弧度转换

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

朝鼠标(或任意一点)旋转

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

创建正弦波

(function drawFrame(){
    window.requestAnimationFrame(drawFrame, canvas);

    value = center + Math.sin(angle) * range;
    angle += speed;
}());

创建圆周

(function drawFrame(){
    window.requestAnimationFrame(drawFrame, canvas);

    xposition = centerX + Math.cos(angle) * radius;
    yposition = centerY + Math.sin(angle) * radius;
    angle += speed;
}());

创建椭圆

(function drawFrame(){
    window.requestAnimationFrame(drawFrame, canvas);

    xposition = centerX + Math.cos(angle) * radiusX;
    yposition = centerY + Math.sin(angle) * radiusY;
    angle += speed;
}());

获取两点间距离

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