feat(mark): group animation options (#4695)

antvis · Mar 1, 2023 · 9c437c7 · 9c437c7
1 parent eb22f92
commit 9c437c7
Show file tree

Hide file tree

Showing 60 changed files with 147 additions and 140 deletions.
diff --git a/__tests__/plots/animation/alphabet-interval-non-animate-enter.ts b/__tests__/plots/animation/alphabet-interval-non-animate-enter.ts
@@ -17,7 +17,7 @@ export function alphabetIntervalNonAnimateEnter(): G2Spec {
       color: 'steelblue',
     },
     animate: {
-      enterType: null,
+      enter: false,
     },
   };
 }

diff --git a/__tests__/plots/animation/alphabet-interval-scale-in-y.ts b/__tests__/plots/animation/alphabet-interval-scale-in-y.ts
@@ -17,7 +17,9 @@ export function alphabetIntervalScaleInY(): G2Spec {
       color: 'steelblue',
     },
     animate: {
-      enterDuration: 1000,
+      enter: {
+        duration: 1000,
+      },
     },
   };
 }

diff --git a/__tests__/plots/animation/deaths-rose-stack-enter.ts b/__tests__/plots/animation/deaths-rose-stack-enter.ts
@@ -24,7 +24,9 @@ export function deathsRoseStackEnter(): G2Spec {
     },
     legend: { color: { layout: { justifyContent: 'flex-start' } } },
     animate: {
-      enterType: 'waveIn',
+      enter: {
+        type: 'waveIn',
+      },
     },
   };
 }

diff --git a/__tests__/plots/animation/doughnut-purchases-line-path-in.ts b/__tests__/plots/animation/doughnut-purchases-line-path-in.ts
@@ -27,8 +27,10 @@ export function doughnutPurchasesLinePathIn(): G2Spec {
           gradientColor: 'start',
         },
         animate: {
-          enterType: 'pathIn',
-          enterDuration: 3000,
+          enter: {
+            type: 'pathIn',
+            duration: 3000,
+          },
         },
       },
       {

diff --git a/__tests__/plots/animation/fruits-interval-stack-enter-color-x.ts b/__tests__/plots/animation/fruits-interval-stack-enter-color-x.ts
@@ -14,7 +14,9 @@ export function fruitsIntervalStackEnterColorX(): G2Spec {
       enterDuration: 1000,
     },
     animate: {
-      enterDuration: 600,
+      enter: {
+        duration: 600,
+      },
     },
   };
 }

diff --git a/__tests__/plots/animation/fruits-interval-stack-enter-color.ts b/__tests__/plots/animation/fruits-interval-stack-enter-color.ts
@@ -14,7 +14,9 @@ export function fruitsIntervalStackEnterColor(): G2Spec {
       enterDuration: 1000,
     },
     animate: {
-      enterDuration: 900,
+      enter: {
+        duration: 900,
+      },
     },
   };
 }

diff --git a/__tests__/plots/animation/fruits-interval-stack-enter-defaults.ts b/__tests__/plots/animation/fruits-interval-stack-enter-defaults.ts
@@ -14,7 +14,9 @@ export function fruitsIntervalStackEnterDefaults(): G2Spec {
       enterDuration: 1000,
     },
     animate: {
-      enterDuration: 1000,
+      enter: {
+        duration: 1000,
+      },
     },
   };
 }

diff --git a/__tests__/plots/animation/fruits-interval-stack-enter-x-color.ts b/__tests__/plots/animation/fruits-interval-stack-enter-x-color.ts
@@ -14,7 +14,9 @@ export function fruitsIntervalStackEnterXColor(): G2Spec {
       enterDuration: 1000,
     },
     animate: {
-      enterDuration: 900,
+      enter: {
+        duration: 900,
+      },
     },
   };
 }

diff --git a/__tests__/plots/animation/os-area-stack-enter.ts b/__tests__/plots/animation/os-area-stack-enter.ts
@@ -23,7 +23,9 @@ export function osAreaStackEnter(): G2Spec {
       shape: 'smooth',
     },
     animate: {
-      enterType: 'growInX',
+      enter: {
+        type: 'growInX',
+      },
     },
   };
 }

diff --git a/__tests__/plots/animation/polio-point-stack-enter.ts b/__tests__/plots/animation/polio-point-stack-enter.ts
@@ -55,7 +55,9 @@ export function polioPointStackEnter(): G2Spec {
           fill: '#666',
         },
         animate: {
-          enterDelay: 5000,
+          enter: {
+            delay: 5000,
+          },
         },
       },
       {
@@ -70,7 +72,9 @@ export function polioPointStackEnter(): G2Spec {
           dy: 30,
         },
         animate: {
-          enterDelay: 5400,
+          enter: {
+            delay: 5400,
+          },
         },
       },
     ],

diff --git a/__tests__/plots/animation/population-interval-rose-keyframe.ts b/__tests__/plots/animation/population-interval-rose-keyframe.ts
@@ -18,7 +18,7 @@ export async function populationIntervalRoseKeyframe(): Promise<G2Spec> {
           startAngle: -Math.PI / 2,
         },
         transform: [{ type: 'groupX', y: 'sum' }],
-        animate: { enterType: 'waveIn' },
+        animate: { enter: { type: 'waveIn' } },
         scale: { y: { type: 'sqrt' } },
         encode: { x: 'year', y: 'people' },
         axis: {
@@ -38,7 +38,7 @@ export async function populationIntervalRoseKeyframe(): Promise<G2Spec> {
         },
         coordinate: { type: 'polar', outerRadius: 0.85, startAngle: 0 },
         transform: [{ type: 'groupX', y: 'sum' }],
-        animate: { enterType: 'waveIn' },
+        animate: { enter: { type: 'waveIn' } },
         scale: { y: { type: 'sqrt' } },
         encode: { x: 'year', y: 'people' },
         axis: {

diff --git a/__tests__/plots/animation/population2015-interval-wave-in-radius.ts b/__tests__/plots/animation/population2015-interval-wave-in-radius.ts
@@ -30,7 +30,7 @@ export function population2015IntervalWaveInRadius(): G2Spec {
           radius: 10,
         },
         animate: {
-          enterType: 'waveIn',
+          enter: { type: 'waveIn' },
         },
       },
     ],

diff --git a/__tests__/plots/animation/profit-interval-range.ts b/__tests__/plots/animation/profit-interval-range.ts
@@ -52,7 +52,7 @@ export async function profitIntervalRange(): Promise<G2Spec> {
             data: [{ y: [0, 2000000] }],
             encode: { y: 'y' },
             animate: {
-              enterType: 'fadeIn',
+              enter: { type: 'fadeIn' },
             },
           },
         ],

diff --git a/__tests__/plots/animation/sold-interval-pie-keyframe.ts b/__tests__/plots/animation/sold-interval-pie-keyframe.ts
@@ -23,7 +23,7 @@ export function soldIntervalPieKeyframe(): G2Spec {
           },
         ],
         animate: {
-          enterType: 'waveIn',
+          enter: { type: 'waveIn' },
         },
       },
       {
@@ -42,7 +42,7 @@ export function soldIntervalPieKeyframe(): G2Spec {
           },
         ],
         animate: {
-          enterType: 'waveIn',
+          enter: { type: 'waveIn' },
         },
       },
     ],

diff --git a/__tests__/plots/animation/stocks-keyframe.ts b/__tests__/plots/animation/stocks-keyframe.ts
@@ -21,7 +21,7 @@ const facetLine = (data) => ({
       frame: false,
       scale: { y: { zero: true, tickCount: 3 } },
       animate: {
-        enterType: 'pathIn',
+        enter: { type: 'pathIn' },
       },
     },
   ],
@@ -59,7 +59,7 @@ const facetArea = (data) => ({
       },
       scale: { y: { facet: false, zero: true, tickCount: 3 } },
       animate: {
-        exitType: 'fadeOut',
+        exit: { type: 'fadeOut' },
       },
     },
   ],

diff --git a/__tests__/plots/static/population2015-interval-pie.ts b/__tests__/plots/static/population2015-interval-pie.ts
@@ -40,8 +40,10 @@ export function population2015IntervalPie(): G2Spec {
       },
     ],
     animate: {
-      enterType: 'waveIn',
-      enterDuration: 1000,
+      enter: {
+        type: 'waveIn',
+        duration: 1000,
+      },
     },
   };
 }

diff --git a/__tests__/unit/api/mark.spec.ts b/__tests__/unit/api/mark.spec.ts
@@ -33,7 +33,7 @@ function setOptions(node) {
     .scale('x', { domain: [0, 1] })
     .transform({ type: 'stackY' })
     .style('stroke', 'black')
-    .animate('enterType', 'scaleInX')
+    .animate('enter', { type: 'scaleInX' })
     .attr('facet', true)
     .attr('key', 'mark')
     .attr('class', 'mark')
@@ -77,7 +77,7 @@ function getOptions() {
     scale: { x: { domain: [0, 1] } },
     transform: [{ type: 'stackY' }],
     style: { stroke: 'black' },
-    animate: { enterType: 'scaleInX' },
+    animate: { enter: { type: 'scaleInX' } },
     axis: { x: { tickCount: 10 } },
     legend: { y: { title: 'hello' } },
     slider: { x: {} },

diff --git a/site/docs/api/animation/fadeIn.zh.md b/site/docs/api/animation/fadeIn.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('enterType', 'fadeIn');
+  .animate('enter', { type: 'fadeIn' });
 ```
diff --git a/site/docs/api/animation/fadeOut.zh.md b/site/docs/api/animation/fadeOut.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('exitType', 'fadeOut');
+  .animate('exit', { type: 'fadeOut' });
 ```
diff --git a/site/docs/api/animation/growInX.zh.md b/site/docs/api/animation/growInX.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('enterType', 'growInX');
+  .animate('enter', { type: 'growInX' });
 ```
diff --git a/site/docs/api/animation/growInY.zh.md b/site/docs/api/animation/growInY.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('enterType', 'growInY');
+  .animate('enter', { type: 'growInY' });
 ```
diff --git a/site/docs/api/animation/morphing.zh.md b/site/docs/api/animation/morphing.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .area()
   /* ... */
-  .animate('enterType', 'morphing');
+  .animate('enter', { type: 'morphing' });
 ```
diff --git a/site/docs/api/animation/pathIn.zh.md b/site/docs/api/animation/pathIn.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .line()
   /* ... */
-  .animate('enterType', 'pathIn');
+  .animate('enter', { type: 'pathIn' });
 ```
diff --git a/site/docs/api/animation/scaleInX.zh.md b/site/docs/api/animation/scaleInX.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('enterType', 'scaleInX');
+  .animate('enter', { type: 'scaleInX' });
 ```
diff --git a/site/docs/api/animation/scaleInY.zh.md b/site/docs/api/animation/scaleInY.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('enterType', 'scaleInY');
+  .animate('enter', { type: 'scaleInY' });
 ```
diff --git a/site/docs/api/animation/scaleOutX.zh.md b/site/docs/api/animation/scaleOutX.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('exitType', 'scaleOutX');
+  .animate('exit', { type: 'scaleOutX' });
 ```
diff --git a/site/docs/api/animation/scaleOutY.zh.md b/site/docs/api/animation/scaleOutY.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('exitType', 'scaleOutY');
+  .animate('exit', { type: 'scaleOutY' });
 ```
diff --git a/site/docs/api/animation/waveIn.zh.md b/site/docs/api/animation/waveIn.zh.md
@@ -14,5 +14,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('enterType', 'waveIn');
+  .animate('enter', { type: 'waveIn' });
 ```
diff --git a/site/docs/api/animation/zoomIn.zh.md b/site/docs/api/animation/zoomIn.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('enterType', 'zoomIn');
+  .animate('enter', { type: 'zoomIn' });
 ```
diff --git a/site/docs/api/animation/zoomOut.zh.md b/site/docs/api/animation/zoomOut.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('exitType', 'zoomOut');
+  .animate('exit', { type: 'zoomOut' });
 ```
diff --git a/site/docs/manual/animation.zh.md b/site/docs/manual/animation.zh.md
@@ -37,8 +37,10 @@ chart
   .encode('x', 'genre')
   .encode('y', 'sold')
   .encode('color', 'genre')
-  .animate('enterType', 'scaleInY') // 指定入场动画的类型
-  .animate('enterDuration', 1000); // 指定入场动画的执行时间
+  .animate('enter', {
+    type: 'scaleInY', // 指定入场动画的类型
+    duration: 1000, // 指定入场动画的执行时间
+  });
 ```
 
 ## 动画编码

diff --git a/site/docs/manual/more/use-in-framework.zh.md b/site/docs/manual/more/use-in-framework.zh.md
@@ -32,7 +32,7 @@ function renderBarChart(container) {
     .encode('x', 'genre') // 编码 x 通道
     .encode('y', 'sold') // 编码 y 通道
     .encode('key', 'genre') // 指定 key
-    .animate('updateDuration', 300); // 指定更新动画的时间
+    .animate('update', { duration: 300 }); // 指定更新动画的时间
 
   // 渲染可视化
   chart.render();

diff --git a/site/examples/animation/general/demo/fade.ts b/site/examples/animation/general/demo/fade.ts
@@ -17,9 +17,7 @@ chart
   .encode('x', 'genre')
   .encode('y', 'sold')
   .encode('color', 'genre')
-  .animate('enterType', 'fadeIn')
-  .animate('enterDuration', 1000)
-  .animate('exitType', 'fadeOut')
-  .animate('exitDuration', 2000);
+  .animate('enter', { type: 'fadeIn', duration: 1000 })
+  .animate('exit', { type: 'fadeOut', duration: 2000 });
 
 chart.render();
diff --git a/site/examples/animation/general/demo/path-in.ts b/site/examples/animation/general/demo/path-in.ts
@@ -17,7 +17,6 @@ chart
   })
   .encode('x', 'date')
   .encode('y', 'close')
-  .animate('enterType', 'pathIn')
-  .animate('enterDuration', 1000);
+  .animate('enter', { type: 'pathIn', duration: 1000 });
 
 chart.render();
diff --git a/site/examples/animation/general/demo/scale-x.ts b/site/examples/animation/general/demo/scale-x.ts
@@ -17,9 +17,7 @@ chart
   .encode('x', 'genre')
   .encode('y', 'sold')
   .encode('color', 'genre')
-  .animate('enterType', 'scaleInX')
-  .animate('enterDuration', 1000)
-  .animate('exitType', 'scaleOutX')
-  .animate('exitDuration', 2000);
+  .animate('enter', { type: 'scaleInX', duration: 1000 })
+  .animate('exit', { type: 'scaleOutX', duration: 2000 });
 
 chart.render();
diff --git a/site/examples/animation/general/demo/scale-y.ts b/site/examples/animation/general/demo/scale-y.ts
@@ -17,9 +17,7 @@ chart
   .encode('x', 'genre')
   .encode('y', 'sold')
   .encode('color', 'genre')
-  .animate('enterType', 'scaleInY')
-  .animate('enterDuration', 1000)
-  .animate('exitType', 'scaleOutY')
-  .animate('exitDuration', 2000);
+  .animate('enter', { type: 'scaleInY', duration: 1000 })
+  .animate('exit', { type: 'scaleOutY', duration: 2000 });
 
 chart.render();
diff --git a/site/examples/animation/general/demo/wave-in.ts b/site/examples/animation/general/demo/wave-in.ts
@@ -19,7 +19,6 @@ chart
   .transform({ type: 'stackY' })
   .encode('color', 'genre')
   .encode('y', 'sold')
-  .animate('enterType', 'waveIn')
-  .animate('enterDuration', 1000);
+  .animate('enter', { type: 'waveIn', duration: 1000 });
 
 chart.render();
diff --git a/site/examples/animation/general/demo/zoom-in.ts b/site/examples/animation/general/demo/zoom-in.ts
@@ -21,7 +21,6 @@ chart
   .scale('y', { domain: [65, 90] })
   .style('fillOpacity', 0.3)
   .style('lineWidth', 1)
-  .animate('enterType', 'zoomIn')
-  .animate('enterDuration', 1000);
+  .animate('enter', { type: 'zoomIn', duration: 1000 });
 
 chart.render();