lottie-web-perf.html 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Lottie-Web Perf</title>
  5. <meta charset="utf-8" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=egde,chrome=1">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <script src="/res/lottie.js" type="text/javascript" charset="utf-8"></script>
  9. <style type="text/css" media="screen">
  10. body {
  11. margin: 0;
  12. padding: 0;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <main>
  18. <div style="width:1000px;height:1000px" class=anim></div>
  19. </main>
  20. <script type="text/javascript" charset="utf-8">
  21. (function () {
  22. const PATH = '/res/lottie.json';
  23. const RENDERER = 'svg';
  24. const MAX_FRAMES = 25;
  25. const MAX_LOOPS = 3;
  26. // Get total number of frames of the animation from the hash.
  27. const hash = window.location.hash;
  28. const totalFrames = hash.slice(1);
  29. console.log("Lottie has " + totalFrames + "total frames");
  30. // Load the animation with autoplay false. We will control which
  31. // frame to seek to and then will measure performance.
  32. let anim = lottie.loadAnimation({
  33. container: document.querySelector('.anim'),
  34. renderer: RENDERER,
  35. loop: false,
  36. autoplay: false,
  37. path: PATH,
  38. rendererSettings: {
  39. preserveAspectRatio:'xMidYMid meet'
  40. },
  41. });
  42. const t_rate = 1.0 / (MAX_FRAMES - 1);
  43. let frame = 0;
  44. let loop = 0;
  45. const drawFrame = () => {
  46. if (frame >= MAX_FRAMES) {
  47. // Reached the end of one loop.
  48. loop++;
  49. if (loop == MAX_LOOPS) {
  50. // These are global variables to talk with puppeteer.
  51. window._lottieWebDone = true;
  52. return;
  53. }
  54. // Reset frame to restart the loop.
  55. frame = 0;
  56. }
  57. let t1 = Math.max(Math.min(t_rate * frame, 1.0), 0.0);
  58. let seekToFrame = totalFrames * t1;
  59. if (seekToFrame >= totalFrames-1) {
  60. // bodymovin player sometimes draws blank when requesting
  61. // to draw the very last frame. Subtracting a small value
  62. // seems to fix this and make it draw the last frame.
  63. seekToFrame -= .001;
  64. }
  65. anim.goToAndStop(seekToFrame, true /* isFrame */);
  66. console.log("Used seek: " + (seekToFrame/totalFrames));
  67. frame++;
  68. window.requestAnimationFrame(drawFrame);
  69. };
  70. window.requestAnimationFrame(drawFrame);
  71. })();
  72. </script>
  73. </body>
  74. </html>