1*c8dee2aaSAndroid Build Coastguard Worker<!DOCTYPE html> 2*c8dee2aaSAndroid Build Coastguard Worker<html> 3*c8dee2aaSAndroid Build Coastguard Worker<head> 4*c8dee2aaSAndroid Build Coastguard Worker <title>Lottie-Web Perf</title> 5*c8dee2aaSAndroid Build Coastguard Worker <meta charset="utf-8" /> 6*c8dee2aaSAndroid Build Coastguard Worker <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7*c8dee2aaSAndroid Build Coastguard Worker <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8*c8dee2aaSAndroid Build Coastguard Worker <script src="/res/lottie.js" type="text/javascript" charset="utf-8"></script> 9*c8dee2aaSAndroid Build Coastguard Worker <style type="text/css" media="screen"> 10*c8dee2aaSAndroid Build Coastguard Worker body { 11*c8dee2aaSAndroid Build Coastguard Worker margin: 0; 12*c8dee2aaSAndroid Build Coastguard Worker padding: 0; 13*c8dee2aaSAndroid Build Coastguard Worker } 14*c8dee2aaSAndroid Build Coastguard Worker </style> 15*c8dee2aaSAndroid Build Coastguard Worker</head> 16*c8dee2aaSAndroid Build Coastguard Worker<body> 17*c8dee2aaSAndroid Build Coastguard Worker <main> 18*c8dee2aaSAndroid Build Coastguard Worker <canvas id=canvas width=1000 height=1000 style="height: 1000px; width: 1000px;"></canvas> 19*c8dee2aaSAndroid Build Coastguard Worker </main> 20*c8dee2aaSAndroid Build Coastguard Worker <script type="text/javascript" charset="utf-8"> 21*c8dee2aaSAndroid Build Coastguard Worker (function () { 22*c8dee2aaSAndroid Build Coastguard Worker const PATH = '/res/lottie.json'; 23*c8dee2aaSAndroid Build Coastguard Worker const RENDERER = 'canvas'; 24*c8dee2aaSAndroid Build Coastguard Worker const MAX_FRAMES = 25; 25*c8dee2aaSAndroid Build Coastguard Worker const MAX_LOOPS = 3; 26*c8dee2aaSAndroid Build Coastguard Worker 27*c8dee2aaSAndroid Build Coastguard Worker const cvs = document.getElementById("canvas"); 28*c8dee2aaSAndroid Build Coastguard Worker const canvasContext = cvs.getContext('2d'); 29*c8dee2aaSAndroid Build Coastguard Worker 30*c8dee2aaSAndroid Build Coastguard Worker // Get total number of frames of the animation from the hash. 31*c8dee2aaSAndroid Build Coastguard Worker const hash = window.location.hash; 32*c8dee2aaSAndroid Build Coastguard Worker const totalFrames = hash.slice(1); 33*c8dee2aaSAndroid Build Coastguard Worker console.log("Lottie has " + totalFrames + "total frames"); 34*c8dee2aaSAndroid Build Coastguard Worker 35*c8dee2aaSAndroid Build Coastguard Worker // Load the animation with autoplay false. We will control which 36*c8dee2aaSAndroid Build Coastguard Worker // frame to seek to and then will measure performance. 37*c8dee2aaSAndroid Build Coastguard Worker let anim = lottie.loadAnimation({ 38*c8dee2aaSAndroid Build Coastguard Worker container: document.querySelector('.anim'), 39*c8dee2aaSAndroid Build Coastguard Worker renderer: RENDERER, 40*c8dee2aaSAndroid Build Coastguard Worker loop: false, 41*c8dee2aaSAndroid Build Coastguard Worker autoplay: false, 42*c8dee2aaSAndroid Build Coastguard Worker path: PATH, 43*c8dee2aaSAndroid Build Coastguard Worker rendererSettings: { 44*c8dee2aaSAndroid Build Coastguard Worker context: canvasContext, 45*c8dee2aaSAndroid Build Coastguard Worker scaleMode: 'noScale', 46*c8dee2aaSAndroid Build Coastguard Worker clearCanvas: true, 47*c8dee2aaSAndroid Build Coastguard Worker preserveAspectRatio:'xMidYMid meet', 48*c8dee2aaSAndroid Build Coastguard Worker }, 49*c8dee2aaSAndroid Build Coastguard Worker }); 50*c8dee2aaSAndroid Build Coastguard Worker 51*c8dee2aaSAndroid Build Coastguard Worker const t_rate = 1.0 / (MAX_FRAMES - 1); 52*c8dee2aaSAndroid Build Coastguard Worker let frame = 0; 53*c8dee2aaSAndroid Build Coastguard Worker let loop = 0; 54*c8dee2aaSAndroid Build Coastguard Worker const drawFrame = () => { 55*c8dee2aaSAndroid Build Coastguard Worker if (frame >= MAX_FRAMES) { 56*c8dee2aaSAndroid Build Coastguard Worker // Reached the end of one loop. 57*c8dee2aaSAndroid Build Coastguard Worker loop++; 58*c8dee2aaSAndroid Build Coastguard Worker if (loop == MAX_LOOPS) { 59*c8dee2aaSAndroid Build Coastguard Worker // These are global variables to talk with puppeteer. 60*c8dee2aaSAndroid Build Coastguard Worker window._lottieWebDone = true; 61*c8dee2aaSAndroid Build Coastguard Worker return; 62*c8dee2aaSAndroid Build Coastguard Worker } 63*c8dee2aaSAndroid Build Coastguard Worker // Reset frame to restart the loop. 64*c8dee2aaSAndroid Build Coastguard Worker frame = 0; 65*c8dee2aaSAndroid Build Coastguard Worker } 66*c8dee2aaSAndroid Build Coastguard Worker 67*c8dee2aaSAndroid Build Coastguard Worker let t1 = Math.max(Math.min(t_rate * frame, 1.0), 0.0); 68*c8dee2aaSAndroid Build Coastguard Worker let seekToFrame = totalFrames * t1; 69*c8dee2aaSAndroid Build Coastguard Worker if (seekToFrame >= totalFrames-1) { 70*c8dee2aaSAndroid Build Coastguard Worker // bodymovin player sometimes draws blank when requesting 71*c8dee2aaSAndroid Build Coastguard Worker // to draw the very last frame. Subtracting a small value 72*c8dee2aaSAndroid Build Coastguard Worker // seems to fix this and make it draw the last frame. 73*c8dee2aaSAndroid Build Coastguard Worker seekToFrame -= .001; 74*c8dee2aaSAndroid Build Coastguard Worker } 75*c8dee2aaSAndroid Build Coastguard Worker 76*c8dee2aaSAndroid Build Coastguard Worker anim.goToAndStop(seekToFrame, true /* isFrame */); 77*c8dee2aaSAndroid Build Coastguard Worker console.log("Used seek: " + (seekToFrame/totalFrames)); 78*c8dee2aaSAndroid Build Coastguard Worker frame++; 79*c8dee2aaSAndroid Build Coastguard Worker window.requestAnimationFrame(drawFrame); 80*c8dee2aaSAndroid Build Coastguard Worker }; 81*c8dee2aaSAndroid Build Coastguard Worker window.requestAnimationFrame(drawFrame); 82*c8dee2aaSAndroid Build Coastguard Worker })(); 83*c8dee2aaSAndroid Build Coastguard Worker </script> 84*c8dee2aaSAndroid Build Coastguard Worker</body> 85*c8dee2aaSAndroid Build Coastguard Worker</html> 86