html5 canvas爆炸,TweenMax.js HTML5/Canvas 爆炸动效

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var canvas = document.getElementById('canvas'),

ctx = canvas.getContext('2d');

// Set to size of browser

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

var centerX = canvas.width / 2,

centerY = canvas.height / 2;

var squares = [],

colors = ['242, 56, 90', '245, 165, 3', '74, 217, 217', '54, 177, 191'],

totalSquares = randomNumber(190, 230);

for (var i = 0; i < totalSquares; i++) {

var p = Math.random(),

x = centerX,

y = centerY;

var square = new Square(x, y, colors[Math.floor(i % colors.length)], randomNumber(3, 14), randomNumber(0.5, 1));

square.innerX = x;

square.innerY = y;

squares.push(square);

}

// Draw squares

function Square(x, y, color, size, alpha) {

var _this = this;

_this.x = x || null;

_this.y = y || null;

_this.color = color || null;

_this.size = size || null;

_this.alpha = alpha || null;

this.draw = function(ctx) {

ctx.beginPath();

ctx.rect(_this.x, _this.y, _this.size, _this.size);

ctx.fillStyle = 'rgba(' + _this.color + ', ' + _this.alpha + ')';

ctx.fill();

}

}

function loop() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < squares.length; i++) {

squares[i].draw(ctx);

}

requestAnimationFrame(loop);

}

loop();

function randomNumber(min, max) {

return Math.random() * (max - min) + min;

}

var longestReturnDuration = 0,

returnDuration = 0;

function tweenSquares(square) {

returnDuration = 1.5 + Math.random();

// Keep longest duration to use for delay

if (returnDuration > longestReturnDuration) {

longestReturnDuration = returnDuration;

}

TweenMax.to(square, 0.7 + Math.random(), {

x: randomNumber(0, canvas.width),

y: randomNumber(0, canvas.height),

width: 20,

delay: longestReturnDuration + 1,

ease: Cubic.easeInOut,

onComplete: function() {

TweenMax.to(square, longestReturnDuration, {

x: centerX,

y: centerY,

width: 5,

ease: Cubic.easeInOut,

onComplete: function() {

tweenSquares(square);

}

})

}

});

}

for (var i = 0; i < squares.length; i++) {

tweenSquares(squares[i]);

}