Jump to content
Search Community

tween duration of a tween

Eckstein1 test
Moderator Tag

Recommended Posts

Hi,

I tween by a tween (t2) the duration of the tween (t1) and see the following. First my code:

import com.greensock.*;
import com.greensock.easing.*;
 
var n1:Number=0;
var t1:TweenMax;
var t2:TweenMax;

t1=TweenMax.to(this, 10, {ease:Linear.easeNone, n1:300, repeat:0});
t2=TweenMax.fromTo(t1, 2, {duration:10}, {duration:0, ease:Linear.easeNone, onUpdate:update, repeat:0});

function update():void {
	trace("n="+Math.round(n1*100)/100+", d="+Math.round(t1.duration()*100)/100+", p="+Math.round(t1.progress()*100)/100)
}

Please note the example makes no sense, it's just to show what I see. The code generates the following output. It shows the number I tween with tween t1 (n), the duration of tween t1 (d) and the progress of tween t1 (p):

...
n=95.33, d=3.74, p=0.33
n=103.96, d=3.52, p=0.37
n=113.86, d=3.32, p=0.4
n=124.79, d=3.1, p=0.45
n=137.74, d=2.89, p=0.49
n=151.4, d=2.69, p=0.54
n=167.53, d=2.48, p=0.61
n=187.27, d=2.28, p=0.68
n=209.01, d=2.08, p=0.76
n=235.37, d=1.86, p=0.88
n=269.03, d=1.66, p=1
n=300, d=1.44, p=1.15
n=300, d=1.24, p=1.34
n=300, d=1.02, p=1.63
n=300, d=0.82, p=2.02
n=300, d=0.6, p=2.79
n=300, d=0.39, p=4.2
n=300, d=0.2, p=8.51
n=300, d=0, p=Infinity

I'm wondering about the following:

  1. if the progress is 0.33 the number (tween range 0...300) should be 100, but it is 95; if the progress is 0.4 the number should be 120, but it is 113; etc.
  2. the progress is 1 for a number of 269 (end number should be 300)
  3. the progress becomes larger than 1
  4. the end value of number is repeated during several tweens with progress larger than 1

 

What am I doing wrong? How can I avoid this behaviour?

 

Thanks in advance and kind regards,

Uli

Link to comment
Share on other sites

Thanks Jack for your immediate response. Maybe I have to give you some more information what I intend to do:

 

I have a Flash movieclip in a library which shows a machine (in my case a compressor). The machine has two rotating screws to compress air. The rotation of the two screws is realized by one Greensock timeline.

 

Now we want to show the starting phase of the machine. The machine has a rotation speed of 0 and speeds up to it's maximum speed. To visualize it I tween the duration of timeline. So we tween to duration from a high value (slow rotation) to a low value (max rotation). While tweening and after the tween (max speed) we see jumps in the rotation of the screws.

 

I interpreted the effect shown above as the same I saw with the rotating screws. To support you analysis I tried to create the simplest example possible.

 

So what should we do to tween the speed? Thanks again for your kind support.

Link to comment
Share on other sites

Thanks for the clarification. timeScale() is what you should use.

 

Here is an interactive demo for JavaScript which shows that tweening the timeScale() allows you to progressively adjust speed

 

http://codepen.io/GreenSock/pen/LuIJj

 

The same exact concept applies to ActionScript.

 

The following tween will tween t1 from playing at half-speed to double-speed over the course of 2 second. Adjust for your needs.

t2=TweenMax.fromTo(t1, 2, {timeScale:0.5}, {timeScale:2, ease:Linear.easeNone, onUpdate:update, repeat:0});

http://greensock.com/asdocs/com/greensock/core/Animation.html#timeScale()

  • Like 1
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...