fix: 跳转超出总时长

packages/f-engine/src/canvas/timeline.ts

@@ -119,22 +119,28 @@ class Timeline extends EE {
     const { frame, animUnits, playState } = this;
     let target;
 
-    for (let i = 0; i < animUnits.length; i++) {
-      const cur = animUnits[i];
-      target = i;
-      if (time > cur.time) {
+    for (target = 0; target < animUnits.length; target++) {
+      const cur = animUnits[target];
+      if (time >= cur.time) {
         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/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();
+  });
 });