Make Things Move -- Javascript html5版（三）三角函数形式的动画

　　角度制和弧度制

　　生活中通常是用角度度来理解的，代码里都是用弧度制来计算。

　　角度转弧度：DEG_TO_RAD = Math.PI / 180

　　弧度装角度：RAD_TO_DEG = 180 / Math.PI

　　

 

　　正弦：Math.sin

　　波形:

 

　　y轴的值会在-1和1的区间波动，只要我们指定一个范围值，比如50，乘于这个范围值就能得到一个在50~-50间的波形。应用于代码中，实现一个小球按正弦波运动的例子,设定相应的变量：

　　　　angle: 角度（即x轴的值）

　　　　range: 范围（半径）

　　　　speed: 角速度 (x变化的速度)

var SinWaveMove = __class__(Ball, {

    __init__: function () {
        Ball.call(this)
        this.init()
    },

    init: function () {
        // 设置球在浏览器的左中位置
        this.y = stage.height / 2

        this.angle = 0
        this.speed = 0.01
        this.range = 500
    },

    onenter: function () {
        this.x = Math.sin(this.angle) * this.range
    }

})

 

　　余弦：Math.cos

　　余弦的波形效果其实也差不多，可以自己实验一下，把上面的Math.sin替换成Math.cos即可.

 

 

　　圆周运动

　　其实就是正统函数和余弦函数配合使用，x轴的值用Math.sin算y轴的值用Math.cos算，共同的半径，同一个角度值来算。小球做圆周运动的例子：

var CircularWave = __class__(Ball, {

    __init__: function () {
        Ball.call(this)
        this.init()
    },

    init: function () {
        // 设置球在浏览器的中心位置
        this.x = this.cx = stage.width / 2
        this.y = this.cy = stage.height / 2

        this.angle = 0
        this.speed = 0.01
        this.radius = 500
    },

    onenter: function () {
        this.x = Math.sin(this.angle) * this.radius + this.cx
        this.y = Math.cos(this.angle) * this.radius + this.cy
    }

})

 

　　椭圆运动

　　其实是圆周运动一样，只是把x轴和y轴的半径设置成不同大小的值就OK了，可以自己试试。

 

　　反正切：Math.atan2

　　因为这个比较有用，用于计算出两点间的偏移角度：angle = Math.atan2(y2 - y1, x2 - x1)  // 这个得到的结果是弧度制的。

　　一个箭头指向鼠标的demo:

var Arrow = __class__(Sprite, {

    __init__: function (attr) {
        Sprite.call(this, attr)
    },

    init: function () {
        this.x = stage.width / 2
        this.y = stage.height / 2
    },

    draw: function (ctx) {
        // 画出一个红色的箭头
        ctx.fillStyle = 'red'
        ctx.beginPath()
        ctx.moveTo(-50, -50)
        ctx.lineTo(0, -50)
        ctx.lineTo(0, -100)
        ctx.lineTo(50, 0)
        ctx.lineTo(0, 100)
        ctx.lineTo(0, 50)
        ctx.lineTo(-50, 50)
        ctx.lineTo(-50, -50)
        ctx.fill()
    }

})

var arrow = new Arrow()
stage.add(arrow)

var RAD_TO_DEG = 180 / Math.PI

document.body.onmouseover = function (e) {
    var rotate = Math.atan2(e.y - arrow.y, e.x - arrow.x)
    arrow.rotation = rotate * RAD_TO_DEG
}