From 7e86547842e6c5d04d3e0e9b1a644679fd0f9099 Mon Sep 17 00:00:00 2001 From: Joe Gregorio Date: Tue, 20 Mar 2018 16:03:13 -0400 Subject: [lottiecap] Fix timestamp calculation to exactly match skottie in DM. Also use the much faster goToAndStop() call. Bug: skia: Change-Id: I22b8ac2b3d2fd70da4b396cb6b4ad50485a6f408 Reviewed-on: https://skia-review.googlesource.com/115324 Reviewed-by: Florin Malita Commit-Queue: Joe Gregorio --- tools/lottiecap/driver.html | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) (limited to 'tools/lottiecap') diff --git a/tools/lottiecap/driver.html b/tools/lottiecap/driver.html index 38e4dfbbbc..381eeef936 100644 --- a/tools/lottiecap/driver.html +++ b/tools/lottiecap/driver.html @@ -49,7 +49,7 @@ }, }); - anim.addEventListener('data_ready', e => { + anim.addEventListener('data_ready', (e) => { // Once the first tile is loaded, calculate what // the filmstrip should look like. let width = anim.animationData.w; @@ -58,8 +58,8 @@ let tileWidth = Math.ceil(scale * width); let tileHeight = Math.ceil(scale * height); - let inPoint = anim.animationData.ip || 0; - let outPoint = anim.animationData.op || anim.animationData.totalFrames - 1; + 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'); @@ -73,8 +73,8 @@ // Clear out the first div now that our measurements are done. main.firstElementChild.remove(); - // Add in the 5x5 tiled divs. - for (let i = 0; i < (TILE_COUNT*TILE_COUNT); i++) { + // 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'; @@ -87,17 +87,18 @@ container: div, renderer: renderer, loop: false, - autoplay: true, + autoplay: false, path: PATH, rendererSettings: { preserveAspectRatio:'xMidYMid meet' }, }); - anim.addEventListener('enterFrame', (e) => { - if (Math.round(anim.currentFrame) >= frameStop) { - anim.pause(); - window._tileCount += 1; - } + + 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; }); } }); -- cgit v1.2.3