使用 Paper.js 补间动画

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 集成的相关代码 sn-p。

 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 );