Jump to content
Search Community

best way to simulate animation in non-realtime?

eigenface test
Moderator Tag

Recommended Posts

I'm animating an object across the screen, which the user has to track and find later.  I'm also animating an object which moves around on top so as to occlude the object the user is trying to track.  The amount of time the tracker is supposed to be occluded is specified in advance.

 

The way I've found to handle this in the general case is to generate some random paths for the tracker and occluder to follow.  Then, I simulate the objects animating down those paths, and use bitmap logic on each timestep to determine when they occlude.  If the occlude time is not in the correct range, I generate more random paths and repeat.

 

Of course, I want the simulation to happen as fast as possible - I don't want it to take just as long as actually animating the objects.  I want to run through the timesteps in a loop, rather than waiting for enterFrame events like GSAP normally does.

 

I really like the power and flexibility of GSAP for animating the objects in various ways - that's part of the what makes the task work.  But I need to know exactly how they'll render in advance, without waiting for a normal animation to complete.  Is it enough to do something like this:

var tl:TimelineMax = new TimelineMax({ onUpdate:checkOcclusion, paused:true });
// add tracker and occluder objects

for (var i:int = 0; i < steps; i++) {
    
    tl.render(i*timeStep);
}
 
Or do I have to worry about what's going on in the _updateRoot function of Animation.as?  Both _updateRoot and render are declared private in the docs (though public in reality, for code-architecture reasons, I assume.)  So I figure I should ask your advice about this in case there are subtle issues.
Link to comment
Share on other sites

Yeah, you're on the right track. You can actually just use your loop to increase the time() of the timeline. And like you suspected, this will all happen virtually instantly.

 

Although, its a JavaScript example, I think this codepen demo will show you exactly how this can work for you:

 

http://codepen.io/GreenSock/pen/41508807237500b5c6173f1da3d1e014

 

Basically a Bezier tween is created and then at the bottom of the script a loop is used to increment the time() and at each iteration of the loop we assess how the target of the tween is positioned and rotated and we use that information to dynamically place new boxes along the path.

 

In your application you would run your occlusion logic.

 

This example orginally was built to progressively reveal dots along path, but I stripped that part out to focus on the loop. Here is the original:

http://codepen.io/GreenSock/pen/6d46b84c5bf44dfe62756554dd16f9aa

 

 

I'm pretty sure this will work for you, just be sure to set time(0) or play(0) when you are done looping

Link to comment
Share on other sites

Thanks for the great example!  This seems to work well.

 

I notice you don't pass the 'paused:true' parameter to the tween or the timeline.  This doesn't seem to make a difference one way or the other to the loop (the actual animation does not run if paused, of course.)  Are there any subtle reasons why passing 'paused:true' is not a good idea?

Link to comment
Share on other sites

Glad it helped. As far as pausing goes, pausing isn't going to interfere with your loop running properly, and its probably only necessary to set paused:true if you don't want your timeline playing immediately after the loop runs. I can't see any downside though to pausing the timeline.

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