在CreateJS中使粒子爆炸更加逼真

时间:2017-04-06 13:11:58

标签: javascript createjs tweenjs

我的目标是创造一个半现实的粒子效果,基本上看起来像五彩纸屑爆炸。

我目前遇到的问题:

  1. 缓解 - 我尝试了多种不同的缓和效果,但无法正确使用。我想像粒子快速向上飞,在顶部悬挂一小段时间,然后缓慢下降。
  2. 太线性 - 粒子以明显的直线移动。有没有办法让这些看起来像是沿着弯曲的路径移动?
  3. 旋转 - 我希望粒子旋转一点,但是当我添加旋转补间时,它似乎围绕一个奇怪的原点旋转。我如何让粒子围绕它们的中心旋转?
  4. Working JSFiddle

    我最近一直在使用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();
    

0 个答案:

没有答案