0

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

我目前遇到的问题：

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

工作 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();
4

0 回答 0