[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 <fmalita@chromium.org>
Commit-Queue: Joe Gregorio <jcgregorio@google.com>

1 files changed, 12 insertions, 11 deletions

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;
           });
         }
       });