Problem with LinePath2D and appendMultiplePoints

[Estefania 0 Likes (Newbie)]

I'm having a problem when adding more points to the LinePath2D points array. A jump in the movement animation happens when new points are added. I'm using the example code from the docs and added a button, so when the button is pressed the new points are added.

Here is my code:

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.motionPaths.*;
import flash.geom.Point;
import flash.events.MouseEvent;

var path:LinePath2D = new LinePath2D([new Point(0, 0),
           new Point(100, 100),
           new Point(350, 150),
           new Point(50, 200),
           new Point(550, 400)]);
path.autoUpdatePoints=true;
addChild(path);

path.addFollower(createSquare(10, 0xFF0000), path.getSegmentProgress(2, 0.5));

TweenMax.to(path, 20, {progress:1});

function createSquare(size:Number, color:uint=0xFF0000):Shape {
 var s:Shape = new Shape();
 s.graphics.beginFill(color, 1);
 s.graphics.drawRect(-size / 2, -size / 2, size, size);
 s.graphics.endFill();
 this.addChild(s);
 return s;
}

function addMorePoints(e:MouseEvent){
    btn.visible=false;
    var pathNew:Array = [new Point(700, 400),
           new Point(700, 600)];
    path.appendMultiplePoints(pathNew);
}

btn.addEventListener(MouseEvent.MOUSE_DOWN, addMorePoints);

 

Thanks for the help

[Carl 10,819 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

This sounds like things are behaving as designed, but I can understand the confusion.

 

When you are adding more points you are changing the distance that the objects have to travel and thus they need to move (jump) to accurately reflect the progress in relation to this greater distance.

 

Think of it this way with 1 object moving 100px over the course of 1 second with the following tween.

 

someTween = TweenMax.to(mc, 1, {x:100, ease:Linear.easeNone, paused:true})

 

Imagine you were tweening the progress of that tween from 0 to 1. 

 

Once progress reaches at 0.5 (which would give mc an x of 50) we change the end x value to 1000.  

 

That triggers TweenLite to say, "oh, this tween has to go to 1000, if progress is at 0.5, I'd better move the x of mc to 500"... which visually would cause a jump.

 

Hope this clarifies what you are experiencing.