在锚定到路径时为 Paper.js 中的多个项目设置动画

Question

我有五个矩形沿着圆圈的不同点放置 - http://imgur.com/uVYkwl7。

单击任何矩形后，我希望圆移动到屏幕左侧，逐渐缩小其半径，直到圆心达到 x=0。我希望五个矩形在缩小时与圆一起移动，并调整它们在圆上的位置和比例，以便它们在视图的范围内，就像这样 - http://imgur.com/acDG0Aw

对于如何执行此操作的任何帮助，我将不胜感激。这是我获取第一张图片并为圆圈设置动画的代码：

var radius = 300;
var center = view.center;

var circle = new Path.Circle({
  center: view.center,
  radius: radius,
  strokeColor: 'black',
  name: 'circle'
});

var path = new Path.Rectangle({
  size: [230, 100],
  fillColor: '#1565C0'
});


var rectText = ['Text 1',
  'Text 2',
  'Text 3',
  'Text 4',
  'Text 5'
];
var symbol = new Symbol(path);

var corners = [
  new Point(center.x, center.y - radius),
  new Point(center.x - radius, center.y - radius / 2),
  new Point(center.x + radius, center.y - radius / 2),
  new Point(center.x - radius, center.y + radius / 2),
  new Point(center.x + radius, center.y + radius / 2)
];

var rectClicked = false;
var clickedRect = null;

var rectClick = function(event) {
  rectClicked = true;
  clickedRect = this;
};

function onFrame(event) {
  // Your animation code goes in here
  if (rectClicked) {
    for (var i = 0; i < 1; i++) {
      var item = project.activeLayer.children[i];
      if (item.name == 'circle') {
        if (item.position.x < 0) {
          rectClicked = false;
        } else {
          item.position.x -= 10;
          item.scale(1/1.01);
        }
      }
    }
  }
}

// Place the instances of the symbol:
for (var i = 0; i < corners.length; i++) {
  var placedSymbol = symbol.place(corners[i]);
  placedSymbol.onMouseDown = rectClick;
  var rText = new PointText({
    point: placedSymbol.bounds.topLeft + 20,
    content: rectText[i],
    fontSize: '20',
    fillColor: 'white'
  });
}

Answer 1

Paper.js 开箱即用地提供 围绕枢轴 的旋转。

var pivotPoint = new Point(10, 5);
circle.rotate(30,pivotPoint);

这是docs reference for this behaviour and here is a very basic Sketch example to illustrate this

上面的代码片段将围绕 pivot 坐标 10,5 处的 [=38] 点旋转 30 度=]轴.

因此，只要您的元素遵循的路径始终是圆形的，您所描述的肯定是可行的。

请记住，为了让枢轴旋转按照您希望的方式工作，您需要更新 pivotPoint 并重新启动旋转。

注意：如果您想沿着任意形状而不是圆形路径移动，您应该搜索 Paper.js animation-along-a-path 这是我以前看到过的事情没有太大困难 - 例如这个简单的 Sketch 由 Paper.js 的创建者本人完成。

我上面提供的草图是围绕轴心点旋转的基本示例。

我在这里转储 Sketch 代码以防 link 死机：

//Create a center point
var centerCircle = new Path.Circle(paper.view.center, 100);
centerCircle.strokeColor = 'black';
centerCircle.dashArray = [10, 12];


//Create the circles
var circle1Radius = 30;
var circle1 = new Path.Circle((centerCircle.position-centerCircle.bounds.width/2)+circle1Radius, circle1Radius);
circle1.fillColor = '#2196F3';

var circle2Radius = 40;
var circle2 = new Path.Circle((centerCircle.position-centerCircle.bounds.width/2)+circle2Radius, circle2Radius);
circle2.fillColor = '#E91E63';

var circle3Radius = 40;
var circle3 = new Path.Circle((centerCircle.position-centerCircle.bounds.width/2)+circle2Radius, circle2Radius);
circle3.fillColor = '#009688';


var i=0;
var animationGap = 125; //how long to move before animating the next circle
var rotationSpeed = 2;
function onFrame(event) {

    circle1.rotate(rotationSpeed,centerCircle.position);

    if(i>animationGap)
        circle2.rotate(rotationSpeed,centerCircle.position);

    if(i>animationGap*2)
        circle3.rotate(rotationSpeed,centerCircle.position);
    i++;
}

在锚定到路径时为 Paper.js 中的多个项目设置动画

Animating multiple items in Paper.js while anchored to a path

javascript

animation

paperjs