Animating Paper.js path segments & handle info

Question

I'm trying to animate between two complex paths using Paper.js and Tween.js. I've gotten pretty close, I can move all of the points in the path to the correct final positions, but I'm having problems with the handleIn and handleOut for each segment. It doesn't seem to be updating them.

Here's my code: http://codepen.io/anon/pen/rVBaZV?editors=101

var endPathData = 'M740,342.9c-32,...etc...';
var endPath = new Path(endPathData);
endPath.fillColor = '#4CC7A4';

beginPathData = 'M762.8,262.8c-48,...etc...';
var beginPath = new Path(beginPathData);
beginPath.fillColor = '#FFC1D1';

var numberOfSegments = beginPath.segments.length;

for (var i = 0; i < numberOfSegments; i++) {
    var tween = new TWEEN.Tween(beginPath.segments[i].point)
        .to({
        x: endPath.segments[i].point.x,
        y: endPath.segments[i].point.y
    }, 3000)
        .easing(TWEEN.Easing.Linear.None)
        .start();
}

view.draw();

view.onFrame = function (event) {
    TWEEN.update();
};

I'd like the pink path to end up exactly like the green one, but now I'm stuck. Is there anyway to achieve this?

Answer 1

You need to tween the handles too. Each segment has two handles: segment.handleIn and segment.handleOut

in your example code you tween the segment.point (the segments position) resulting in the right location of the segments.

I don't know your Tween library, so it is up to you to implement it. But It looks like you can add to more new tween one for the

beginPath.segments[i].handleIn

and one for the

beginPath.segments[i].handleOut

You can easily check that your code is right by letting paperjs smooth your path and taking care of the handles. By updating the onFrame function like this:

view.onFrame = function (event) {
    TWEEN.update();
    beginPath.smooth();
    endPath.smooth();
};

and this results in the same shaped path.