diff --git a/packages/f-engine/src/canvas/render/animator.ts b/packages/f-engine/src/canvas/render/animator.ts index 2108c00..03ee6f5 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 0000000..e9f3692 Binary files /dev/null and b/packages/f-engine/test/shape/__image_snapshots__/animation-test-tsx-canvas-text-number-1-snap.png differ diff --git a/packages/f-engine/test/shape/animation.test.tsx b/packages/f-engine/test/shape/animation.test.tsx index 146c7cc..d2e6975 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 } = ( + + { + onFrame(); + return { + text: `index: ${(100 * t).toFixed(0)}`, + }; + }, + }, + }} + /> + + ); + + const canvas = new Canvas(props); + await delay(100); + await canvas.render(); + await delay(500); + expect(context).toMatchImageSnapshot(); + expect(onFrame).toBeCalled(); + }); });