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