From c1a9783886ff52e87b31e8203fcedec729dcfeda Mon Sep 17 00:00:00 2001
From: "xuying.xu" <xuying.xu@alibaba-inc.com>
Date: Fri, 21 Jun 2024 17:57:03 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B7=B3=E8=BD=AC=E8=B6=85=E5=87=BA?=
 =?UTF-8?q?=E6=80=BB=E6=97=B6=E9=95=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/f-engine/src/canvas/timeline.ts      |   8 +++
 packages/f-engine/test/g.test.tsx             |  28 +++++++++
 ...00\273\346\227\266\351\225\277-1-snap.png" | Bin 0 -> 1980 bytes
 .../f-engine/test/timeline/player.test.tsx    |  54 ++++++++++++++++++
 4 files changed, 90 insertions(+)
 create mode 100644 "packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-clip-animation-\350\267\263\350\275\254\350\266\205\345\207\272\346\200\273\346\227\266\351\225\277-1-snap.png"

diff --git a/packages/f-engine/src/canvas/timeline.ts b/packages/f-engine/src/canvas/timeline.ts
index ae9cace6..deda6cc3 100644
--- a/packages/f-engine/src/canvas/timeline.ts
+++ b/packages/f-engine/src/canvas/timeline.ts
@@ -123,18 +123,26 @@ class Timeline extends EE {
       const cur = animUnits[i];
       target = i;
       if (time > cur.time) {
+        target = i + 1;
         time -= cur.time; // 计算剩余时间
       } else {
         break;
       }
     }
 
+    // 超出了总时长
+    if (target === animUnits.length && time > 0) {
+      this.setPlayState('finish');
+      return;
+    }
+
     if (frame !== target) {
       this.frame = target;
       this.drawFrame();
       this.animator.run();
       this.setPlayState(playState);
     }
+
     this.animator.goTo(time);
   }
 }
diff --git a/packages/f-engine/test/g.test.tsx b/packages/f-engine/test/g.test.tsx
index e761dde6..7a19c69d 100644
--- a/packages/f-engine/test/g.test.tsx
+++ b/packages/f-engine/test/g.test.tsx
@@ -70,4 +70,32 @@ describe('G 的测试使用', () => {
 
     await delay(1000);
   });
+
+  it.only('clip', async () => {
+    await canvas.ready;
+
+    await delay(1000);
+
+    const rect = new Rect({
+      style: {
+        x: 10,
+        y: 10,
+        width: 60,
+        height: 50,
+        fill: 'red',
+      },
+    });
+
+    canvas.appendChild(rect);
+
+    const animation = rect.animate([{ width: 0 }, { width: 60 }], {
+      duration: 500,
+      easing: 'ease',
+      fill: 'both',
+    });
+
+    animation.finish();
+    animation.pause();
+    animation.currentTime = 600;
+  });
 });
diff --git "a/packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-clip-animation-\350\267\263\350\275\254\350\266\205\345\207\272\346\200\273\346\227\266\351\225\277-1-snap.png" "b/packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-clip-animation-\350\267\263\350\275\254\350\266\205\345\207\272\346\200\273\346\227\266\351\225\277-1-snap.png"
new file mode 100644
index 0000000000000000000000000000000000000000..863f60f319da6dbc20ee82c0f6a05dcf4fce5ed9
GIT binary patch
literal 1980
zcmeAS@N?(olHy`uVBq!ia0y~yVAKJ!A9An($)cK$)eH>m&7LlfAr*0NuWaOGFce^R
z-2H#i|84;tzGFKrj1S&>Kj*#8pLdquAHM%7#mKbqfascl+nP))YK#YG{pjHo&|qa*
zeWk3Mq0!S}gPL736N?w)L9MNKl^ha;1lDw(pTW==<gmdjcRPo`3>KE`N5*On3q%Cg
z1l`sh;YPgMVy5QM;Gm%pp|~xWg(HWlY3t8OVFdv$j<AlmB8*J48xnHsuCZ{mFg1xL
zS-UnIP*aGQJ>L`<0}TnSH~a(@HgIxWdzS7yYQ$(*jHZjxJTh8d4B@i#1M>vafJgOx
SbDjZfWd=`IKbLh*2~7Yqs;Qy?

literal 0
HcmV?d00001

diff --git a/packages/f-engine/test/timeline/player.test.tsx b/packages/f-engine/test/timeline/player.test.tsx
index be86ca01..a9e2d6e4 100644
--- a/packages/f-engine/test/timeline/player.test.tsx
+++ b/packages/f-engine/test/timeline/player.test.tsx
@@ -372,4 +372,58 @@ describe('clip animation', () => {
 
     expect(context).toMatchImageSnapshot();
   });
+
+  it('跳转超出总时长', async () => {
+    const context = createContext('跳转超出总时长');
+
+    //结束后重播
+    const { props } = (
+      <Canvas context={context}>
+        <Player
+          state="finish"
+          keyFrames={[
+            {
+              view: {
+                to: {
+                  visible: true,
+                },
+                duration: 1000,
+              },
+            },
+          ]}
+        >
+          <View key={'view'} visible={false} />
+        </Player>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+    await delay(100);
+
+    const { props: newProps } = (
+      <Canvas context={context}>
+        <Player
+          state="pause"
+          goTo={1200}
+          keyFrames={[
+            {
+              view: {
+                to: {
+                  visible: true,
+                },
+                duration: 1000,
+              },
+            },
+          ]}
+        >
+          <View key={'view'} visible={false} />
+        </Player>
+      </Canvas>
+    );
+
+    await canvas.update(newProps);
+    await delay(100);
+    expect(context).toMatchImageSnapshot();
+  });
 });