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