feat: Guide 支持动画callback配置

packages/f2/src/components/guide/views/Arc.tsx

@@ -10,7 +10,7 @@ type ArcGuideProps = {
 
 export default (props: ArcGuideProps) => {
   const { theme = {} } = props;
-  const { coord, points, style } = deepMix({ ...theme.line }, props);
+  const { coord, points, style, animation } = deepMix({ ...theme.line }, props);
 
   const start = points[0] || {};
   const end = points[1] || {};
@@ -35,6 +35,7 @@ export default (props: ArcGuideProps) => {
           endAngle,
           ...style,
         }}
+        animation={animation}
       />
     </group>
   );

packages/f2/src/components/guide/views/Image.tsx

@@ -1,5 +1,6 @@
 import { jsx } from '../../../jsx';
 import { Style } from '../../../types';
+import { deepMix } from '@antv/util';
 
 type ImageGuideProps = {
   src: string;
@@ -22,8 +23,8 @@ const baseAttrs = {
 };
 
 export default (props: ImageGuideProps) => {
-  const cfg = { ...defaultProps, ...props };
-  const { points, style, attrs, offsetX, offsetY, src } = cfg;
+  const cfg = deepMix({}, defaultProps, props);
+  const { points, style, attrs, offsetX, offsetY, src, animation } = cfg;
   const { x, y } = points[0] || {};
   const { height = 0, width = 0 } = attrs;
   const posX = x + (offsetX || 0) - height / 2;
@@ -41,13 +42,16 @@ export default (props: ImageGuideProps) => {
           y: posY,
           src,
         }}
-        animation={{
-          update: {
-            easing: 'linear',
-            duration: 450,
-            property: ['x', 'y'],
+        animation={deepMix(
+          {
+            update: {
+              easing: 'linear',
+              duration: 450,
+              property: ['x', 'y'],
+            },
           },
-        }}
+          animation
+        )}
       />
     </group>
   );

packages/f2/src/components/guide/views/Line.tsx

@@ -12,7 +12,7 @@ type LineGuideProps = {
 
 export default (props: LineGuideProps) => {
   const { theme = {} } = props;
-  const { points, style, offsetX, offsetY } = deepMix({ ...theme.line }, props);
+  const { points, style, offsetX, offsetY, animation } = deepMix({ ...theme.line }, props);
   const { x: x1, y: y1 } = points[0] || {};
   const { x: x2, y: y2 } = points[1] || {};
 
@@ -32,6 +32,7 @@ export default (props: LineGuideProps) => {
           y2: posY2,
           ...style,
         }}
+        animation={animation}
       />
     </group>
   );

packages/f2/src/components/guide/views/Point.tsx

@@ -12,7 +12,7 @@ type PointGuideProps = {
 
 export default (props: PointGuideProps) => {
   const { theme } = props;
-  const { points, style, offsetX, offsetY } = deepMix({ ...theme.point }, props);
+  const { points, style, offsetX, offsetY, animation } = deepMix({ ...theme.point }, props);
   const { x, y } = points[0] || {};
 
   const posX = x + (offsetX || 0);
@@ -26,6 +26,7 @@ export default (props: PointGuideProps) => {
           y: posY,
           ...style,
         }}
+        animation={animation}
       />
     </group>
   );

packages/f2/src/components/guide/views/Rect.tsx

@@ -10,7 +10,7 @@ type RectGuideProps = {
 
 export default (props: RectGuideProps) => {
   const { theme = {} } = props;
-  const { points, style } = deepMix({ ...theme.rect }, props);
+  const { points, style, animation } = deepMix({ ...theme.rect }, props);
 
   const start = points[0] || {};
   const end = points[1] || {};
@@ -25,6 +25,7 @@ export default (props: RectGuideProps) => {
           height: Math.abs(start.y - end.y),
           ...style,
         }}
+        animation={animation}
       />
     </group>
   );

packages/f2/src/components/guide/withGuide.tsx

@@ -1,6 +1,6 @@
 import { jsx } from '../../jsx';
 import Component from '../../base/component';
-import { isString, isNil } from '@antv/util';
+import { isString, isNil, isFunction } from '@antv/util';
 import { Ref } from '../../types';
 import Chart from '../../chart';
 import { renderShape } from '../../base/diff';
@@ -112,12 +112,18 @@ export default (View) => {
 
     render() {
       const { props, context } = this;
-      const { coord, records = [] } = props;
+      const { coord, records = [], animation, chart } = props;
       const { width, height } = context;
       const points = this.convertPoints(records);
       const theme = this.getGuideTheme();
       const { guideWidth, guideHeight, guideBBox } = this.state;
 
+      let animationCfg = animation;
+      if (isFunction(animation)) {
+        // 透传绘制关键点和chart实例
+        animationCfg = animation(points, chart);
+      }
+
       return (
         <View
           triggerRef={this.triggerRef}
@@ -130,6 +136,7 @@ export default (View) => {
           guideWidth={guideWidth}
           guideHeight={guideHeight}
           guideBBox={guideBBox}
+          animation={animationCfg}
         />
       );
     }

packages/f2/test/components/guide/guide.test.tsx

@@ -8,7 +8,7 @@ import {
   TextGuide,
   LineGuide,
 } from '../../../src/components';
-import { Canvas, Chart } from '../../../src';
+import { Canvas, Chart, Interval } from '../../../src';
 import { createContext, delay } from '../../util';
 import imageBianzu from './images/bianzu';
 
@@ -75,7 +75,7 @@ describe('Guide ', () => {
     // 10个图例 和1条线
     expect(container._attrs.children[0]._attrs.children.length).toBe(11);
 
-    await delay(50);
+    await delay(250);
     expect(context).toMatchImageSnapshot();
   });
 
@@ -218,4 +218,66 @@ describe('Guide ', () => {
     await delay(50);
     expect(context).toMatchImageSnapshot();
   });
+
+  it('TextGuide 动画 - 支持callback配置', async () => {
+    const context = createContext();
+    const { props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart
+          data={data}
+          coord={{
+            transposed: true,
+          }}
+        >
+          <Interval
+            x="genre"
+            y="sold"
+            color="type"
+            animation={{
+              appear: {
+                duration: 1000,
+                easing: 'quinticIn',
+                property: ['width'],
+              },
+            }}
+          />
+
+          {data.map((item) => {
+            const { sold } = item;
+            return (
+              <TextGuide
+                records={[item]}
+                onClick={(ev) => {
+                  console.log('ev: ', ev.points);
+                }}
+                content={`${sold}`}
+                attrs={{
+                  fill: '#000',
+                  fontSize: '24px',
+                }}
+                animation={(points, props) => {
+
+                  return {
+                    appear: {
+                      easing: 'quinticIn',
+                      duration: 1000,
+                      property: ['x'],
+                      start: {
+                        x: props.coord.left,
+                      },
+                    },
+                  };
+                }}
+              />
+            );
+          })}
+        </Chart>
+      </Canvas>
+    );
+    const chart = new Canvas(props);
+    chart.render();
+
+    await delay(1100);
+    expect(context).toMatchImageSnapshot();
+  });
 });