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

我有五个矩形放置在一个圆的不同点上，就像这样-

单击任意矩形后，我希望圆移动到屏幕左侧，逐渐缩小其半径，直到圆的中心达到x=0。我希望这五个矩形在被缩小的过程中随着圆移动，同时调整它们自己在圆上的位置和比例，使它们在视图的边界内，如下所示-

如果你能帮我做这件事，我将不胜感激。下面是我的代码，用于获取第一张图像并设置圆的动画：

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

var半径=300；
var center=view.center；
var circle=新路径。circle({
中心：view.center，
半径：半径，
strokeColor:'黑色'，
名称：“圆圈”
});
var path=新路径。矩形({
尺寸：[230100]，
fillColor:“#1565C0”
});
var rectText=['Text 1'，
"文本2",，
"文本3",，
"文本4",，
“文本5”
];
变量符号=新符号（路径）；
变量角=[
新点（中心x，中心y-半径），
新点（中心x-半径，中心y-半径/2），
新点（中心x+半径，中心y-半径/2），
新点（中心x-半径，中心y+半径/2），
新点（中心x+半径，中心y+半径/2）
];
var=false；
var clickedRect=null；
var rectClick=函数（事件）{
rect=true；
单击rect=this；
};
函数onFrame（事件）{
//你的动画代码在这里
如果（单击）{
对于（变量i=0；i<1；i++）{
var item=project.activeLayer.children[i]；
如果（item.name=='circle'）{
如果（项目位置x<0）{
错误=false；
}否则{
项目位置x-=10；
项目.比额表（1/1.01）；
}
}
}
}
}
//放置符号的实例：
对于（变量i=0；i

Paper.js提供了围绕轴旋转的功能即插即用

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

这是这种行为的原因，这是一个非常重要的原因

上面的代码片段将围绕x/y轴上坐标10,5处的轴点旋转一个圆（在本例中可以将其更改为矩形）30度

因此，只要元素所遵循的路径始终是循环的，那么您所描述的肯定是可行的

请记住，为了使枢轴旋转按您希望的方式工作，您需要更新

枢轴点

，然后重新初始化旋转

注意：如果你想沿着任意形状而不是圆形路径移动，你应该搜索Paper.js动画-沿着路径，这是我以前见过的，没有太多困难-例如，Paper.js的创建者自己做的简单

---

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

我在这里转储草图代码以防链接失效：

//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++;
}

---

你是否希望围绕一个轴旋转你的形状，就像是的，非常类似于你发布的内容。矩形将围绕圆的中心旋转（同时圆也向左移动）到其最终位置，如我发布的第二张图片所示。谢谢谢谢这真的很有帮助，尤其是你发布的“便条”中的链接。我唯一关心的是，当圆完成动画制作后，如何在特定点定位（停止移动），如我发布的第二幅图像。您可以使用例如

if（element.position.x）检查元素的位置