我的目标是创造一个半现实的粒子效果,基本上看起来像五彩纸屑爆炸。
我目前遇到的问题:
我最近一直在使用GSAP,我也想知道是否有办法在前一个结束之前的时间轴中启动补间?
function init(){
var canvas = document.getElementById('canvas'),
stage = new createjs.Stage(canvas);
var colors = [
'#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
'#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
'#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
'#FF5722', '#795548'
];
for (i=0;i<300;i++){
var particleSize = Math.floor(Math.random() * 14) + 4;
var particle=new createjs.Shape();
particle.graphics.beginFill(colors[Math.floor(Math.random() * 17) + 1 ]).drawRect(
Math.floor(Math.random() * 101) - 50 + canvas.width/2 - (particleSize/2), // x
Math.floor(Math.random() * 101) - 50 + canvas.height/2 - (particleSize/2), // y
particleSize, // w
particleSize // h
);
stage.addChild(particle);
stage.update();
var timeMove = Math.floor(Math.random() * 800) + 600,
timeFall = Math.floor(Math.random() * 1600) + 300,
moveX = particle.x + Math.floor(Math.random() * 401) - 200,
moveY = particle.y - Math.floor(Math.random() * 200) + 1,
fallY = particle.y - Math.floor(Math.random() * 400) + 1;
createjs.Tween.get(particle, {loop: false})
.to({x: moveX, y: moveY }, timeMove, createjs.Ease.quadOut)
.to({x: moveX + (moveX/1.2), y: 600 }, timeFall, createjs.Ease.quadIn);
}
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
}
init();