Jump to content
Search Community

slow down the update intervals on long and subtle tweens?

JimmiQR test
Moderator Tag

Recommended Posts

[Not even sure how to properly title this subject line, as it is an strange request]

 

I have an odd need to be able to slooooowly and subtly tween some objects (over the course of minutes), but performance is sometimes a factor in these slow tweens. Take for instance, fading the alpha of a large displayObject from 1 to 0 over the duration of 3 minutes. This infinitesimal change is not even noticed by the user (but eventually gets there), yet the rendering engine is attempting to change the alpha by .002 alpha 30 times per second. When in reality, such a slow tween could actually be updated once every second and still have the same visual effect, with no performance hit.

 

I was able to write a wonky function to do this, but it was very specific to one particular case, and not very flexible. I was wondering if there was some clever way to do this directly within my TweenLite/max or timelineLite/Max call?

 

TweenLite.to(obj, 180, {alpha:0});// 3 min duration, yet only update once per second maybe?

 

Link to comment
Share on other sites

Yes, we have a steppedEase: 

 

Most easing equations give a smooth, gradual transition between the start and end values, but SteppedEase provides an easy way to define a specific number of steps that the transition should take. 

http://api.greensock.com/as/com/greensock/easing/SteppedEase.html

 

 

 

//60 steps over the course of 3 minutes
TweenLite.to(mc, 180, {alpha:0, ease:SteppedEase.config(60)});
 

 

Even though the changes only happen in steps. The values (even if they are the same for long spans of time) are still being repeatedly set.

 

So, behind the scenes.

 

mc.alpha = .25

mc.alpha = .25

mc.alpha = .25

mc.alpha = .25

mc.alpha = .25

mc.alpha = .25

mc.alpha = .25

mc.alpha = .25

mc.alpha = .25

mc.alpha = .25

mc.alpha = .25

 

Is happening over and over again. I am not sure if constantly setting the same property to the same value triggers a screen repaint. It sounds like you have a good file to test with though.

 

So I would start with a simple steppedEase (above) and see if it solves your performance woes.

 

If you need to ensure that your alpha is only set when their is a change in value you can create another value to tween and only when that number changes apply it to the alpha of the target.

 

The following approach shows how to use getAlpha and setAlpha methods to work like regular AS3 getter setters

 

 

 

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


mc.setAlpha = function(val){
if(val != this.alpha){
//only change the alpha of mc if a new value has been passed in
message_txt.text = val;
this.alpha = val
}
}


//TweenLite will automatically look for a "get" function (to record a starting value) if the target value is a "set" value
//you can also use real getters/setters
mc.getAlpha = function (){
return this.alpha ;
};


TweenLite.to(mc, 360, {setAlpha:0, ease:SteppedEase.config(60)});
 

I've attached an fla for the code above. Interested to hear which way  works best for you

 

 

 

 

steppedEase_CS5.zip

  • Like 1
Link to comment
Share on other sites

var objfade = { alpha:1, lastupdate:1 };

TweenLite.to(objfade, 180, {alpha:0, onUpdate:function() {
  if (objfade.lastupdate - objfade.alpha > 0.05) obj.alpha = objfade.lastupdate = objfade.alpha;
}});

 

Otherwise you might want to take a look at SteppedEase.

 

(okay Carl has a pretty good SteppedEase solution I'd probably go with that)

Edited by jamiejefferson
Link to comment
Share on other sites

Thank you both, and it is StepppedEase for the win!

 

I tested it, and you are correct, the engine knows to not repaint the screen if there is no numerical change. So a bunch of frame events setting the alpha to .25 will not hurt the performance. I went with the first, simple approach, and no performance issue anymore!

 

I stared to read up on SteppedEase more. I love how this was started with one case in mind, 

, but proves to be flexible enough for me to use it in an entirely different way (super slow tweens). After watching this video, I now realized this will also come in handy where I need to animate/rotate blocks on 90 degree increments. TweenLite remains my most favorite API to work with.
  • Like 1
Link to comment
Share on other sites

Hey Jimmi,

 

Thanks so much for posting your results. Excited to hear that steppedEase was a suitable solution for this. And thanks for the extra enthusiasm about the platform, it makes our day.

 

Carl

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

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