Jump to content

Greensock and Pixi, tweening multiple properties at once


Yourangutan
 Share

Recommended Posts

Hi everyone,

 

I've been reading through the posts here and on the greensock forums, and managed to make tweening text work a little but I'm not entirely sure how to stop stumbling.

 

So far I've learned you need to add .position to the object you're tweening if you want to tween, like so

TweenMax.to(textBox.position, 0, {x:300 , y:100});

or add .scale, like so, if you're scaling:

 
TweenMax.to(textBox.scale, 3, {scaleX:0.5, scaleY:0.5});

But how would I go about tweening multiple properties at once? Say Im interested in using the full range of greensock (i.e. alpha, rotation, width, height, the text plugins, etc) simultaneously, just for the hell of it.. would such a thing be possible?

 

Im also thinking, maybe it's a question of how Im attaching the text .. should I be doing it like this?

var textBox = new PIXI.Text();var text = new PIXI.Text("MacBeth", {font: "36px Arial", fill: "#ffffff", align: "center"});textBox.addChild(text);stage.addChild(textBox);

...or should I be using a movieclip, or a DisplayObjectContainer, or something other than the text object? The text tended to blur when it scaled, the way I had it working earlier, right now I tried fixing it to the point where I don't remember the code when it was working halfway.

Any help would be much appreciated. 

 
 
 
Link to comment
Share on other sites

I'm not 100% but I don't think you have to call out the individual properties like that, instead you can just reference the object and use dot notation to get to the property you want to tween:

TweenMax.to(textBox, 0, {position.x:300 , position.y:100, scale.scaleX:0.5, scale.scaleY:0.5});

You can also chain your events using timeline instead of tween:

var animation = new TimelineLite()animation.to(textBox, 3, {scale:1.5, ease:Linear.easeNone})             .to(textBox, 3, {opacity:1, ease:Linear.easeNone});

See: http://greensock.com/forums/topic/8109-chaining-instance-of-multiple-tweens/

Link to comment
Share on other sites

This is tweening two properties at once already:

TweenMax.to (textBox.scale, 3, {scaleX: 0.5, scaleY: 0.5})

By the way, consider using the "css" object for css. This will avoid potential namespace collisions between object properties and CSS properties:

TweenMax.to (textBox.scale, 3, scaleX: .5, scaleY: .5, {css: {scaleX: 0.5, scaleY: 0.5}})
Link to comment
Share on other sites

Hi, it won't do scale and alpha and position at once, though, sadly. Or.. wait..trying sthing

 

 

edit: Nope.. Im thankful for your replies dudes, but strangely, none of your replies work.  Do these things work for you? Cuz then my troubles stem from some other reason.

Link to comment
Share on other sites

Unfortunately, there are no separate scaleX/scaleY properties in PIXI, which makes animating with TweenMax slightly trickier, but not much.

 

For the position, you have x/y properties directly which I believe are getter/setters for position.x/y, so you can directly do this:

new TimelineMax().to(textBox, 3, { x: 150, y: 150 });

When I want to animate the scale.x/y at the same time, I usually do this:

new TimelineMax().to(textBox, 3, { x: 150, y: 150 })                 .to(textBox.scale, 3, { x: 0.5, y: 0.5 }, "-=3");

By default, chaining this way plays the animations consecutively, but the last parameter of the second tween puts it at 3 seconds before the end of the timeline, so the two happen at the same time.

 

This article helped me a lot to understand how the Timeline works.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...