Question

我在paperjs中有一个圆圈和一个矩形对象。现在我想做一个动画。在该动画中，圆圈向上，矩形必须在圆圈后面（圆圈底部）生长。我在这里有一个例子（不按我希望的方式工作）

代码：

var circlePath = new Path.Circle(new Point(50, 50), 25);
circlePath.strokeColor = 'black';

var rectanglePath = new Path.Rectangle({
    point: [20, 20],
    size: [60, 60],
    strokeColor: 'black'
});

var backgroundLayer = new Layer({
    children: [circlePath,rectanglePath],
    position: view.center
});

var newPosition = 200;

circlePath.onFrame = function(event){
    var vector = newPosition-circlePath.position.y;
    circlePath.position.y += vector / 50;
    growRect(rectanglePath.bounds.width, rectanglePath.position.y-circlePath.position.y, rectanglePath);
};

function growRect(width, height, elem){
    var scaleX = width/elem.bounds.width;
    var scaleY = height/elem.bounds.height;  
    var prevPos = new paper.Point(elem.bounds.x,elem.bounds.y);

    elem.scale(scaleX,scaleY);

    prevPos.x += elem.bounds.width/2;
    prevPos.y += elem.bounds.height/2;

    elem.position = prevPos;
};

也许有人可以帮助我！

Answer 1

scale函数可以将中心点作为第三个参数。如果您使用矩形的底部作为缩放中心，它可能会按您的意愿运行。此外，代码将略短。你可以尝试here

var circlePath = new Path.Circle(new Point(50, 50), 25);
circlePath.strokeColor = 'black';

var rectanglePath = new Path.Rectangle({
    point: [20, 20],
    size: [60, 60],
    strokeColor: 'black'
});

var backgroundLayer = new Layer({
    children: [circlePath,rectanglePath],
    position: view.center
});

var newPosition = 200;

circlePath.onFrame = function(event){
    var vector = newPosition-circlePath.position.y;
    circlePath.position.y += vector / 50;
    growRect(rectanglePath.bounds.width, rectanglePath.position.y-circlePath.position.y, rectanglePath);
};

function growRect(width, height, elem){
    var scaleX = width/elem.bounds.width;
    var scaleY = height/elem.bounds.height;  
    elem.scale(scaleX,scaleY, new paper.Point(elem.bounds.x,elem.bounds.bottom));

PaperJS增长矩形（比例）

1 个答案: