Problems with Bezier/BezierThrough

[martis 32 Likes (Newbie)]

Hey Jack,

 

I am using TweenMax 10.12 (AS3).

 

I have run into a problem where... if I tween something like so...

 

TweenMax.to(thumb, slideTime, {transformAroundCenter:{rotation:this.layoutData[index].rotation},

x:this.layoutData[index].point.x,

y:this.layoutData[index].point.y,

ease:Back.easeOut,

onComplete:thumbTweenComplete,

onCompleteParams:[thumb]

});

 

then later try to do something like...

 

TweenMax.to(clickedThumb, slideTime, {transformAroundCenter:{rotation:this.layoutData[0].rotation},

bezierThrough:[{x:200, y:200},

{x:this.layoutData[0].point.x,

y:this.layoutData[0].point.y}],

ease:Quad.easeOut,

onComplete:thumbTweenComplete,

onCompleteParams:[clickedThumb]

});

 

The x, y of the object will not tween. I tried using overwrite:1, that seemed to work, but it doesn't work in a browser?? Have you ran into any problems with do a normal x, y tween then later trying to do a bezier tween? Thanks

[GreenSock 18,884 Likes (Superhero)]

There are two problems with what you're attempting:

 

1) transformAroundCenter couldn't work anyway because if you're doing a bezier x/y tween, it will always position the registration point at the x/y coordinates. So if, for example, the transformAroundPoint did its job perfectly and rotated your object so visually the center stays put, and then your bezier tween does its thing - the x/y would be repositioned to a new spot anyway, so it wouldn't look as though the rotation was occuring around the center of the object. It may be hard to visualize, but trust me - it can't work.

 

2) The way transform matrices work makes this almost impossible. Bezier x/y tweens aren't compatible with transformAroundCenter or transformAroundPoint. Sorry.

[martis 32 Likes (Newbie)]

I am only using transformAroundCenter for the rotation, not the x, y. Does this help?

[GreenSock 18,884 Likes (Superhero)]

No, it doesn't help that you're only doing rotation with it because the very nature of rotating around the center alters the x and y values. Imagine a MovieClip that has its x/y in its upper left corner, and that corner is exactly at the 0,0 position of the parent. Let's say it's 100 pixels wide and 100 pixels tall. If you rotate it around its center, at the end of the tween the registration point would be at a completely different place - at 100,100 instead of 0,0. So if you're also trying to tween the x/y position with a bezier tween, can you see why it'd cause all sorts of problems? Both parts of the tween would be fighting over the x/y coordinates.

[martis 32 Likes (Newbie)]

I do, thanks... I will try to ditch the transformAroundCenter, thanks for the quick reply!