lottie-web-canvas-perf.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  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. <canvas id=canvas width=1000 height=1000 style="height: 1000px; width: 1000px;"></canvas>
  19. </main>
  20. <script type="text/javascript" charset="utf-8">
  21. (function () {
  22. const PATH = '/res/lottie.json';
  23. const RENDERER = 'canvas';
  24. const MAX_FRAMES = 25;
  25. const MAX_LOOPS = 3;
  26. const cvs = document.getElementById("canvas");
  27. const canvasContext = cvs.getContext('2d');
  28. // Get total number of frames of the animation from the hash.
  29. const hash = window.location.hash;
  30. const totalFrames = hash.slice(1);
  31. console.log("Lottie has " + totalFrames + "total frames");
  32. // Load the animation with autoplay false. We will control which
  33. // frame to seek to and then will measure performance.
  34. let anim = lottie.loadAnimation({
  35. container: document.querySelector('.anim'),
  36. renderer: RENDERER,
  37. loop: false,
  38. autoplay: false,
  39. path: PATH,
  40. rendererSettings: {
  41. context: canvasContext,
  42. scaleMode: 'noScale',
  43. clearCanvas: true,
  44. preserveAspectRatio:'xMidYMid meet',
  45. },
  46. });
  47. const t_rate = 1.0 / (MAX_FRAMES - 1);
  48. let frame = 0;
  49. let loop = 0;
  50. const drawFrame = () => {
  51. if (frame >= MAX_FRAMES) {
  52. // Reached the end of one loop.
  53. loop++;
  54. if (loop == MAX_LOOPS) {
  55. // These are global variables to talk with puppeteer.
  56. window._lottieWebDone = true;
  57. return;
  58. }
  59. // Reset frame to restart the loop.
  60. frame = 0;
  61. }
  62. let t1 = Math.max(Math.min(t_rate * frame, 1.0), 0.0);
  63. let seekToFrame = totalFrames * t1;
  64. if (seekToFrame >= totalFrames-1) {
  65. // bodymovin player sometimes draws blank when requesting
  66. // to draw the very last frame. Subtracting a small value
  67. // seems to fix this and make it draw the last frame.
  68. seekToFrame -= .001;
  69. }
  70. anim.goToAndStop(seekToFrame, true /* isFrame */);
  71. console.log("Used seek: " + (seekToFrame/totalFrames));
  72. frame++;
  73. window.requestAnimationFrame(drawFrame);
  74. };
  75. window.requestAnimationFrame(drawFrame);
  76. })();
  77. </script>
  78. </body>
  79. </html>