createjs实现的canvas粒子动画特效-html代码-BFW代码库

createjs实现的canvas粒子动画特效

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Triangle Springs</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            background: #000;
        }

    </style>


</head>
<body translate="no">
    <script src="http://repo.bfw.wiki/bfwrepo/js/underscore-min.js"></script>
    <canvas id="canvas"></canvas>

    <script src='http://repo.bfw.wiki/bfwrepo/js/createjs.min.js'></script>
    <script src='http://repo.bfw.wiki/bfwrepo/js/jquery.17.js'></script>
    <script>
     $('#canvas').attr('width', $(window).width() );
$('#canvas').attr('height', $(window).height() );

function createBall(color, rad) {
	var ball = new createjs.Shape();
	ball.graphics.beginFill(color).drawCircle(0, 0, rad);
	ball.vx = 0;
	ball.vy = 0;
	return ball;
}

function clamp(aMin, aNum, aMax) {
	return Math.min(Math.max(aMin, aNum), aMax);
}

const BALLS_NUM = 50;
const MOVE_TIME = 1500;

let ballsArr = [];
let stage = new createjs.Stage('canvas');
let lastTime = Date.now();

class Balls extends createjs.Container {
	
	constructor() {
		super();
		this.ballsNum = 3;
		this.balls = [];
		this.line = new createjs.Shape();
		
		this.spring = _.random(5, 10) / 100;
		this.springLength = _.random(10, 200);
		this.friction = _.random(70, 95) / 100;
		
		for (let i = 0; i < this.ballsNum; i++) {
			this['isActive' + i] = false;
		}
		this._setup();
	}
	
	_setup() {
		this.addChild(this.line);
		for (let i = 0; i < this.ballsNum; i++) {
			let color = createjs.Graphics.getRGB(0x999999, Math.random());
			let ball = createBall(color, _.random(3, 10));
			ball.x = Math.random() * stage.canvas.width;
			ball.y = Math.random() * stage.canvas.height;
			ball.id = i;
			this.balls.push( ball );
			this.addChild(ball);
		}
	}
	
	move() {
		let delay = _.random(300, 800);
		let targetID = Math.floor( Math.random() * this.balls.length);
		let target = this.balls[targetID];
		let cp = n.........完整代码请登录后点击上方下载按钮下载查看