| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Lottie-Web Perf</title> |
| <meta charset="utf-8" /> |
| <meta http-equiv="X-UA-Compatible" content="IE=egde,chrome=1"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <script src="/res/lottie.js" type="text/javascript" charset="utf-8"></script> |
| <style type="text/css" media="screen"> |
| body { |
| margin: 0; |
| padding: 0; |
| } |
| </style> |
| </head> |
| <body> |
| <main> |
| <div style="width:1000px;height:1000px" class=anim></div> |
| </main> |
| <script type="text/javascript" charset="utf-8"> |
| (function () { |
| const PATH = '/res/lottie.json'; |
| const RENDERER = 'svg'; |
| const FRAMES = 25; |
| |
| // Do an initial load to figure out how many frames we are working with |
| // for calculating seek values later. |
| let initialAnim = lottie.loadAnimation({ |
| container: document.querySelector('.anim'), |
| renderer: RENDERER, |
| loop: false, |
| autoplay: true, |
| path: PATH, |
| rendererSettings: { |
| preserveAspectRatio:'xMidYMid meet' |
| }, |
| }); |
| |
| initialAnim.addEventListener('data_ready', (e) => { |
| // We no longer need initialAnim. |
| lottie.destroy() |
| console.log("Lottie has " + initialAnim.totalFrames + "total frames"); |
| totalFrames = initialAnim.totalFrames; |
| |
| // Load the animation with autoplay false. We will control which |
| // frame to seek to and then will measure performance. |
| let anim = lottie.loadAnimation({ |
| container: document.querySelector('.anim'), |
| renderer: RENDERER, |
| loop: false, |
| autoplay: false, |
| path: PATH, |
| rendererSettings: { |
| preserveAspectRatio:'xMidYMid meet' |
| }, |
| }); |
| |
| console.log("start") |
| const t_rate = 1.0 / (FRAMES - 1); |
| let time = 0; |
| let max = -1; |
| let min = 1000000000; |
| let frame = 0; |
| const drawFrame = () => { |
| if (frame >= FRAMES) { |
| console.log("On average, took "+ (time/FRAMES) +" us" ); |
| // These are global variables to talk with puppeteer. |
| window._avgFrameTimeUs = time/FRAMES; |
| window._minFrameTimeUs = min; |
| window._maxFrameTimeUs = max; |
| window._lottieWebDone = true; |
| return; |
| } |
| |
| let t1 = Math.max(Math.min(t_rate * frame, 1.0), 0.0); |
| let seekToFrame = totalFrames * t1; |
| if (seekToFrame >= totalFrames-1) { |
| // bodymovin player sometimes draws blank when requesting |
| // to draw the very last frame. Subtracting a small value |
| // seems to fix this and make it draw the last frame. |
| seekToFrame -= .001; |
| } |
| |
| let start = window.performance.now(); |
| anim.goToAndStop(seekToFrame, true /* isFrame */); |
| const t = (window.performance.now() - start) * 1000; |
| |
| time += t; |
| console.log("Frame " + frame + " took " + t + " us"); |
| console.log("Used seek: " + (seekToFrame/totalFrames)); |
| if (t < min) { |
| min = t; |
| } |
| if (t > max) { |
| max = t; |
| } |
| frame++; |
| window.requestAnimationFrame(drawFrame); |
| }; |
| window.requestAnimationFrame(drawFrame); |
| }); |
| })(); |
| </script> |
| </body> |
| </html> |
