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