fix:snapshot为上一帧执行完动画的shape

packages/f-engine/src/player.ts

@@ -7,6 +7,7 @@ import Children from './children';
 import { IContext } from './types';
 import { VNode } from './canvas/vnode';
 import { isEqual } from '@antv/util';
+import applyStyle from './canvas/render/applyStyle';
 
 // 播放状态
 type playState = 'play' | 'pause' | 'finish';
@@ -38,10 +39,16 @@ function cloneNode(vnode) {
     if (!child) {
       return;
     }
-    const { shape, children } = child;
+    const { shape, children, animator } = child;
+    const { end = {} } = animator;
+
+    // 拿到上一帧的snapshot
+    const snapshot = shape.cloneNode();
+    applyStyle(snapshot, end);
+
     return {
       ...child,
-      shape: shape.cloneNode(),
+      shape: snapshot,
       children: cloneNode(children),
     };
   });

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

@@ -479,6 +479,44 @@ describe('player', () => {
     expect(context).toMatchImageSnapshot();
   });
 
+  it('keyFrames-连续变化', async () => {
+    const context = createContext('连续变化');
+    const { props } = (
+      <Canvas context={context}>
+        <Player
+          state="play"
+          keyFrames={[
+            // 变宽
+            {
+              view: {
+                to: {
+                  width: '10px',
+                },
+              },
+            },
+            {
+              view: {
+                to: {
+                  visible: true,
+                  width: '80px',
+                },
+                duration: 500,
+              },
+            },
+            {},
+          ]}
+        >
+          <View key={'view'} />
+        </Player>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+    await delay(2000);
+    expect(context).toMatchImageSnapshot();
+  });
+
   it.skip('leave 动画', async () => {
     const context = createContext('动画 finish');
     const ref = { current: null };