C/C++教程

Canvas实现物体基本运动

本文主要是介绍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

这篇关于Canvas实现物体基本运动的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!