fix: animation set time 0

antvis · Jun 20, 2024 · a2b1568 · a2b1568
1 parent 69c2ba2
commit a2b1568
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 3 deletions.
diff --git a/packages/f-engine/src/canvas/timeline.ts b/packages/f-engine/src/canvas/timeline.ts
@@ -96,14 +96,21 @@ class Timeline extends EE {
     return this.playState;
   }
 
-  updateState(nextProps) {
+  updateState(state) {
     // 播放状态不同
-    const { state } = nextProps;
     if (state === 'finish') {
       this.frame = this.endFrame;
       this.drawFrame();
       this.animator.run();
     }
+
+    // 从finish 到 play 的话
+    // if (this.playState === 'finish') {
+    //   this.frame = 0;
+    //   this.playState = state;
+    //   this.start();
+    //   return;
+    // }
     this.playState = state;
     this.setPlayState(state);
   }
@@ -135,6 +142,8 @@ class Timeline extends EE {
       this.animator.run();
       this.setPlayState(playState);
     }
+    // animation设置time为0时为结束态
+    if (time === 0) time++;
     this.animator.goTo(time);
   }
 }

diff --git a/packages/f-engine/src/player.ts b/packages/f-engine/src/player.ts
@@ -105,7 +105,7 @@ class Player extends Component<PlayerProps> {
 
     // state 更新
     if (!isEqual(state, timeline.getPlayState())) {
-      timeline.updateState({ state });
+      timeline.updateState(state);
     }
 
     if (!isEqual(nextTime, lastTime)) {
@@ -118,6 +118,11 @@ class Player extends Component<PlayerProps> {
     }
   }
 
+  setPlayState(state) {
+    const { timeline } = this;
+    timeline.updateState(state);
+  }
+
   goTo(time) {
     const { timeline } = this;
     timeline.goTo(time);

diff --git a/.../test/timeline/__image_snapshots__/key-frames-test-tsx-player-0-特殊处理-1-snap.png b/.../test/timeline/__image_snapshots__/key-frames-test-tsx-player-0-特殊处理-1-snap.png
diff --git a/packages/f-engine/test/timeline/keyFrames.test.tsx b/packages/f-engine/test/timeline/keyFrames.test.tsx
@@ -479,6 +479,82 @@ describe('player', () => {
     expect(context).toMatchImageSnapshot();
   });
 
+  it('0特殊处理', async () => {
+    const context = createContext('0特殊处理');
+    const ref = { current: null };
+    const { props } = (
+      <Canvas context={context}>
+        <Player
+          state="finish"
+          ref={ref}
+          keyFrames={[
+            {
+              view: {
+                to: {
+                  width: '80px',
+                  visible: true,
+                },
+              },
+            },
+            {
+              view1: {
+                to: {
+                  width: '80px',
+                  visible: true,
+                },
+              },
+            },
+          ]}
+        >
+          <group>
+            <View key={'view'} visible={false} />
+            <View key={'view1'} visible={false} fill={'yellow'} />
+          </group>
+        </Player>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+    await delay(200);
+    const { props: newProps } = (
+      <Canvas context={context}>
+        <Player
+          state="pause"
+          goTo={0}
+          ref={ref}
+          keyFrames={[
+            {
+              view: {
+                to: {
+                  width: '80px',
+                  visible: true,
+                },
+              },
+            },
+            {
+              view1: {
+                to: {
+                  width: '80px',
+                  visible: true,
+                },
+              },
+            },
+          ]}
+        >
+          <group>
+            <View key={'view'} visible={false} />
+            <View key={'view1'} visible={false} fill={'yellow'} />
+          </group>
+        </Player>
+      </Canvas>
+    );
+
+    canvas.update(newProps);
+    await delay(100);
+    expect(context).toMatchImageSnapshot();
+  });
+
   it('keyFrames-连续变化', async () => {
     const context = createContext('连续变化');
     const { props } = (