Animation frame rate, possible to increase?

[GWTter]

Hi all,

I've written a move animation using the gwt way (extending animation class etc.) and it works great but I've noticed that when that if I keep the duration the same say 1000ms the longer the move distance is the choppier the animation seems (the animation is smoother the shorter the move distance is). I figured that this is because of the frame rate. In the doc the frame rate is stated to be "non-fixed".

Does anyone know if it is possible to increase the frame rate on the animation and if not can anyone suggest or have an idea on how to make the animation smoother?

Really appreciate it, much thanks in advance.

-Seth

[Thomas Broyer]

On Tuesday, April 17, 2012 5:43:03 PM UTC+2, GWTter wrote:

Hi all,

I've written a move animation using the gwt way (extending animation class etc.) and it works great but I've noticed that when that if I keep the duration the same say 1000ms the longer the move distance is the choppier the animation seems (the animation is smoother the shorter the move distance is). I figured that this is because of the frame rate. In the doc the frame rate is stated to be "non-fixed".

Does anyone know if it is possible to increase the frame rate on the animation

No, it's not possible.

 

and if not can anyone suggest or have an idea on how to make the animation smoother?

Which browser were you testing this in? In Firefox and Chrome it should use requestAnimationFrame whose role is to defer to the browser the choice of the frame rate so that it stays responsive 

See https://developer.mozilla.org/en/DOM/window.requestAnimationFrame and http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/animation/Animation.gwt.xml

(and http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/animation/client/AnimationSchedulerImplTimer.java which uses a timer that tries to achieve 60Hz frame rate)

If your animation is not smooth, it's probably that it doesn't run at approx. 60Hz, which means that either your code in the animation or some other code runs too slowly to achieve that rate. Because timers and requestAnimationFrame (and basically everything in a browser) go through the event loop and task queues <http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#event-loops> it can be that something else than the animation is pushing too many tasks in the queue and/or that those task run slowly, delaying other tasks and therefore prevent reaching the 60Hz target rate.

[Thomas Broyer]

Oh, of course, it can also be that you're trying to do the impossible, and the only solution would be to run the animation for a longer duration so that the moves between each frame (at the same frame rate) are smaller. 

[GWTter]

Hi Thomas,

I'm testing on FF. I thought it was probably just that I'm doing the impossible like you said too because the code I have for the animation is as concise as can be, the onUpdate() is just 2 lines of code which are just updating the top and left of the element. Maybe if I make the duration a function of the distance so that the achieved frame rate would stay below 60Hz it would work out nicely. But thanks again for the back info you supplied, very helpful, really appreciate it.

-Seth

[Aidan O'Kelly]

Depending on your needs, you could consider using css3 transitions (or even css3 animations, though they are much less supported) to get smoother animations. (they are generally hardware accelerated) 

http://css3.bradshawenterprises.com/

Its not a very 'GWT way'  of course, as it doesn't support old browsers, but it does degrade gracefully, the elements will just move with no animation on these browsers. 

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/y3cJB_TZzlYJ.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[GWTter]

Hi Thomas,

Actually, just had one last question. I went actually tested to make sure. I'm running my animation 1000ms like above and kept track of the number of times the onUpdate() function is being called. I'm getting an average of 12 calls/updates, this would mean that I'm achieving 12fps? Does that mean there's a problem? Thanks again.

-Seth

[GWTter]

Hi Aidan,

Thanks for the suggestion. I actually considered this initially, however the move positions are dynamic/I wouldn't know the positions ahead of time. Do you think it would be possible to do this by setting the element's transition attribute or would it have to be the animation attribute? Thanks again.

-Seth

To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsub...@googlegroups.com.

[Aidan O'Kelly]

Dynamic positions work fine with transitions, how it works is you just say (by setting the transition property) 'I want to animate any changes to top,left,width,height' . You don't even need to specify the positions at that time, but from that point on, any-time you set the left/top/right/width, it will animate the changes automatically.

They have some nice properties like automatically reversing a transition if you set some new values while the element is still animating too.. I guess it really comes down if you're prepared to have it not work in ie6-9, and deal with the inevitable quirks that come up due to css3 still being a work in progress :( 

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/TGBoX4dC0LAJ.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.

[GWTter]

Sounds good, I'll give that a shot. Thanks again Aidan.

-Seth

To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.