fix: 结束上一个animator

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

packages/f-engine/src/player.ts

@@ -103,15 +103,19 @@ class Player extends Component<PlayerProps> {
     const { state, goTo: nextTime, speed: newSpeed } = nextProps;
     const { goTo: lastTime, speed: lastSpeed } = lastProps;
 
-    // state 更新
-    if (!isEqual(state, timeline.getPlayState())) {
-      // 重播状态
-      if (timeline.getPlayState() === 'finish') {
+    if (!isEqual(state, timeline.getPlayState()) && timeline.getPlayState() === 'finish') {
+      // 重播
+      if (nextTime < timeline.totalDuration) {
         timeline.updateState(state);
         timeline.goTo(nextTime);
-      } else {
-        timeline.updateState(state);
       }
+      //保持结束播放状态
+      return;
+    }
+
+    // state 更新
+    if (!isEqual(state, timeline.getPlayState())) {
+      timeline.updateState(state);
     }
 
     if (!isEqual(nextTime, lastTime)) {

packages/f-engine/test/timeline/player.test.tsx

@@ -29,7 +29,7 @@ describe('player', () => {
             update: {
               easing: 'linear',
               duration: 10,
-              property: ['x', 'fill', 'width', 'height'],
+              property: ['x', 'fill', 'width', 'height', 'opacity'],
             },
           }}
         />
@@ -266,6 +266,56 @@ 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();
+  });
 });
 
 describe('clip animation', () => {
@@ -619,77 +669,4 @@ describe('clip animation', () => {
 
     expect(Number(shape.style.width)).toBeLessThan(40);
   });
-
-  it('自然播放结束后重播', async () => {
-    const context = createContext('自然播放结束后重播');
-    const { props } = (
-      <Canvas context={context}>
-        <Player
-          state="play"
-          goTo={0}
-          keyFrames={[
-            {
-              view: {
-                to: {
-                  visible: true,
-                },
-                duration: 400,
-              },
-            },
-            {
-              view: {
-                to: {
-                  width: '50px',
-                },
-                duration: 400,
-              },
-            },
-          ]}
-        >
-          <View key={'view'} visible={false} />
-        </Player>
-      </Canvas>
-    );
-
-    const canvas = new Canvas(props);
-    await canvas.render();
-    await delay(1500);
-
-    // 从头播放动画
-    const { props: newProps } = (
-      <Canvas context={context}>
-        <Player
-          state="pause"
-          goTo={0}
-          keyFrames={[
-            {
-              view: {
-                to: {
-                  visible: true,
-                },
-                duration: 400,
-              },
-            },
-            {
-              view: {
-                to: {
-                  width: '50px',
-                },
-                duration: 400,
-              },
-            },
-          ]}
-        >
-          <View key={'view'} visible={false} />
-        </Player>
-      </Canvas>
-    );
-
-    await canvas.update(newProps);
-    //@ts-ignore
-    const shape = canvas.container.childNodes[1].childNodes[0].childNodes[0].style.clipPath;
-    expect(Number(shape.style.width)).toBeLessThan(5);
-
-    await canvas.update(props);
-  });
 });