1cb93a386Sopenharmony_ci<!DOCTYPE html>
2cb93a386Sopenharmony_ci<html>
3cb93a386Sopenharmony_ci<head>
4cb93a386Sopenharmony_ci  <meta charset="utf-8" />
5cb93a386Sopenharmony_ci  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6cb93a386Sopenharmony_ci  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7cb93a386Sopenharmony_ci  <title>SkottieKit Demo</title>
8cb93a386Sopenharmony_ci
9cb93a386Sopenharmony_ci  <script type="text/javascript" src="/bin/skottiekit.js"></script>
10cb93a386Sopenharmony_ci
11cb93a386Sopenharmony_ci  <script type="text/javascript" charset="utf-8">
12cb93a386Sopenharmony_ci    const bootTime = performance.now();
13cb93a386Sopenharmony_ci    const cdn = 'https://storage.googleapis.com/skia-cdn/misc/';
14cb93a386Sopenharmony_ci    // loadKit resolves with SkottieKit.
15cb93a386Sopenharmony_ci    const loadKit = SkottieKitInit({
16cb93a386Sopenharmony_ci      locateFile: (file) => '/bin/'+file,
17cb93a386Sopenharmony_ci    });
18cb93a386Sopenharmony_ci
19cb93a386Sopenharmony_ci    loadKit.then(() => {
20cb93a386Sopenharmony_ci      const n = performance.now();
21cb93a386Sopenharmony_ci      console.log(`loaded Kit in ${(n - bootTime).toFixed(2)} ms`)
22cb93a386Sopenharmony_ci    });
23cb93a386Sopenharmony_ci
24cb93a386Sopenharmony_ci    const loadLegoJSON = fetch(cdn + 'lego_loader.json').then((resp) => {
25cb93a386Sopenharmony_ci      return resp.text();
26cb93a386Sopenharmony_ci    });
27cb93a386Sopenharmony_ci    const loadPartyJSON = fetch(cdn + 'confetti.json').then((resp) => {
28cb93a386Sopenharmony_ci      return resp.text();
29cb93a386Sopenharmony_ci    });
30cb93a386Sopenharmony_ci    const loadDrinksJSON = fetch(cdn + 'drinks.json').then((resp) => {
31cb93a386Sopenharmony_ci      return resp.text();
32cb93a386Sopenharmony_ci    });
33cb93a386Sopenharmony_ci    const loadOnboardingJSON = fetch(cdn + 'onboarding.json').then((resp) => {
34cb93a386Sopenharmony_ci      return resp.text();
35cb93a386Sopenharmony_ci    });
36cb93a386Sopenharmony_ci
37cb93a386Sopenharmony_ci    function SkottieDemo(values, canvasID, width=400, height=400) {
38cb93a386Sopenharmony_ci      const [SkottieKit, legoJSON] = values;
39cb93a386Sopenharmony_ci      const animation = SkottieKit.MakeManagedAnimation(legoJSON);
40cb93a386Sopenharmony_ci      const duration = animation.duration() * 1000;
41cb93a386Sopenharmony_ci      const size = animation.size();
42cb93a386Sopenharmony_ci
43cb93a386Sopenharmony_ci      const bounds = {fLeft: 0, fTop: 0, fRight: width, fBottom: height};
44cb93a386Sopenharmony_ci
45cb93a386Sopenharmony_ci      const surface = SkottieKit.MakeCanvasSurface(canvasID);
46cb93a386Sopenharmony_ci      if (!surface) {
47cb93a386Sopenharmony_ci        console.error('Could not make surface');
48cb93a386Sopenharmony_ci        return;
49cb93a386Sopenharmony_ci      }
50cb93a386Sopenharmony_ci
51cb93a386Sopenharmony_ci      const firstFrame = Date.now();
52cb93a386Sopenharmony_ci      const clearColor = SkottieKit.WHITE;
53cb93a386Sopenharmony_ci
54cb93a386Sopenharmony_ci      function drawFrame(canvas) {
55cb93a386Sopenharmony_ci        const seek = ((Date.now() - firstFrame) / duration) % 1.0;
56cb93a386Sopenharmony_ci        const damage = animation.seek(seek);
57cb93a386Sopenharmony_ci
58cb93a386Sopenharmony_ci        if (damage.fRight > damage.fLeft && damage.fBottom > damage.fTop) {
59cb93a386Sopenharmony_ci          canvas.clear(clearColor);
60cb93a386Sopenharmony_ci          animation.render(canvas, bounds);
61cb93a386Sopenharmony_ci        }
62cb93a386Sopenharmony_ci        surface.requestAnimationFrame(drawFrame);
63cb93a386Sopenharmony_ci      }
64cb93a386Sopenharmony_ci      surface.requestAnimationFrame(drawFrame);
65cb93a386Sopenharmony_ci    }
66cb93a386Sopenharmony_ci
67cb93a386Sopenharmony_ci    const legosAnimating = Promise.all([loadKit, loadLegoJSON]).then((values) => {
68cb93a386Sopenharmony_ci      SkottieDemo(values, 'legos', 400, 400);
69cb93a386Sopenharmony_ci    });
70cb93a386Sopenharmony_ci    const partyAnimating = Promise.all([loadKit, loadPartyJSON]).then((values) => {
71cb93a386Sopenharmony_ci      SkottieDemo(values, 'party', 400, 400);
72cb93a386Sopenharmony_ci    });
73cb93a386Sopenharmony_ci    const drinksAnimating = Promise.all([loadKit, loadDrinksJSON]).then((values) => {
74cb93a386Sopenharmony_ci      SkottieDemo(values, 'drinks', 400, 400);
75cb93a386Sopenharmony_ci    });
76cb93a386Sopenharmony_ci    const onboardingAnimating = Promise.all([loadKit, loadOnboardingJSON]).then((values) => {
77cb93a386Sopenharmony_ci      SkottieDemo(values, 'onboarding', 400, 400);
78cb93a386Sopenharmony_ci    });
79cb93a386Sopenharmony_ci
80cb93a386Sopenharmony_ci    Promise.all([legosAnimating, partyAnimating, drinksAnimating, onboardingAnimating]).then(() => {
81cb93a386Sopenharmony_ci      const frames = new Float64Array(100);
82cb93a386Sopenharmony_ci      let idx = 0;
83cb93a386Sopenharmony_ci      let now = performance.now();
84cb93a386Sopenharmony_ci      function benchFrame() {
85cb93a386Sopenharmony_ci        frames[idx] = performance.now() - now;
86cb93a386Sopenharmony_ci        idx++;
87cb93a386Sopenharmony_ci        if (idx < frames.length) {
88cb93a386Sopenharmony_ci          now = performance.now();
89cb93a386Sopenharmony_ci          window.requestAnimationFrame(benchFrame);
90cb93a386Sopenharmony_ci        } else {
91cb93a386Sopenharmony_ci          let out = '';
92cb93a386Sopenharmony_ci          for (const frameTime of frames) {
93cb93a386Sopenharmony_ci            out += frameTime.toFixed(2);
94cb93a386Sopenharmony_ci            out += '\n';
95cb93a386Sopenharmony_ci          }
96cb93a386Sopenharmony_ci          console.log(out);
97cb93a386Sopenharmony_ci        }
98cb93a386Sopenharmony_ci      }
99cb93a386Sopenharmony_ci      window.requestAnimationFrame(benchFrame);
100cb93a386Sopenharmony_ci    })
101cb93a386Sopenharmony_ci  </script>
102cb93a386Sopenharmony_ci
103cb93a386Sopenharmony_ci  <style>
104cb93a386Sopenharmony_ci    canvas {
105cb93a386Sopenharmony_ci      border: 1px dashed #AAA;
106cb93a386Sopenharmony_ci      width: 400px;
107cb93a386Sopenharmony_ci      height: 400px;
108cb93a386Sopenharmony_ci    }
109cb93a386Sopenharmony_ci  </style>
110cb93a386Sopenharmony_ci
111cb93a386Sopenharmony_ci</head>
112cb93a386Sopenharmony_ci<body>
113cb93a386Sopenharmony_ci  <h1> SkottieKit</h1>
114cb93a386Sopenharmony_ci
115cb93a386Sopenharmony_ci  <canvas id=legos width=400 height=400></canvas>
116cb93a386Sopenharmony_ci  <canvas id=party width=400 height=400></canvas>
117cb93a386Sopenharmony_ci  <canvas id=drinks width=400 height=400></canvas>
118cb93a386Sopenharmony_ci  <canvas id=onboarding width=400 height=400></canvas>
119cb93a386Sopenharmony_ci
120cb93a386Sopenharmony_ci</body>
121cb93a386Sopenharmony_ci</html>