如何在 paper.js 中补间 view.center

Question

So I'm trying to give the feel of smooth movement when reassigning the paper.view.center coordinates. The center object doesn't have a tweenTo() method. This is what I've tried using Tween.js:

let smooth = new TWEEN.Tween(paper.view.center).to({
    x: 650,
    y: 270
}, 900).easing(TWEEN.Easing.Cubic.Out).start();

Since it's a Point object reassigning the x and y values don't actually change the coordinates, because the proper way of reassiging it is to use another Point object ( new paper.Point() ). How could I tween the continuously new creation of a Point object?

Answer 1

I think that a simple way of achieving what you want is animating the active layer position.
Here's a sketch demonstrating a possible implementation.

const circle = new Path.Circle({
    center: view.center,
    radius: 50,
    fillColor: 'orange'
});
circle.clone().translate(100)

project.activeLayer.tweenTo(
    { position: { x: 50, y: 50 } },
    { duration: 700, easing: 'easeInOutQuad' }
);