html5 canvas动画龙的特效教程2(残次品)

liujieheng 2014-01-10

来源:flash,as,js兴趣爱好者html5 canvas动画龙的特效教程2(残次品)     搞了一个晚上才解决了单帧循环的问题。然后好像还有问题,龙变成了大蜈蚣。
    
    这只大蜈蚣跟随鼠标运动。
    flash cc里设置类似as3 event.enterframe的方法:
    

    this.addEventListener("tick",fl_RotateContinuously.bind(this));
    function fl_RotateContinuously(){
    
    xDif = stage.mouseX - this.x;
    yDif = stage.mouseY - this.y;
    this.oldTAngle = this.newTAngle;
    this.newTAngle = Math.floor(Math.atan2(xDif, yDif) / this.RADIANS);
    if (!(this.oldTAngle < this.newTAngle - 180 && this.rotations > -1))
    {
    if (this.newTAngle + 180 < this.oldTAngle && this.rotations < 1)
    {
    ++this.rotations;
    } // end if
    }
    else
    {
    --this.rotations;
    } // end else if
    this.targetAngle = this.newTAngle + 360 * this.rotations;
    if (this.targetAngle >= this.angle)
    {
    if (this.angle < this.targetAngle)
    {
    this.angleAdd = this.angleAdd + 0.500000;
    } // end if
    }
    else
    {
    this.angleAdd = this.angleAdd - 0.500000;
    } // end else if
    this.count = this.count + 10;
    this.angle = this.angle + (this.angleAdd + 10 * Math.sin(this.count * this.RADIANS));
    if (this.angle < this.targetAngle + 30 && this.targetAngle - 30 < this.angle)
    {
    this.angleAdd = this.angleAdd / 2;
    } // end if
    this.rotation = -this.angle;
    Vx = 20 * Math.sin(this.angle * this.RADIANS);
    Vy = 20 * Math.cos(this.angle * this.RADIANS);
    this.x = this.x + Vx;
    this.y = this.y + Vy;
    parent.targetAngle = Math.atan2(xDif, yDif) * this.RADIANS;
    parent.angle = this.angle;
    }

Global site tag (gtag.js) - Google Analytics