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