使用Paper.js的Tweened动画

Question

我希望能够使用Paper.js定义补间动画。到目前为止，我已经确定Tween.js可能是最适合这个的库。但是我没有在网上看到任何例子，所有这些例子似乎都是针对Three.js的。

有没有人对我如何实现补间动画有其他建议？我试图在mouseMove（）mouseDown（）和mouseUp（）事件上为一些路径设置动画。

Answer 1

以下是如何将Tween.js与Paper.js一起使用的几个示例：

• moving a star没有互动的一个非常简单的例子。
• 关于创建一个很好的jelly effect的教程文章，该文章大量使用鼠标和滚动速度。
• CodePen上的complex multipart animation，它使用mouseOver作为触发器。

以下是第一个示例中paperjs + tweenjs集成的相关代码段。

 path.position = {
    x : 100,
    y : 100
  }

  createjs.Tween.get( path.position, { loop: true } )
  .to( { x: 300 }, 1000, createjs.Ease.quadOut )
  .wait( 2000 )
  .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut )
  .wait( 2000 )
  .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut )
  .wait( 2000 )
  .call( function() {
    console.log( 'done!' );
  } );

  var update = function() {
    paper.view.draw();
  }

  createjs.Ticker.setFPS( 60 );
  createjs.Ticker.addEventListener( 'tick', update );