Canvas实现物体基本运动

动画中最常见的就是物体运动。物体的位置随时间变化而变化，变化的规律不同，运行的形式也不同。本文学习参考文献1中的几种运动形式，并实践其中的案例。

匀速运动

匀速运动是人们很熟悉的运动方式，初、高中的时候就应该都接触过其概念，即物体单位时间内移动相同的距离。大家都学过，速度有方向性，能沿着任意方向移动，为了方便研究，将速度分解为x方向和y方向的速度，这也方便了程序实现。
在程序中定义物体x方向和y方向的速度，然后在每帧动画中增加按x方向和y方向更新物体的x坐标和y坐标。

	object.X += vx;
	object.y += vy;

本例中物体为圆形，绘制时以圆心为主，实现其匀速运动主要是更新圆心位置，程序示意图如下所示：
在这里插入图片描述

加速运动

加速运动人们也不陌生，即物体的速度不停变化，如果是逐步增加则为加速运动，逐步减少则为减速运动，速度单位时间内变化的量为加速度，这个概念大家也都学过。
加速度也有方向性，为了方便研究，将加速度分解为x方向和y方向，方便程序实现。
在程序中定义物体x方向和y方向的加速度，然后在每帧动画中增加按x方向和y方向更新物体的速度。

	//更新位置
	object.X += vx;
	object.y += vy;
	//更新速度
	vx += ax;
	vy += ay;

加速运动的程序示意图如下所示：
在这里插入图片描述

圆周运动

圆周运动是指物体沿着圆弧运动，参考文献中提供了正圆和椭圆两种圆周运动，这两种运动的区别主要是计算物体位置的方式不同。

	//正圆参数
	circleX,circleY,circleR;//正圆圆心坐标及半径
	θ//圆心到物体的线与x轴的夹角
	object.X = circleX + cosθ * circleR;
	object.y = circleY + sinθ * circleR;

	//椭圆参数
	circleX,circleY,circleXR，circleYR;//椭圆中心坐标，长轴半径及短轴半径
	θ//中心到物体的线与x轴的夹角
	object.X = circleX + cosθ * circleXR;
	object.y = circleY + sinθ * circleYR;

从上面的计算方法可以看出，物体的位置变化主要是由角度变化引起的，因此圆周运动时发生变化的主要是角度，然后根据角度计算物体的位置。
正圆圆周运动和椭圆圆周运动的程序示意图如下所示：
在这里插入图片描述

波形运动

参考文献中介绍的波形运动主要是正弦波和余弦波的路径运动，通过角度、振幅等参数计算物体的位置。本文中主要以物体从左向右运动，上下振动为例介绍波形运动。
物体沿x轴匀速运动，同时y方向根据正弦函数计算y坐标，这两个方向的运动合成后形成物体的波形运动。

	var range=30;//波形运动y方向振幅
	var curAngle=0;//波形运动初始角度
    var angleV=0.05;//波形运动角速度
    
    //球形物体初始参数
    var ballX=0;
    var ballY=cnv.height/2;
    var ballR=10;
        
    var vx=1;//物体x方向速度
    
    //计算物体位置
	ballX+=vx;
	ballY=cnv.height/2+Math.sin(curAngle)*range;

波形运动的程序示意图如下所示：
在这里插入图片描述

参考文献：
[1]从0到1 HTML5 Canvas动画开发
[2]https://baike.baidu.com/item/%E5%8A%A0%E9%80%9F%E5%BA%A6/3764?fr=aladdin