feat: 支持 Interval 和 TextGuide 的 animation 透传 (#1255)

antvis · Nov 16, 2021 · 05abb88 · 05abb88
1 parent 7662cc7
commit 05abb88
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 18 deletions.
diff --git a/packages/f2/src/canvas/animation/interface.ts b/packages/f2/src/canvas/animation/interface.ts
@@ -3,10 +3,10 @@ export type InterpolateFunction = (t: number) => any;
 
 export interface Animation {
   // 缓动函数
-  easing: string | EasingFunction;
+  easing?: string | EasingFunction;
   duration: number;
   delay?: number;
-  property: string[];
+  property?: string[];
   // 裁剪区动画
   clip?: any;
   // start 的 attrs
@@ -17,3 +17,12 @@ export interface Animation {
   onFrame?: any;
   onEnd?: any;
 }
+
+/**
+ * 动画生命周期
+ */
+export interface AnimationCycle {
+  appear?: Animation;
+  update?: Animation;
+  destroy?: Animation;
+}
diff --git a/packages/f2/src/components/geometry/index.tsx b/packages/f2/src/components/geometry/index.tsx
@@ -7,6 +7,7 @@ import { toTimeStamp } from '../../util/index';
 import { GeomType, GeometryProps } from './interface';
 import AttrController from '../../controller/attr';
 import equal from '../../base/equal';
+import { AnimationCycle } from '../../canvas/animation/interface';
 
 // 保留原始数据的字段
 const FIELD_ORIGIN = 'origin';
@@ -29,6 +30,9 @@ class Geometry<T extends GeometryProps = GeometryProps> extends Component<T> {
 
   attrController: AttrController;
 
+  // 动画配置
+  animation: AnimationCycle;
+
   getDefaultCfg() {
     return {};
   }

diff --git a/packages/f2/src/components/geometry/interface.ts b/packages/f2/src/components/geometry/interface.ts
@@ -1,5 +1,6 @@
 import Chart from '../../chart';
 import Coord from '../../coord';
+import { AnimationCycle } from '../../canvas/animation/interface';
 
 export interface AttrRange {
   shape?: any[];
@@ -31,5 +32,6 @@ export interface GeometryProps {
   coord?: Coord;
   startOnZero?: boolean;
   style?: Style;
-  [k: string]: any; // TODO
+  animation?: AnimationCycle;
+  [k: string]: any;  // TODO
 }
diff --git a/packages/f2/src/components/guide/views/Text.tsx b/packages/f2/src/components/guide/views/Text.tsx
@@ -12,7 +12,7 @@ type TextGuideProps = {
 
 export default (props: TextGuideProps) => {
   const { theme = {} } = props;
-  const { points, style, offsetX, offsetY, content } = deepMix({ ...theme.text }, props);
+  const { points, style, offsetX, offsetY, content, animation } = deepMix({ ...theme.text }, props);
   const { x, y } = points[0] || {};
   const posX = x + (offsetX || 0);
   const posY = y + (offsetY || 0);
@@ -25,13 +25,13 @@ export default (props: TextGuideProps) => {
         y: posY,
         ...style,
       }}
-      animation={{
+      animation={deepMix({
         update: {
           easing: 'linear',
           duration: 450,
           property: ['x', 'y'],
         },
-      }}
+      }, animation)}
     />
   );
 };
diff --git a/packages/f2/src/components/interval/view/rect.tsx b/packages/f2/src/components/interval/view/rect.tsx
@@ -1,7 +1,8 @@
+import { deepMix } from '@antv/util';
 import { jsx } from '../../../jsx';
 
-export default (props) => {
-  const { records } = props;
+export default props => {
+  const { records, animation } = props;
   return (
     <group>
       {records.map((record) => {
@@ -20,7 +21,7 @@ export default (props) => {
                     height: yMax - yMin,
                     fill: color,
                   }}
-                  animation={{
+                  animation={deepMix({
                     appear: {
                       easing: 'linear',
                       duration: 450,
@@ -35,7 +36,7 @@ export default (props) => {
                       duration: 450,
                       property: ['x', 'y', 'width', 'height'],
                     },
-                  }}
+                  }, animation)}
                 />
               );
             })}

diff --git a/packages/f2/src/components/interval/withInterval.tsx b/packages/f2/src/components/interval/withInterval.tsx
@@ -85,13 +85,13 @@ export default (Views) => {
 
     render() {
       const { props } = this;
-      const { coord, shape = 'rect', style } = props;
+      const { coord, shape = 'rect', style, animation } = props;
       const View = Views[shape];
 
       if (!View) return null;
 
       const records = this.mapping();
-      return <View coord={coord} records={records} shape={shape} style={style} />;
+      return <View coord={coord} records={records} shape={shape} style={style} animation={animation} />;
     }
   };
 };
diff --git a/packages/f2/src/components/line/lineView.tsx b/packages/f2/src/components/line/lineView.tsx
@@ -1,4 +1,4 @@
-import { isArray } from '@antv/util';
+import { deepMix, isArray } from '@antv/util';
 import { jsx } from '../../jsx';
 import { LineViewProps } from './types';
 
@@ -89,7 +89,6 @@ export default (props: LineViewProps) => {
         width: width,
       },
     },
-    ...animation,
   };
   return (
     <group>
@@ -109,14 +108,14 @@ export default (props: LineViewProps) => {
                     stroke: color,
                     lineWidth: size,
                   }}
-                  animation={{
+                  animation={deepMix({
                     update: {
                       easing: 'linear',
                       duration: 450,
                       property: ['points'],
                     },
                     appear,
-                  }}
+                  }, animation)}
                 />
               );
             })}

diff --git a/packages/f2/test/timeline/line-race.test.tsx b/packages/f2/test/timeline/line-race.test.tsx
@@ -60,7 +60,9 @@ describe('Chart', () => {
             y="income"
             color="country"
             animation={{
-              duration: 5000,
+              appear: {
+                duration: 5000,
+              }
             }}
             endView={EndView}
           />

diff --git a/packages/f2/test/timeline/race-country.test.tsx b/packages/f2/test/timeline/race-country.test.tsx
@@ -50,7 +50,14 @@ describe('Chart', () => {
                 <Year year={year} />
                 <Axis field="country" />
                 <Axis field="income" />
-                <Interval x="country" y="income" color="country" />
+                <Interval x="country" y="income" color="country" animation={{
+                  appear: {
+                    duration: 100,
+                  },
+                  update: {
+                    duration: 1000,
+                  }
+                }} />
                 {data[year].map((record) => {
                   return (
                     <TextGuide
@@ -63,6 +70,14 @@ describe('Chart', () => {
                         fontSize: '40px',
                         textBaseline: 'middle',
                       }}
+                      animation={{
+                        appear: {
+                          duration: 100,
+                        },
+                        update: {
+                          duration: 1000,
+                        }
+                      }}
                     />
                   );
                 })}