使用TweenJS和EaselJS激光动画

时间:2015-12-07 04:35:19

标签: javascript easeljs tween

所以,我试图制作激光效果,类似于位于http://map.norsecorp.com/的激光效果

对于这个例子,我有500x500画布。解决方案的当前javascript部分位于:

function shootLaser(x, y) {
  var beam = new createjs.Shape();

  beam.graphics.beginFill("red");
  beam.graphics.moveTo(0,1.5).lineTo(70,0).lineTo(70,3).closePath();
  beam.x = 80;
  beam.y = 50;
  stage.addChild(beam);

  beam.setBounds(0,0,70,3);
  createjs.Tween.get(beam,{ loop: true, onChange: beamUpdate })
    .to({ x: 400 }, 1000, createjs.Ease.linear());
}

function beamUpdate(e) {
  var beam = e.currentTarget.target;
  var targetX = e.currentTarget._curQueueProps.x;

  if( targetX - beam.x < beam.getBounds().width ) {
    beam.scaleX = (targetX - beam.x) / targetX;
  } else {
    beam.scaleX = 1;
  }
}

这就是我想要的方式。然而,scaleX方法并不起作用(实际上甚至没有关闭,它只是非常快地非常小)。

问题在于我无法找到缩小激光器的方法。一旦达到它的目标。如果我从0px到250px拍摄它。它应该达到250px并开始收缩,直到第250个像素消耗了#34;因为缺乏一个更好的术语。非常感谢任何帮助。

P.S。我也愿意与其他图书馆或工具一起做这件事。我还没找到他们。

0 个答案:

没有答案