Tween segments in the loop

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