Question

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

点击任何矩形后，我希望圆圈移动到屏幕的左侧，逐渐缩小它的半径直到圆的中心到达x = 0。我希望五个矩形与圆圈一起移动，同时缩小它并调整它们自己的位置并在圆圈上缩放，使它们在视图的范围内，如下所示 - {{3 }}

我很感激有关如何做到这一点的任何帮助。下面是我的代码，用于获取第一张图像并为圆圈设置动画：

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，此处非常basic Sketch example to illustrate this

上面的代码片段会围绕x / y轴坐标10,5处的 pivot 点旋转一个圆圈（您可以将其更改为矩形）（。）。

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

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

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

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

我将这里的Sketch代码转储，以防链接失效：

//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中的多个项目

1 个答案: