Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
macguffin

Can you get time since last update from the timeline

Recommended Posts

Hi trying to integrate a particle emitter into some stuff powered by GASP.

 

I basically need the time since the last update as the emitter requires the elapsed number of seconds since the last update. 

   var pe_tl = new TimelineMax();
                console.log('foo2', pe_tl)
                pe_tl.eventCallback("onUpdate", () => {
                    console.log('update emitter')

                });

I have found things like _totalDuration, _totalTime and I could work it out from these but wondered if there a var in the timeline that already stores/calculates this?

 

 

Thanks

Link to comment
Share on other sites

Hello macguffin and Welcome to the GreenSock Forum!

 

Keep in mind that when using eventCallback() you will need to pass the timeline instance to eventCallback as a parameter to use totalTime() or time() inside

myAnimation.eventCallback("onComplete", myFunction, ["{self}", "param2"]); // "{self}" is the timeline instance 'myAnimation'

You could use the totalTime() method

 

https://greensock.com/docs/#/HTML5/GSAP/TimelineLite/totalTime/

var tt = myAnimation.totalTime(); //gets total time
myAnimation.totalTime(2); //sets total time, jumping to new value just like seek().

Gets or sets the position of the playhead according to the totalDuration which includes any repeats and repeatDelays (only available in TweenMax and TimelineMax). For example, if a TweenMax instance has a duration of 2 and a repeat of 3, totalTime will go from 0 to 8 during the course of the tween (plays once then repeats 3 times, making 4 total cycles) whereas time will go from 0 to 2 a total of 4 times. If you added arepeatDelay of 1, that would make the totalTime go from 0 to 11 over the course of the tween.

 

This method serves as both a getter and setter. Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.

 

totalTime will never exceed the totalDuration, nor will it be less than 0 (values will be clipped appropriately). Negative values will be interpreted from the END of the animation. For example, -2 would be 2 seconds before the end. If the animation's totalDuration is 6 and you domyAnimation.totalTime(-2), it will jump to a totalTime of 4.

 

or

 

You could use the time() method

 

https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/time/

 

time()

var currentTime = myAnimation.time(); //gets current time .. myAnimation is your timeline instance
myAnimation.time(2); //sets time, jumping to new value just like seek().

Gets or sets the local position of the playhead (essentially the current time), not including any repeats or repeatDelays. If the timeline has a non-zero repeat, its time goes back to zero upon repeating even though the totalTime continues forward linearly (or if yoyo is true, the time alternates between moving forward and backward). time never exceeds the duration whereas the totalTime reflects the overall time including any repeats and repeatDelays.

 

For example, if a TimelineMax instance has a duration of 2 and a repeat of 3, totalTime will go from 0 to 8 during the course of the timeline (plays once then repeats 3 times, making 4 total cycles) whereas time would go from 0 to 2 a total of 4 times.

 

This method serves as both a getter and setter. Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.

 

If your still having issues please create a reduced  codepen demo example.

 

 

:)

  • Like 2
Link to comment
Share on other sites

If I understand correctly you can repeatedly store the time() and then check how much time has elapsed on each update. Here's a rudimentary example:

 

var lastTime;
var tl = new TimelineLite({onUpdate:onUpdate})


tl.to(".box", 1, {x:100})
  


function onUpdate(){
  var now = tl.time();
  var elapsedTime;
  if(lastTime){
    elapsedTime = now - lastTime;
  }
  console.log(elapsedTime);
  lastTime = now;
}

http://codepen.io/GreenSock/pen/GrzaMW?editors=0011

  • Like 2
Link to comment
Share on other sites

Really slick solution Carl :)

  • Like 1
Link to comment
Share on other sites

Are you using PIXI Particles?

 

You can grab the time value from the ticker. That's the time value used for everything. Just subtract the last recorded time from that to get your delta time.

var now = TweenLite.ticker.time;

You can see how I'm getting the delta time value in the update method here. It's based on the implementation used by Pixi particles.

See the Pen oLGBXy?editors=0010 by osublake (@osublake) on CodePen

 

.

  • Like 3
Link to comment
Share on other sites

Hi Jonathan thanks for the reply. I don't think I explained myself very well

 

See the Pen OWdYmg?editors=1111 by anon (@anon) on CodePen

 

If you open the console you can see that the update time is 0.03 or something similar, this is the time between each update.

I'm using GASP to power a particle effect but I need to know how long between updates the "update_time"

 

As you can see I can work it out like this but wondered if this calculation was already been done in the timeline and I could just hook into that.

Link to comment
Share on other sites

Whoo I typed my example so slowly I got 3 replies

 

OSUblake that's a really good idea and yes I'm using Pixi Particles.

 

I was thinking about storing the reference on the timeline but your solution might mean I can avoid this

var pe_tl = new TimelineMax({repeat: -1});
pe_tl.lasttime=0;
pe_tl.eventCallback("onUpdate", (_x) => {
   console.log('update_time', pe_tl._totalTime-pe_tl.lasttime)
   pe_tl.lasttime=  pe_tl._totalTime;  
});
Link to comment
Share on other sites

Also, in case it helps, the main ticker has a "time" as well. TweenLite.ticker.time. You could apply the same technique where you figure out the delta on each tick.  Lots of options :)

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.
×