From 1c15d73a46ab60a6ef967c68e64fa6f6ac2078fc Mon Sep 17 00:00:00 2001
From: zengyue <yezengyue@gmail.com>
Date: Fri, 2 Feb 2024 15:29:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20text=20=E6=94=AF=E6=8C=81=E6=95=B0?=
 =?UTF-8?q?=E5=80=BC=E5=8F=98=E5=8C=96=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../f-engine/src/canvas/render/animator.ts    |  25 +++++++++---
 ...ion-test-tsx-canvas-text-number-1-snap.png | Bin 0 -> 2839 bytes
 .../f-engine/test/shape/animation.test.tsx    |  37 ++++++++++++++++++
 3 files changed, 57 insertions(+), 5 deletions(-)
 create mode 100644 packages/f-engine/test/shape/__image_snapshots__/animation-test-tsx-canvas-text-number-1-snap.png

diff --git a/packages/f-engine/src/canvas/render/animator.ts b/packages/f-engine/src/canvas/render/animator.ts
index 2108c00e..03ee6f51 100644
--- a/packages/f-engine/src/canvas/render/animator.ts
+++ b/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) {
diff --git a/packages/f-engine/test/shape/__image_snapshots__/animation-test-tsx-canvas-text-number-1-snap.png b/packages/f-engine/test/shape/__image_snapshots__/animation-test-tsx-canvas-text-number-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..e9f36925d2d2c6eeae79d77fbcef1cdf44221c0a
GIT binary patch
literal 2839
zcmeHJ`%hB`7`=VnvdXngaHJL?(IF&4E1(oCuHcxAh|JAR%fnI`Lz%p^yo=Ba^BF@y
z#Y(}VKd4)zJQtv)p_ieefwo4JhlO&5*^9esn^e|9DU5$(3BP<fKb@SMobP<!<->__
z5N!($001cd+t?offDp8X-?)Km^KAL0hX6n`#mC0{SR(i!Pnx$Z`dn=8h`Z|bq~HJX
zrH1tEq_ZcEU2q%SU38(-{m8%m#`D3(FTDdZPTpwvp5+z-o(T!Omp#dP-+A7&usGh9
zCMxKEAZnUxz>bYZx(s=XUl~s8N9|76?d$V(uzLo&`Ur_<N^M=p1K6HZGW`nHl6uG$
z>NkZcilzOi8rfMa_#{O4AW8|FfPE-miCWD<UP%l9o3f&QOA_aTp;j%YeGlJGtk}3*
zGI&=&au`EsV?Rr%07lHC2-<7#a6~EzAf%<lsDtzU&@+e_jw5QRCVHxyCY^NTJ6$wb
zQw=Kz$~aaEx(V&veA%1CAqyZ4qnBpggfft4h*2W5knw)Ju!qV56`zeHO)Rf0AOY|Z
zSW1*q%n9%ABBVCNFeqWRVdwG!_=e;TwX;muG<_%|ue%1jxHH{0B&7;AOnr=SShk1N
z!VuUE;@i+UWJtmzq)`;~gx^f$DYp_gYa*JB$`B*mrxdz2I2hIfv=PB2T0nGvw=9dD
z+_B_it>1h{RnW(?K3e^2;eb&8_eOoYfRf-r7l?jBn~`@2S3+;;YAGESw;5jllU{9B
z$YFOMh?KH=?IRWUMegB(=e(mHCZK%lty3d&ETs5o`;G)URnaao+aMG~{9rbTllD0`
z$5j^5<Q$ND=qF!Ba@i}KT_;m5MAn3gUi@UQNy*xX^_C@qq4{1=w(FqUuceWw<qz2|
z7V_Q=;%0l?n4#Em;x;`Bqt#Th2yCh^R8B0J-0R$%`qCxT>FiwP!N;Z2YUXP3@qwl1
zSH_knT@p4i<+#tsjs?wHG6ESBOR@qUpOYjzCyJmB$Qx&xlkHc`7}YK{kE;?i+pRYW
zmqmXRVTGj;GZW`FI2P1o&BBF7=bGl>r<n4TE^eCOAmr1mU!cdhGN~xY^F?W*bd8!E
zo*z`TXXf=j?_P{Hm|ArxdI#V0s*2nsj-R2J&5rBi`&w05l{<FHszf&ngV7i~)A=aF
zgdLW;gj>nK>L<*ZD^or4xrVORMa|+iVa<tt|E8{o1`GK;S@H1eVWi%O)R9l;_8KZH
z1q69l{d8E1g=8V<lX=a|d0UQYKszXB&e?KiqxzvJv5TvW?2|j=J^xGrcm#!7WGk;I
z`h94M(`ObG6!A{#U;B2L#4I|mSEPza^NFH4boI{4^YdZ(v&@MtEy1zlp!r%}?tKf-
zjE$2j`rblPROR^q_uF=0Jjvc&QB1ZN4~Evlb3&94;t}YlI>uAUWb{C28#4vW0BJX~
zpXY}P!w<KQ;7@K68sI8_=I$o<TaZ_fP2KTJbmkr5GY|?OWs)evn%rzgEhCWM88i57
ronqaK^<1p)$a-I_cjy1;j-WiIsdd)<MYzY>!wbZJlNj5&Us&}YVo~CG

literal 0
HcmV?d00001

diff --git a/packages/f-engine/test/shape/animation.test.tsx b/packages/f-engine/test/shape/animation.test.tsx
index 146c7ccb..d2e69752 100644
--- a/packages/f-engine/test/shape/animation.test.tsx
+++ b/packages/f-engine/test/shape/animation.test.tsx
@@ -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();
+  });
 });