Can't get bezier working as expected

[Eckstein1]

Hi,

 

I'm tweening objects along a bezier curve with a linear easing. I'd expect that all objects are because I'm easing linear equally distributed along the curve. But indeed they are distributed like using a non-linear easing.

 

Code reproducing this effect follows. Please note the code doesn't make sense. It's optimized to visualize the effect I'm talking about.

 

I create six circles. They are tweened by a timeline along the same bezier curve. The circles are delayed with a distance of 1s. If the first circles completes it's tween all timelines are paused. Please take a look at the output.

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;

var o1:Object;
var u1:uint;

o1 = {bezier:[{x:147, y:365}, {x:117, y:332}, {x:113, y:210}, {x:118, y:97}], delay:0, ease:Linear.easeNone, repeat:0};
for (u1=1; u1<7; u1++) {
 addTimeline("tc", u1, o1, createShape(true, "ci"+u1, u1*10000, o1));
}

function createShape(b1:Boolean, s1:String, i1:int, o1:Object):Object {
 var o2:Shape;
 o2 = (this[s1] = new Shape());
 o2.graphics.beginFill(i1, 0.5);
 o2.graphics.drawCircle(418, 197, 10);
 o2.graphics.endFill();
 addChild(o2);
 o2.x = o1.bezier[0].x;
 o2.y = o1.bezier[0].y;
 return o2;
}

function addTimeline(s1:String, u1:uint, o1:Object, o2:Object) {
 var o3:Object;
 o1.delay = u1;
 o3 = {repeat:0};
 if (u1 == 1) {
	  o3.onComplete = pauseAll
 }
 this[s1+u1] = new TimelineMax(o3);
 this[s1+u1].insert(new TweenMax(o2, 5, o1));
}

function pauseAll() {
 TweenMax.globalTimeScale = 0;
}

 

Is my expectation correct? What am I doing wrong?

 

Thanks in advance and kind regards,

Uli

 

PS: I'm using the latest files of V11

[GreenSock]

Ah yes, Beziers by their very nature don't offer smooth, linear, even dispersing along the path. Most tweening systems have the same problem. However, I have good news: I've been working for weeks on a complete revamp of the entire BezierPlugin for v12 and it's available now - it implements some fancy footwork to solve the problem you mentioned (see the "timeResolution" special property). Plus it offers a BUNCH of new features. See the docs here:

http://api.greensock.com/as/com/greensock/plugins/BezierPlugin.html

 

Again, this is only for v12 of the animation platform, so you cannot use this with the older v11 stuff. Many other improvements have been made to the whole platform in v12, as described at http://www.greensock.com/v12/ I think you'll like it a lot, and don't worry: the API is almost identical to v11.

 

Also note that if you want the Bezier dawn in the same way as the old v11 BezierPlugin (just coordinates, not the uneven timing), use the type:"soft" in the new BezierPlugin. There are several other types to choose from now, of course. The algorithm for drawing the Bezier through a set of points has been greatly enhanced - you can even define the "curviness".

 

Have fun!