| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Lottie Filmstrip Capture</title> |
| <meta charset="utf-8" /> |
| <meta http-equiv="X-UA-Compatible" content="IE=egde,chrome=1"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <script src="/lottie.js" type="text/javascript" charset="utf-8"></script> |
| <style type="text/css" media="screen"> |
| body, |
| main, |
| .anim { |
| margin: 0; |
| padding: 0; |
| } |
| |
| main { |
| display: flex; |
| width: 1000px; |
| height: 1000px; |
| flex-flow: row wrap; |
| } |
| </style> |
| </head> |
| <body> |
| <main> |
| <div class=anim></div> |
| </main> |
| <script type="text/javascript" charset="utf-8"> |
| (function () { |
| const TILE_COUNT = 5; // Number of tiles in x or y direction. |
| const TARGET_SIZE = 1000; // Image size in pixels both x and y direction. |
| const PATH = '/lottie.json'; |
| |
| // This global is used by puppeteer to determine if all tiles have finished drawing. |
| window._tileCount = 0; |
| |
| // First load the animation for just a single tile |
| // so we can read out some values and calculate what |
| // the filmstrip should look like. |
| let anim = lottie.loadAnimation({ |
| container: document.querySelector('.anim'), |
| renderer: 'svg', |
| loop: false, |
| autoplay: true, |
| path: PATH, |
| rendererSettings: { |
| preserveAspectRatio:'xMidYMid meet' |
| }, |
| }); |
| |
| anim.addEventListener('data_ready', (e) => { |
| // Once the first tile is loaded, calculate what |
| // the filmstrip should look like. |
| let width = anim.animationData.w; |
| let height = anim.animationData.h; |
| let scale = TARGET_SIZE / (TILE_COUNT * Math.max(width, height)); |
| let tileWidth = Math.ceil(scale * width); |
| let tileHeight = Math.ceil(scale * height); |
| |
| let inPoint = (anim.animationData.ip || 0) / anim.frameRate; |
| let outPoint = (anim.animationData.op || (anim.animationData.totalFrames - 1)) / anim.frameRate; |
| let frameStep = (outPoint - inPoint) / (TILE_COUNT * TILE_COUNT - 1); |
| |
| let main = document.querySelector('main'); |
| |
| let renderer = 'svg'; |
| let hash = window.location.hash; |
| if (hash) { |
| renderer = hash.slice(1); |
| } |
| |
| // Clear out the first div now that our measurements are done. |
| main.firstElementChild.remove(); |
| |
| // Add in all the tiles. |
| for (let i = 0; i < TILE_COUNT*TILE_COUNT; i++) { |
| let div = document.createElement('div'); |
| div.classList.add('anim'); |
| div.style.width = tileWidth + 'px'; |
| div.style.height = tileHeight + 'px'; |
| main.appendChild(div); |
| |
| let frameStop = i * frameStep; |
| |
| let anim = lottie.loadAnimation({ |
| container: div, |
| renderer: renderer, |
| loop: false, |
| autoplay: false, |
| path: PATH, |
| rendererSettings: { |
| preserveAspectRatio:'xMidYMid meet' |
| }, |
| }); |
| |
| anim.addEventListener('data_ready', (e) => { |
| console.log(frameStop*1000); |
| // Once data is loaded, jump to the right frame. |
| anim.goToAndStop(frameStop * anim.frameRate, true); |
| window._tileCount += 1; |
| }); |
| } |
| }); |
| })(); |
| </script> |
| </body> |
| </html> |
