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