fix：自然播放结束后重播 & 跳转时结束当前动画 (#283)

* fix: 自然播放结束后重播情况 * fix: 结束上一个animator * chore: 补充重播单测 --------- Co-authored-by: xuying.xu <[email protected]>
antvis · Jul 23, 2024 · 3726d85 · 3726d85
1 parent e796675
commit 3726d85
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 10 deletions.
diff --git a/packages/f-engine/src/canvas/timeline.ts b/packages/f-engine/src/canvas/timeline.ts
@@ -15,6 +15,7 @@ class Timeline extends EE {
   endFrame: number;
   speed: number;
   time: number;
+  totalDuration: number;
 
   constructor(props) {
     super();
@@ -29,6 +30,8 @@ class Timeline extends EE {
     this.endFrame = animUnits.length - 1;
     this.speed = speed;
     this.time = time;
+
+    this.totalDuration = animUnits.reduce((accumulator, current) => accumulator + current.time, 0);
   }
 
   start() {
@@ -117,9 +120,14 @@ class Timeline extends EE {
   }
 
   goTo(time) {
-    const { frame, animUnits, playState } = this;
-    let target;
+    const { frame, animUnits, playState, totalDuration } = this;
+    // 超出了总时长
+    if (time > totalDuration && playState !== 'finish') {
+      this.setFinishState();
+      return;
+    }
 
+    let target;
     for (target = 0; target < animUnits.length; target++) {
       const cur = animUnits[target];
       if (time >= cur.time) {
@@ -129,16 +137,11 @@ class Timeline extends EE {
       }
     }
 
-    // 超出了总时长
-    const threshold = 0.0001;
-    if (target === animUnits.length && Math.abs(time - threshold) >= 0) {
-      this.setFinishState();
-      return;
-    }
-
     if (frame !== target) {
       this.frame = target;
       this.drawFrame();
+      // 结束当前动画
+      this.setPlayState('finish');
       this.animator.run();
       this.setPlayState(playState);
     }

diff --git a/packages/f-engine/src/player.ts b/packages/f-engine/src/player.ts
@@ -103,6 +103,16 @@ class Player extends Component<PlayerProps> {
     const { state, goTo: nextTime, speed: newSpeed } = nextProps;
     const { goTo: lastTime, speed: lastSpeed } = lastProps;
 
+    if (!isEqual(state, timeline.getPlayState()) && timeline.getPlayState() === 'finish') {
+      // 重播
+      if (nextTime < timeline.totalDuration) {
+        timeline.updateState(state);
+        timeline.goTo(nextTime);
+      }
+      //保持结束播放状态
+      return;
+    }
+
     // state 更新
     if (!isEqual(state, timeline.getPlayState())) {
       timeline.updateState(state);

diff --git a/...gine/test/timeline/__image_snapshots__/player-test-tsx-player-多组动画回跳-1-snap.png b/...gine/test/timeline/__image_snapshots__/player-test-tsx-player-多组动画回跳-1-snap.png
diff --git a/packages/f-engine/test/timeline/player.test.tsx b/packages/f-engine/test/timeline/player.test.tsx
@@ -25,11 +25,14 @@ describe('player', () => {
               easing: 'linear',
               duration: 10,
               property: ['width'],
+              start: {
+                width: 5,
+              },
             },
             update: {
               easing: 'linear',
               duration: 10,
-              property: ['x', 'fill', 'width', 'height'],
+              property: ['x', 'fill', 'width', 'height', 'opacity'],
             },
           }}
         />
@@ -266,6 +269,133 @@ describe('player', () => {
       Number(canvas.container.childNodes[1].childNodes[0].childNodes[0].childNodes[0].style.width),
     ).toEqual(40);
   });
+
+  it('多组动画回跳', async () => {
+    const context = createContext('多组动画回跳');
+    const ref = { current: null };
+    const { props } = (
+      <Canvas context={context}>
+        <Player
+          state="pause"
+          goTo={2000}
+          ref={ref}
+          keyFrames={[
+            {
+              view: {
+                to: {
+                  visible: true,
+                  width: '80px',
+                },
+                duration: 400,
+              },
+            },
+            {
+              view: {
+                to: {
+                  width: '200px',
+                },
+                duration: 800,
+              },
+            },
+          ]}
+        >
+          <View key={'view'} visible={false} />
+        </Player>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    ref.current.goTo(700);
+    ref.current.setPlayState('pause');
+    await delay(200);
+    ref.current.goTo(200);
+    ref.current.setPlayState('pause');
+    await delay(200);
+
+    ref.current.setPlayState('play');
+
+    await delay(2000);
+    expect(context).toMatchImageSnapshot();
+  });
+
+  it('自然播放结束后重播', async () => {
+    const context = createContext('自然播放结束后重播');
+    const ref = { current: null };
+    const { props } = (
+      <Canvas context={context}>
+        <Player
+          state="play"
+          goTo={0}
+          ref={ref}
+          keyFrames={[
+            {
+              view: {
+                to: {
+                  visible: true,
+                },
+                duration: 200,
+              },
+            },
+            {
+              view: {
+                to: {
+                  width: '200px',
+                },
+                duration: 200,
+              },
+            },
+          ]}
+        >
+          <View key={'view'} visible={false} />
+        </Player>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+    await delay(1000);
+
+    const { props: newProps } = (
+      <Canvas context={context}>
+        <Player
+          state="pause"
+          goTo={0}
+          ref={ref}
+          keyFrames={[
+            {
+              view: {
+                to: {
+                  visible: true,
+                },
+                duration: 200,
+              },
+            },
+            {
+              view: {
+                to: {
+                  width: '200px',
+                },
+                duration: 200,
+              },
+            },
+          ]}
+        >
+          <View key={'view'} visible={false} />
+        </Player>
+      </Canvas>
+    );
+    await canvas.update(newProps);
+    // 重播
+    await canvas.update(props);
+    await delay(10);
+
+    expect(
+      //@ts-ignore
+      Number(canvas.container.getElementsByTagName('rect')[0].style.width),
+    ).toBeLessThan(10);
+  });
 });
 
 describe('clip animation', () => {