js实现粒子虹吸交互动画效果代码-html代码-BFW代码库

js实现粒子虹吸交互动画效果代码

代码语言：html

所属分类：粒子

代码描述：js实现粒子虹吸交互动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
* {
	margin: 0;
	padding: 0;
	border: 0;
}
body {
	background-color: black;
}
</style>



</head>

<body >
  <div id="output"></div>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/easeljs.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>
      <script >
class Particle extends createjs.Container {
	constructor(image, x, y, right, bottom) {
		super();
		this.x = x;
		this.y = y;
		this.right = right;
		this.bottom = bottom;
		this.velocityX = 0;
		this.velocityY = 0;
		this.friction = 0.95;
		this.addChild(image);
	}
	update(right, bottom) {
		this.right = right;
		this.bottom = bottom;
	}
	accelerateTo(targetX, targetY) {
		let _x = this.x;
		let _y = this.y;
		let _velocityX = this.velocityX;
		let _velocityY = this.velocityY;
		const differenceX = targetX - _x;
		const differenceY = targetY - _y;
		const square = differenceX * differenceX + differenceY * differenceY;
		let ratio;
		if (square > 0) {
			ratio = 50 / square;
		} else {
			ratio = 0;
		}
		const accelerationX = differenceX * ratio;
		const accelerationY = differenceY * ratio;
		_velocityX += accelerationX;
		_velocityY += accelerationY;
		_velocityX *= this.friction;
		_velocityY *= this.friction;
		_x += _velocityX;
		_y += _velocityY;
		if (_x < 0) {
			_x += this.right;
		} else if (_x > this.right) {
			_x -= this.right;
		}
		if (_y < 0) {
			_y += this.bottom;
		} else if (_y > this.bottom) {
			_y -= this.bottom;
		}
		this.x = _x;
		this.y = _y;
		this.velocityX = _velocityX;
		this.velocityY = _velocityY;
	}
}
class LinkedList {
	push(element) {
		const _last = this.last;
		if (_last) {
			_last.next = element;
			element.prev = _last;
			this.last = element;
		} else {
			this.first = this.last = element;
		}
	}
}

let stage;
let stageWidth;
let stageHeight;
const mousePoint = new createjs.Point();
const particles = new LinkedList();
const numParticles = 30000;
let canvasElement;
let fader;
const color = '#19101C';
const stats = new Stats();
function initialize() {
	const outDOM = document.getElementById('output');
	canvasElement = document.getElementById('myCanvas');
	/* stageWidth = window.innerWidth;
	stageHeight = window.innerHeight;
	canvasElement.width = stageWidth;
	canvasElement.height = stageHeight; */
	resetStage();
	outDOM.appendChild(stats.domElement);
	setStatsStyle('absolute', '0px');
	stage = n.........完整代码请登录后点击上方下载按钮下载查看