![]() ![]() ![]() When you toggle the canvas visible again, the animation function will be called again. You'll see that when you hide the canvas, the animation function stops being called. WebkitRequestAnimationFrame takes one more argument than the Mozilla equivalent to allow your animation to only run when the element that is being animated is visible. You can verify that the animation is being shown on the canvas and not in the image tag by loading up and inspecting the elements with ctrl-shift-I on Windows or Linux / alt-cmd-I. My solution was to make the animated gif part of the DOM and size 0 and it works just fine. ![]() The problem seems to be that the image itself does not animate, probably because the browser does not bother to update an animated image that is not part of the DOM. I show you how to add a GIF as your background on the new tab page in the Google. If you add a console.log() to the function that paints the image, you'll see that it is being called. You can set the banner image on a Google Sites to be an animated GIF. For performance and battery life reasons, you may want many of the functions that you pass to requestAnimationFrame to check for visibility before they do anything that will require drawing. :)Īlso, webkitRequestAnimationFrame no longer has the behavior of taking one additional argument, an element X such that when X is not visible, the requested function will not run. There may or may not be documentation of what is correct behavior for this. Answer no longer valid It looks like the behavior described here (writing an img tag referencing an animated gif to a canvas results in different frames of the gif being written if the img is part of the DOM or visible) has changed at least in Chrome. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |