requestAnimate 绘制气泡

最新推荐文章于 2024-06-21 08:42:30 发布

潘多拉猫

最新推荐文章于 2024-06-21 08:42:30 发布

阅读量2.1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/pandora_cat_io/article/details/10371383

版权

本文介绍如何利用Boid类作为Bubble的父类，结合requestAnimate实现气泡的动态绘制。通过示例代码和演示文件，展示了如何运用二维数组类Vec2.js进行坐标操作，创建出视觉效果丰富的气泡动画。

摘要由CSDN通过智能技术生成

1.Boid 类作为Bubble 的父类

code:

function getRandom (min, max ) {
	return Math.random() * (max- min) + min; //产生一个在min到max 之间的随机数
}

// the Boid class to be inherited by Bubble class

function Boid (maxSpeed, maxForce, location) {

	this.maxSpeed = maxSpeed;
	this.maxForce = maxForce;
	this.location = location.getCopy();// getCopy 获取副本

	this.velocity = new Vec2(getRandom(-maxSpeed, maxSpeed), getRandom(-maxSpeed, maxSpeed));//获取一个随机数在min 和max之间
	this.accleration = new Vec2();//获取一个二位向量，默认为0 向量
}


//update the positon of the Boid
Boid.prototype.update = function () {
	
	this.velocity.mutableAdd(this.accleration); //更新气泡的速度，新的速度等于原来的速度加上加速度
	this.velocity.limit(this.maxSpeed);// 限制气泡的速度
	this.location.mutableAdd(this.velocity);//更新气泡的位置
	this.accleration.mutableMultCoef(0);//加速度置0
};

2.Bubble 类，继承自Boid 类

code: