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    <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 = 5;
26
27      // Get total number of frames of the animation from the hash.
28      const hash = window.location.hash;
29      const totalFrames = hash.slice(1);
30      console.log("Lottie has " + totalFrames + "total frames");
31
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          preserveAspectRatio:'xMidYMid meet'
42        },
43      });
44
45      const t_rate = 1.0 / (MAX_FRAMES - 1);
46      let frame = 0;
47      let loop = 0;
48      const drawFrame = () => {
49        if (frame >= MAX_FRAMES) {
50          // Reached the end of one loop.
51          loop++;
52          if (loop == MAX_LOOPS) {
53            // These are global variables to talk with puppeteer.
54            window._lottieWebDone = true;
55            return;
56          }
57          // Reset frame to restart the loop.
58          frame = 0;
59        }
60
61        let t1 = Math.max(Math.min(t_rate * frame, 1.0), 0.0);
62        let seekToFrame = totalFrames * t1;
63        if (seekToFrame >= totalFrames-1) {
64          // bodymovin player sometimes draws blank when requesting
65          // to draw the very last frame.  Subtracting a small value
66          // seems to fix this and make it draw the last frame.
67          seekToFrame -= .001;
68        }
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>
80