diff --git a/docs/api/plot-api.en.md b/docs/api/plot-api.en.md index 9be536cd80..1dbae7e37c 100644 --- a/docs/api/plot-api.en.md +++ b/docs/api/plot-api.en.md @@ -77,7 +77,7 @@ Destroy the entire canvas completely, recycle all resources, and keep only the D plot.on(event: string, callback: Function); ``` -Keep listening to a plot event and trigger a callback function. The event mechanism is transimitted transparently through G2 events. See [G2 event mechanism](https://g2.antv.vision/zh/docs/manual/event) for all event lists and callback function parameters. +Keep listening to a plot event and trigger a callback function. The event mechanism is transimitted transparently through G2 events. See [G2 event mechanism](https://g2.antv.vision/zh/docs/api/general/event) for all event lists and callback function parameters. ### 8. once diff --git a/docs/api/plot-api.zh.md b/docs/api/plot-api.zh.md index af8f45276e..176f0bf98e 100644 --- a/docs/api/plot-api.zh.md +++ b/docs/api/plot-api.zh.md @@ -77,7 +77,7 @@ plot.destroy(); plot.on(event: string, callback: Function); ``` -多次监听某一个图表事件,并触发一个回调函数。事件机制是直接透传 G2 的事件能力,具体所有事件列表以及回调函数参数可以见 [G2 事件机制](https://g2.antv.vision/zh/docs/manual/event)。 +多次监听某一个图表事件,并触发一个回调函数。事件机制是直接透传 G2 的事件能力,具体所有事件列表以及回调函数参数可以见 [G2 事件机制](https://g2.antv.vision/zh/docs/api/general/event)。 ### 8. once diff --git a/docs/common/animate-option.en.md b/docs/common/animate-option.en.md new file mode 100644 index 0000000000..b6a8303809 --- /dev/null +++ b/docs/common/animate-option.en.md @@ -0,0 +1,35 @@ +
+ +_ComponentAnimateOption_ 为组件各个动画类型配置。其中 `easing` 传入动画函数名称,内置默认动画函数如下表,同时也可以通过 `registerAnimation` 自定义动画函数。 + +```ts +interface ComponentAnimateOption { + appear?: ComponentAnimateCfg; // 图表第一次加载时的入场动画 + enter?: ComponentAnimateCfg; // 图表绘制完成,发生更新后,产生的新图形的进场动画 + update?: ComponentAnimateCfg; // 图表绘制完成,数据发生变更后,有状态变更的图形的更新动画 + leave?: ComponentAnimateCfg; // 图表绘制完成,数据发生变更后,被销毁图形的销毁动画 +} + +interface ComponentAnimateCfg { + duration?: number; // 动画执行时间 + easing?: string; // 动画缓动函数 + delay?: number; // 动画延迟时间 +} +``` + +| animation | 效果 | 说明 | +| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | +| 'fade-in' | ![fade-in.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*LTRRRL8JwfQAAAAAAAAAAABkARQnAQ) | 渐现动画。 | +| 'fade-out' | ![fade-out.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*s4Y4S5JJ6WEAAAAAAAAAAABkARQnAQ) | 渐隐动画。 | +| 'grow-in-x' | ![grow-in-x.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*vhRVSLxDqU8AAAAAAAAAAABkARQnAQ) | 容器沿着 x 方向放大的矩阵动画,多用于 G.Group 容器类进行动画。 | +| 'grow-in-y' | ![grow-in-y.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*L6mkQa3aG64AAAAAAAAAAABkARQnAQ) | 容器沿着 y 方向放大的矩阵动画,多用于 G.Group 容器类进行动画。 | +| 'grow-in-xy' | ![grow-in-xy.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*LfPrQouGwYIAAAAAAAAAAABkARQnAQ) | 容器沿着 x,y 方向放大的矩阵动画,多用于 G.Group 容器类进行动画。 | +| 'scale-in-x' | ![scale-in-x.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*oiaGTLx-dNcAAAAAAAAAAABkARQnAQ) | 单个图形沿着 x 方向的生长动画。 | +| 'scale-in-y' | ![scale-in-y.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*T6mLTY3o9OoAAAAAAAAAAABkARQnAQ) | 单个图形沿着 y 方向的生长动画。 | +| 'wave-in' | ![wave-in-p.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*W5CdQIWw-M4AAAAAAAAAAABkARQnAQ)![wave-in-r.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*z9jjQY-lHcwAAAAAAAAAAABkARQnAQ) | 划入入场动画效果,不同坐标系下效果不同。 | +| 'zoom-in' | ![zoom-in.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*wc4dQp4E6vkAAAAAAAAAAABkARQnAQ) | 沿着图形中心点的放大动画。 | +| 'zoom-out' | ![zoom-out.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*PZ2gTrkV29YAAAAAAAAAAABkARQnAQ) | 沿着图形中心点的缩小动画。 | +| 'path-in' | ![path-in.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*gxZ1RIIMtdIAAAAAAAAAAABkARQnAQ) | path 路径入场动画。 | +| 'position-update' | | 图形位置移动动画。 | + +
diff --git a/docs/common/animate-option.zh.md b/docs/common/animate-option.zh.md new file mode 100644 index 0000000000..b6a8303809 --- /dev/null +++ b/docs/common/animate-option.zh.md @@ -0,0 +1,35 @@ +
+ +_ComponentAnimateOption_ 为组件各个动画类型配置。其中 `easing` 传入动画函数名称,内置默认动画函数如下表,同时也可以通过 `registerAnimation` 自定义动画函数。 + +```ts +interface ComponentAnimateOption { + appear?: ComponentAnimateCfg; // 图表第一次加载时的入场动画 + enter?: ComponentAnimateCfg; // 图表绘制完成,发生更新后,产生的新图形的进场动画 + update?: ComponentAnimateCfg; // 图表绘制完成,数据发生变更后,有状态变更的图形的更新动画 + leave?: ComponentAnimateCfg; // 图表绘制完成,数据发生变更后,被销毁图形的销毁动画 +} + +interface ComponentAnimateCfg { + duration?: number; // 动画执行时间 + easing?: string; // 动画缓动函数 + delay?: number; // 动画延迟时间 +} +``` + +| animation | 效果 | 说明 | +| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | +| 'fade-in' | ![fade-in.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*LTRRRL8JwfQAAAAAAAAAAABkARQnAQ) | 渐现动画。 | +| 'fade-out' | ![fade-out.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*s4Y4S5JJ6WEAAAAAAAAAAABkARQnAQ) | 渐隐动画。 | +| 'grow-in-x' | ![grow-in-x.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*vhRVSLxDqU8AAAAAAAAAAABkARQnAQ) | 容器沿着 x 方向放大的矩阵动画,多用于 G.Group 容器类进行动画。 | +| 'grow-in-y' | ![grow-in-y.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*L6mkQa3aG64AAAAAAAAAAABkARQnAQ) | 容器沿着 y 方向放大的矩阵动画,多用于 G.Group 容器类进行动画。 | +| 'grow-in-xy' | ![grow-in-xy.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*LfPrQouGwYIAAAAAAAAAAABkARQnAQ) | 容器沿着 x,y 方向放大的矩阵动画,多用于 G.Group 容器类进行动画。 | +| 'scale-in-x' | ![scale-in-x.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*oiaGTLx-dNcAAAAAAAAAAABkARQnAQ) | 单个图形沿着 x 方向的生长动画。 | +| 'scale-in-y' | ![scale-in-y.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*T6mLTY3o9OoAAAAAAAAAAABkARQnAQ) | 单个图形沿着 y 方向的生长动画。 | +| 'wave-in' | ![wave-in-p.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*W5CdQIWw-M4AAAAAAAAAAABkARQnAQ)![wave-in-r.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*z9jjQY-lHcwAAAAAAAAAAABkARQnAQ) | 划入入场动画效果,不同坐标系下效果不同。 | +| 'zoom-in' | ![zoom-in.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*wc4dQp4E6vkAAAAAAAAAAABkARQnAQ) | 沿着图形中心点的放大动画。 | +| 'zoom-out' | ![zoom-out.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*PZ2gTrkV29YAAAAAAAAAAABkARQnAQ) | 沿着图形中心点的缩小动画。 | +| 'path-in' | ![path-in.gif](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*gxZ1RIIMtdIAAAAAAAAAAABkARQnAQ) | path 路径入场动画。 | +| 'position-update' | | 图形位置移动动画。 | + +
diff --git a/docs/common/interactions.zh.md b/docs/common/interactions.zh.md index 2b89df3608..9382032f80 100644 --- a/docs/common/interactions.zh.md +++ b/docs/common/interactions.zh.md @@ -27,6 +27,6 @@ plot.chart.removeInteraction('legend-filter'); #### 更多 -更多关于交互的使用说明,见 [G2 文档](https://g2.antv.vision/zh/docs/api/general/interaction#element-active) +更多关于交互的使用说明,见 [G2 文档](https://g2.antv.vision/zh/docs/api/general/interaction) 后续会补充内置支持的交互列表以及与具体 plot 绑定的交互,敬请期待。 \ No newline at end of file diff --git a/docs/common/legend-cfg.zh.md b/docs/common/legend-cfg.zh.md index 11131a0c67..85e4808fda 100644 --- a/docs/common/legend-cfg.zh.md +++ b/docs/common/legend-cfg.zh.md @@ -103,7 +103,9 @@ **optional** _ComponentAnimateOption_ -动画参数配置,当且仅当 animate 属性为 true,即动画开启时生效。动画配置详情点击 [ComponentAnimateOption](animate-option) 查看。 +动画参数配置,当且仅当 animate 属性为 true,即动画开启时生效。动画配置详情如下: + +`markdown:docs/common/animate-option.zh.md` ##### label