fix: 修复重播暂停播放情况 (#279)

Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>
antvis · Jul 15, 2024 · 9a5fbbb · 9a5fbbb
1 parent 7a6c0b3
commit 9a5fbbb
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 6 deletions.
diff --git a/packages/f-engine/src/canvas/timeline.ts b/packages/f-engine/src/canvas/timeline.ts
@@ -33,11 +33,13 @@ class Timeline extends EE {
 
   start() {
     const { animator, frame, playState, endFrame, time, speed } = this;
+    animator.on('end', this.next);
     if (frame < endFrame && playState === 'finish') {
-      this.frame = endFrame;
+      this.setFinishState();
+      return;
     }
+
     this.drawFrame();
-    animator.on('end', this.next);
     this.animator.run();
     this.setPlayState(playState);
     time && this.goTo(time);
@@ -99,9 +101,8 @@ class Timeline extends EE {
   updateState(state) {
     // 播放状态不同
     if (state === 'finish') {
-      this.frame = this.endFrame;
-      this.drawFrame();
-      this.animator.run();
+      this.setFinishState();
+      return;
     }
 
     this.playState = state;
@@ -131,7 +132,7 @@ class Timeline extends EE {
     // 超出了总时长
     const threshold = 0.0001;
     if (target === animUnits.length && Math.abs(time - threshold) >= 0) {
-      this.setPlayState('finish');
+      this.setFinishState();
       return;
     }
 
@@ -144,6 +145,16 @@ class Timeline extends EE {
 
     this.animator.goTo(time);
   }
+
+  setFinishState() {
+    const { endFrame } = this;
+    this.frame = endFrame;
+    this.drawFrame();
+    this.animator.run();
+    this.setPlayState('finish');
+    this.playState = 'finish';
+    this.frame = endFrame + 1;
+  }
 }
 
 export default Timeline;
diff --git a/packages/f-engine/test/timeline/player.test.tsx b/packages/f-engine/test/timeline/player.test.tsx
@@ -457,4 +457,84 @@ describe('clip animation', () => {
 
     expect(context).toMatchImageSnapshot();
   });
+
+  it('结束后从头暂停再播放', async () => {
+    const context = createContext('结束后从头播放');
+    const { props } = (
+      <Canvas context={context}>
+        <Player
+          state="pause"
+          goTo={2000}
+          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={0}
+          keyFrames={[
+            {
+              view: {
+                to: {
+                  visible: true,
+                },
+                duration: 1000,
+              },
+            },
+          ]}
+        >
+          <View key={'view'} visible={false} />
+        </Player>
+      </Canvas>
+    );
+
+    await canvas.update(newProps);
+    await delay(100);
+
+    const { props: newProps2 } = (
+      <Canvas context={context}>
+        <Player
+          state="play"
+          goTo={0}
+          keyFrames={[
+            {
+              view: {
+                to: {
+                  visible: true,
+                },
+                duration: 1000,
+              },
+            },
+          ]}
+        >
+          <View key={'view'} visible={false} />
+        </Player>
+      </Canvas>
+    );
+
+    await canvas.update(newProps2);
+    await delay(100);
+    //@ts-ignore
+    const shape = canvas.container.childNodes[1].childNodes[0].childNodes[0].style.clipPath;
+
+    expect(Number(shape.style.width)).toBeLessThan(40);
+  });
 });