Tween segments in the loop

15 views
Skip to first unread message

Alyona Rodina

unread,
Nov 30, 2021, 7:52:54 PM11/30/21
to Paper.js
Another question:
I have seen in tutorial that we can tween to but the property has to be string:
path.current.tween(
{
"segments[0].point": pathTo[0],
"segments[1].point": pathTo[1],
......
},
1000
);
Is it possible to make it not a string or be able to pass the index in the loop or change it? As we have lots of points.
path.current.segments[i].tween(
{
point: pathTo[i],
},
1000
);
It works quite well if its not the path here:
// for (let i = 0; i < pointsArray.current.length; i++) {
// pointsArray.current[i].tween(
// {
// position: pathTo[i],
// },
// 1000
// );

Thank you for quick response!
Alyona

asensi...@gmail.com

unread,
Dec 1, 2021, 3:55:05 AM12/1/21
to Paper.js
Hi,

I'm not really sure what your goal is but I guess that you could build the string automatically to avoid repetition.
Here's a sketch demonstrating a possible solution.

const source = new Path.Rectangle({
    from: [0, 0],
    to: [200, 100],
    fillColor: 'red',
    opacity: 0.5
});
const destination = new Path.Rectangle({
    from: [250, 250],
    to: [400, 700],
    fillColor: 'blue',
    opacity: 0.5
});

project.activeLayer.fitBounds(view.bounds.scale(0.8));

const properties = {};
destination.segments.forEach((segment, i) => {
    properties[`segments[${i}].point`] = segment.point;
});
source.tweenTo(properties, 2000);

Alyona Rodina

unread,
Dec 1, 2021, 9:25:56 AM12/1/21
to Paper.js
Thank you so much!!! Yes its a great answer properties[`segments[${i}].point`] - did not have it in mind to place 'properties'. Thank you for forwarding me to the example also
Reply all
Reply to author
Forward
0 new messages