fix: 跳转超出总时长

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

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

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