I'm trying to figure out if d3's default animations use requestAnimationFrame
for the callback already or if I need to do it myself. For example, I have defined a custom tween that calls a redraw function repeatedly to animation a transition from one domain to another on a graph (this is in coffeescript):
rd = @redraw # a function that takes an argument to redraw the graph
@svg.transition()
.duration(1000)
.tween "zoom", ->
interp = d3.interpolate(current_dom, target_dom)
(t) -> rd interp(t)
In all my other calls to redraw, I schedule it with requestAnimationFrame
:
scheduleRedraw: =>
# Stop a previous request if it hasn't executed yet
cancelAnimationFrame(@animRequest) if @animRequest
@animRequest = requestAnimationFrame => @redraw
However, I'm wondering if I need to do the same thing here. I have been looking at the d3 source and see that the only reference to requestAnimationFrame
is in the d3 timer class. Hopefully someone with some more knowledge about d3 can help answer the following questions:
requestAnimationFrame
manually here? If not, is there any case where I'd ever need to use it myself while using d3?The requestAnimationFrame() method tells the browser to run a callback function right before the next repaint happens. It's particularly useful when using JavaScript for animations and repeating UI updates.
edited. requestAnimationFrame() is much more efficient than setTimeout() or setInterval() , and the result is smoother and more accurate (just check the provided demo and the consumed CPU).
Animations with requestAnimationFrame are non-blocking, which means if you make subsequent calls to requestAnimationFrame, the resulting animations will all occur at same time. The goal is 60 frame per second(fps) to appear smooth animation.
When you start an animation using requestAnimationFrame you will get a reference to the animation. You can anytime use the cancelAnimationFrame global function by passing the reference as parameter to stop the animation.
From d3's wiki:Transitions:Timer
If your browser supports it, the timer queue will use requestAnimationFrame for fluid and efficient animation.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With