Make Things Move -- Javascript html5版(三)三角函數形式的動畫

  角度制和弧度制瀏覽器

  生活中一般是用角度度來理解的,代碼裏都是用弧度制來計算。函數

  角度轉弧度:DEG_TO_RAD = Math.PI / 180this

  弧度裝角度:RAD_TO_DEG = 180 / Math.PIspa

  

 

  正弦:Math.sincode

  波形:blog

 

  y軸的值會在-1和1的區間波動,只要咱們指定一個範圍值,好比50,乘於這個範圍值就能獲得一個在50~-50間的波形。應用於代碼中,實現一個小球按正弦波運動的例子,設定相應的變量:seo

    angle: 角度(即x軸的值)it

    range: 範圍(半徑)io

    speed: 角速度 (x變化的速度)function

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 }
相關文章
相關標籤/搜索