html5 canvas动画龙的特效教程2（残次品）

liujieheng 2014-01-10 10:42:30

来源: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;
}

...全文