使用Paper.js补间动画

Question

我希望能够使用Paper.js定义补间动画。到目前为止，我已经确定Tween.js可能是为此最佳的库。但是，我在网络上没有看到任何示例，它们似乎都是针对Three.js的。

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

Answer 1

以下是一些如何将Tween.js与Paper.js结合使用的示例：

• 一个非常简单的示例，无需交互即可移动星星。
• 一个教程文章，介绍如何创建很好的果冻效果，并大量使用鼠标和滚动速度。
• CodePen上的复杂的多部分动画，使用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 );