feat: text 支持数值变化动画

Author: zengyue

packages/f-engine/src/canvas/render/animator.ts

@@ -43,11 +43,11 @@ class Animator extends EE {
         iterations,
         clip,
         direction = 'normal',
-        onFrame = () => {},
-        onEnd = () => {},
+        onFrame,
+        onEnd,
       } = effect;
       // shape 动画
-      if (property.length && duration > 0) {
+      if ((property.length || onFrame) && duration > 0) {
         // 应用样式
         const style = { ...omit(start, property), ...omit(end, property) };
         applyStyle(shape, style);
@@ -68,8 +68,23 @@ class Animator extends EE {
           direction,
         });
         if (animation) {
-          animation.onframe = onFrame;
-          animation.onfinish = onEnd;
+          const onframe = onFrame
+            ? (e) => {
+                const animationTarget = e.target;
+                const timing = animationTarget.effect.getTiming();
+                const duration = timing.duration;
+                const t = e.currentTime / duration;
+                applyStyle(shape, onFrame(t, e));
+              }
+            : null;
+          animation.onframe = onframe;
+          animation.onfinish =
+            onframe || onEnd
+              ? (e) => {
+                  onframe && onframe(e);
+                  onEnd && onEnd(e);
+                }
+              : null;
 
           // 过滤无限循环的动画
           if (iterations !== Infinity) {

packages/f-engine/test/shape/__image_snapshots__/animation-test-tsx-canvas-text-number-1-snap.png

@@ -343,4 +343,41 @@ describe('Canvas', () => {
     await delay(1500);
     expect(context).toMatchImageSnapshot();
   });
+
+  it('text number', async () => {
+    const context = createContext('text-number');
+    const onFrame = jest.fn();
+    const { props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <text
+          style={{
+            x: 10,
+            y: 10,
+            fill: '#000',
+            text: 'index: 100',
+          }}
+          animation={{
+            appear: {
+              easing: 'quadraticOut',
+              duration: 100,
+              // property: [],
+              onFrame: (t) => {
+                onFrame();
+                return {
+                  text: `index: ${(100 * t).toFixed(0)}`,
+                };
+              },
+            },
+          }}
+        />
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await delay(100);
+    await canvas.render();
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
+    expect(onFrame).toBeCalled();
+  });
 });