Paper.js 中的动画片段和位置

Question

我需要在多边形上开发 2 个动画：

每段自动旋转
多边形跟随鼠标移动

我正在尝试使用以下代码来做到这一点：

// onMouseMove
tool.onMouseMove = function (event) {
  mousePoint = event.point;
};

// onFrame
view.onFrame = function (event) {

  // Animation 1: Automatic circular rotation of each segment
  for (var i = 0; i < polygon.segments.length; i++) {
    var offsetRotation = new Point(Math.cos(event.time + i * 2), Math.sin(event.time + i * 2)).multiply(10);
    polygon.segments[i].point = polygonCached.segments[i].point.add(offsetRotation);
  }

  // Animation 2: the polygon moves following the mouse movements with transition
  var delta = mousePoint.subtract(polygon.position).divide(15);
  polygon.position = polygon.position.add(delta);

};

完整代码如下：https://codepen.io/anon/pen/YMgEEe?editors=0010

使用上面的代码，每个线段的自动旋转都有效，多边形根本不跟随鼠标，也没有过渡。相反，评论自动旋转动画它正确地跟随鼠标进行过渡。

为了检查转换是否有效，我将鼠标光标移出浏览器 window，然后从另一点返回。现在，当多边形移动时，您将看不到过渡。

我哪里错了？

Answer 1

也只需移动 polygonCached。

polygonCached.position = polygonCached.position.add(delta);

https://codepen.io/arthursw/pen/LvKPXo

多边形的缓存版本没有移动，所以每次旋转点时，它们的位置都会被重置。

Paper.js 中的动画片段和位置

Animate segments and position in Paper.js

javascript

animation

paperjs