From 94be9e543c1ad599246c442753c7e3162a4a47d1 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Mon, 3 Nov 2025 15:09:10 +0800 Subject: [PATCH] docs: fix registerMorph error in example --- .../10.2-global-morphing-animation.md | 182 ++++---------- .../10.2-global-morphing-animation.md | 230 ++++++------------ .../10.2-global-morphing-animation.md | 230 ++++++------------ .../examples/en/storytelling/bar-to-pie.md | 4 +- .../en/storytelling/bar-to-scatter.md | 4 +- .../examples/zh/storytelling/bar-to-pie.md | 4 +- .../zh/storytelling/bar-to-scatter.md | 4 +- .../Animation/Animation_Types.md | 8 +- .../Animation/Animation_Types.md | 8 +- 9 files changed, 217 insertions(+), 457 deletions(-) diff --git a/docs/assets/contributing/en/sourcecode/10.2-global-morphing-animation.md b/docs/assets/contributing/en/sourcecode/10.2-global-morphing-animation.md index faf75a122b..516cc6b292 100644 --- a/docs/assets/contributing/en/sourcecode/10.2-global-morphing-animation.md +++ b/docs/assets/contributing/en/sourcecode/10.2-global-morphing-animation.md @@ -1,40 +1,40 @@ --- -title: 10.2 Global Morphing Animation +title: 10.2 Global Morphing Animation key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM --- + ## 10.2 Global Morphing Animation -Score: 8 +Score: 8 -1. Global Animation: +1. Global Animation: -1. Code Entry: `packages/vchart/src/animation/` +1. Code Entry: `packages/vchart/src/animation/` -1. Key Points: +1. Key Points: -1. Implementation of Global Animation +1. Implementation of Global Animation -1. Other Reference Documents: +1. Other Reference Documents: -https://www.visactor.io/vchart/guide/tutorial_docs/Animation/Animation_Types +https://www.visactor.io/vchart/guide/tutorial_docs/Animation/Animation_Types -https://www.visactor.io/vrender/guide/asd/Basic_Tutorial/Animate +https://www.visactor.io/vrender/guide/asd/Basic_Tutorial/Animate -https://visactor.io/vgrammar/guide/guides/animation +https://visactor.io/vgrammar/guide/guides/animation -[Magic Frame (Part 1): The Principle of Animation Implementation in Front-end Chart Libraries - A vivid visualization work often involves animation. Whether it's various charts or narrative works, organizing the week - Juejin](https://juejin.cn/post/7275270809777520651) +[Magic Frame (Part 1): The Principle of Animation Implementation in Front-end Chart Libraries - A vivid visualization work often involves animation. Whether it's various charts or narrative works, organizing the week - Juejin](https://juejin.cn/post/7275270809777520651) -In 10.1, we initially learned about the design of the animation system in VChart and the creation examples of charts. This section continues to introduce the transition design when switching between different chart configurations in VChart. +In 10.1, we initially learned about the design of the animation system in VChart and the creation examples of charts. This section continues to introduce the transition design when switching between different chart configurations in VChart. ### Definition -VChart provides morphing animations for switching between related series, which we call **global morphing animations**. +VChart provides morphing animations for switching between related series, which we call **global morphing animations**. -When updating the chart configuration through `updateSpec`, VChart will detect whether the two related series of the old and new charts meet the conditions for morphing animation, thereby executing dynamic transitions between **one-to-one, one-to-many, or many-to-one graphics**. Global morphing animations allow users to have a better visual experience when the type of chart being displayed changes, avoiding the feeling of instantaneous change. After all, visual comfort is an important factor we should focus on in the process of displaying and analyzing data. +When updating the chart configuration through `updateSpec`, VChart will detect whether the two related series of the old and new charts meet the conditions for morphing animation, thereby executing dynamic transitions between **one-to-one, one-to-many, or many-to-one graphics**. Global morphing animations allow users to have a better visual experience when the type of chart being displayed changes, avoiding the feeling of instantaneous change. After all, visual comfort is an important factor we should focus on in the process of displaying and analyzing data. -> https://visactor.com/vchart/api/API/vchart Reference API Documentation -> +> https://visactor.com/vchart/api/API/vchart Reference API Documentation ```Typescript updateSpec @@ -46,7 +46,7 @@ updateSpec * @param morphConfig morph 动画配置 * @returns */ -updateSpec: (spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig) => Promise; +updateSpec: (spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig) => Promise; ``` @@ -62,8 +62,6 @@ One-to-one animation refers to the transition animation between two different gr - - ```xml /** * 自1.12.0后，全局形变动画需要手动注册才能生效 @@ -71,9 +69,11 @@ One-to-one animation refers to the transition animation between two different gr * import { registerMorph } from '@visactor/vchart'; * * registerMorph(); + * + * 自2.0.0开始，全局形变动画默认开启，不再需要手动注册 */ -VCHART_MODULE.registerMorph(); +VCHART_MODULE.registerMorph && VCHART_MODULE.registerMorph(); const pieSpec = { type: 'pie', @@ -110,7 +110,7 @@ setInterval(() => { vchart.updateSpec(specs[count % 2]); count++; }, 2000); - + ``` @@ -120,7 +120,6 @@ One-to-many animation refers to the transition of a single graphic element into - ```javascript /** * 自1.12.0后，全局形变动画需要手动注册才能生效 @@ -128,9 +127,11 @@ One-to-many animation refers to the transition of a single graphic element into * import { registerMorph } from '@visactor/vchart'; * * registerMorph(); + * + * 自2.0.0开始，全局形变动画默认开启，不再需要手动注册 */ -VCHART_MODULE.registerMorph(); +VCHART_MODULE.registerMorph && VCHART_MODULE.registerMorph(); function calculateAverage(data, dim) { let total = 0; @@ -221,9 +222,8 @@ setInterval(() => { vchart.updateSpec(specs[count % 2]); count++; }, 3000); - - ``` + #### Many-to-One Animation Many-to-one animation refers to multiple graphic elements transitioning into one element. For example, in the example above, we can have multiple points of a scatter series merge into one large column. @@ -232,54 +232,33 @@ Many-to-one animation refers to multiple graphic elements transitioning into one The transition between different charts can be explained by updating the configuration, and with morphing animation enabled, the transition effects of series elements are automatically recognized. Below is an explanation of the default effect settings. - - - - ### Draft Interpretation of Global Animation Implementation Global animations refer to those animation effects that apply at the entire chart level. They can be applied to the overall entrance animation when the chart loads, the unified change animation when data updates, and the overall exit animation before the chart is destroyed. In VChart, the design and implementation of global animations rely on several core components and mechanisms, including the `Factory` class, `AnimateManager` class, `IAnimationSpec` interface, etc. - - #### 1. Animation Registration and Management - - **Factory Class** - - The `Factory` class is a key player in the animation system, responsible for managing and registering various types of animations. Through the static method `registerAnimation`, we can associate specific animation logic with a name for subsequent use. - - ```xml class Factory { static registerAnimation(key: string, animation: (params?: any, preset?: any) => MarkAnimationSpec) { Factory._animations[key] = animation; } -} +} ``` - When you need to add animation to a chart element, you can use `Factory.getAnimationInKey` to obtain a registered animation and apply it to the corresponding graphic or graphical element. - - #### 2. Animation Configuration Structure - - **IAnimationSpec Interface** - - The `IAnimationSpec` interface defines the basic structure of animation configuration, covering various states from entry (`animationAppear`) to exit (`animationDisappear`). Each state can accept a boolean value (enable/disable), a preset configuration object, or a custom configuration object as a parameter. - - ```xml interface IAnimationSpec { animationAppear?: boolean | IStateAnimateSpec | IMarkAnimateSpec; @@ -289,27 +268,18 @@ interface IAnimationSpec { animationDisappear?: boolean | ICommonStateAnimateSpec | IMarkAnimateSpec; animationState?: boolean | IStateAnimationConfig; animationNormal?: IMarkAnimateSpec; -} +} ``` - These configuration options allow developers to flexibly control the behavior of animations in different states, such as setting duration, easing functions, animation types, etc. - - #### 3. Animation State Management - - **AnimateManager Class** - - `AnimateManager` inherits from `StateManager` and implements the `IAnimate` interface, used to manage the state of animations. It provides methods to update animation states and trigger corresponding animation logic based on the current state. - - ```xml class AnimateManager extends StateManager implements IAnimate { updateAnimateState(state: AnimationStateEnum, noRender?: boolean) { @@ -321,26 +291,17 @@ class AnimateManager extends StateManager implements IAnimate { // 其他状态下的动画逻辑 } } -} +} ``` - -In addition, `AnimateManager` is also responsible for generating unique identifiers (IDs) and signal names to ensure that each animation instance can be correctly identified and managed. - - +In addition, `AnimateManager` is also responsible for generating unique identifiers (IDs) and signal names to ensure that each animation instance can be correctly identified and managed. #### 4. Animation Configuration Generation +**animationConfig Function** - -**animationConfig Function** - - - -To simplify the merging process between user configurations and default configurations, VChart provides a helper function called `animationConfig`. This function iterates through all possible animation states and constructs the final animation configuration object based on the user-provided configuration or the default configuration. - - +To simplify the merging process between user configurations and default configurations, VChart provides a helper function called `animationConfig`. This function iterates through all possible animation states and constructs the final animation configuration object based on the user-provided configuration or the default configuration. ```xml function animationConfig( @@ -372,27 +333,18 @@ function animationConfig( } return config; -} +} ``` - This function handles the merging of default configurations and user configurations, considering that certain states (such as `normal`) can directly use the user-provided configuration without additional processing. - - #### 5. Specific Implementation of Global Animation - - **Registration of Global Animation** - - Taking line charts or area charts as an example, the `registerVGrammarLineOrAreaAnimation` function demonstrates how to batch register a series of animation methods. These animations cover effects such as point growth, point movement, and clipping, and are applicable to both the X-axis and Y-axis directions. - - ```xml const registerVGrammarLineOrAreaAnimation = () => { View.useRegisters([ @@ -405,18 +357,13 @@ const registerVGrammarLineOrAreaAnimation = () => { registerClipInAnimation, registerClipOutAnimation ]); -}; +}; ``` +**Initialization of Global Animation** -**Initialization of Global Animation** - - - -In the implementation files of specific series (such as bar charts, pie charts, etc.), the `initAnimation` method is usually called during the initialization phase to set up animation configurations. This method combines user-provided configurations with default configurations to generate the final animation configuration and applies it to the corresponding graphic elements or shapes. - - +In the implementation files of specific series (such as bar charts, pie charts, etc.), the `initAnimation` method is usually called during the initialization phase to set up animation configurations. This method combines user-provided configurations with default configurations to generate the final animation configuration and applies it to the corresponding graphic elements or shapes. ```xml initAnimation(): void { @@ -429,52 +376,34 @@ initAnimation(): void { animationParams ) ); -} +} ``` - Here, the `animationConfig` function is used to merge default configurations and user configurations, while `userAnimationConfig` is responsible for extracting the animation configuration information provided by the user. Finally, the generated configuration is applied to specific graphic elements through the `setAnimationConfig` method. - - #### 6. Execution of Animation Tasks - - **IAnimationTask Interface** - - For complex animation sequences, VChart introduces the `IAnimationTask` interface to describe the data structure of animation tasks. Each task includes time offsets, action queues, and successor task lists, forming a chain-like animation execution mechanism. - - ```xml interface IAnimationTask { timeOffset: number; actionList: Action[]; nextTaskList: IAnimationTask[]; -} +} ``` - This design allows multiple animation tasks to be executed sequentially or concurrently, enabling more complex and delicate animation effects. - - #### 7. Example: Creating a Global Entrance Animation - - Suppose we want to add a global fade-in entrance animation to a newly created bar chart. Here are the detailed implementation steps: - - -* **Define Animation Configuration**: First, specify `animationAppear` as `true` in the chart configuration to enable the entrance animation. Additionally, you can further customize the specific behavior of the animation, such as choosing a fade-in effect, setting the duration, and easing function. - - +- **Define Animation Configuration**: First, specify `animationAppear` as `true` in the chart configuration to enable the entrance animation. Additionally, you can further customize the specific behavior of the animation, such as choosing a fade-in effect, setting the duration, and easing function. ```xml const chartSpec = { @@ -490,27 +419,21 @@ const chartSpec = { data: [/* 数据数组 */] } ] -}; +}; ``` - -* **Register Fade-in Animation**: Next, we need to ensure that the fade-in animation has been correctly registered in the system. This step is usually completed at project startup or explicitly called where needed. - - +- **Register Fade-in Animation**: Next, we need to ensure that the fade-in animation has been correctly registered in the system. This step is usually completed at project startup or explicitly called where needed. ```xml import { Factory } from '@visactor/vchart'; import { Appear_FadeIn } from './series/bar/animation'; -Factory.registerAnimation('fadeIn', Appear_FadeIn); +Factory.registerAnimation('fadeIn', Appear_FadeIn); ``` - -* **Initialize the chart instance**: With the above configuration, we can initialize a `VChart` instance and pass the configuration to it. This will trigger the chart rendering process and apply the corresponding animation effects. - - +- **Initialize the chart instance**: With the above configuration, we can initialize a `VChart` instance and pass the configuration to it. This will trigger the chart rendering process and apply the corresponding animation effects. ```xml import { VChart } from '@visactor/vchart'; @@ -523,34 +446,27 @@ const chart = new VChart({ animation: true, // 开启动画 theme: 'light' // 使用浅色主题 } -}); +}); ``` +- **Trigger Animation**: Once the chart is rendered, any changes in data will automatically trigger animations. For example, when the page first loads, all bars will gradually appear with a fade-in effect; when new data is added, new bars will enter in the same way. -* **Trigger Animation**: Once the chart is rendered, any changes in data will automatically trigger animations. For example, when the page first loads, all bars will gradually appear with a fade-in effect; when new data is added, new bars will enter in the same way. - - - -* **Manual Control of Animation**: If you need more precise control over the animation, such as pausing or resuming it, you can use the relevant methods provided by the `VChart` instance. - - +- **Manual Control of Animation**: If you need more precise control over the animation, such as pausing or resuming it, you can use the relevant methods provided by the `VChart` instance. ```xml // 暂停所有正在进行的动画 chart.pauseAnimation(); // 恢复之前暂停的动画 -chart.resumeAnimation(); +chart.resumeAnimation(); ``` - #### Summary - - Through the above steps, we have detailed the implementation principles of global animation in VChart. The animation system of VChart cleverly combines the factory pattern, state manager pattern, and modular animation configuration, providing not only a rich set of built-in animation effects but also supporting highly customizable needs. Developers can flexibly configure and combine different animations according to actual application scenarios to create visual effects that are both beautiful and practical. - # This document was revised and organized by the following personnel - [玄魂](https://github.com/xuanhun) \ No newline at end of file +# This document was revised and organized by the following personnel + +[玄魂](https://github.com/xuanhun) diff --git a/docs/assets/contributing/zh/sourcecode/10.2-global-morphing-animation.md b/docs/assets/contributing/zh/sourcecode/10.2-global-morphing-animation.md index e526dfb9e5..a171509791 100644 --- a/docs/assets/contributing/zh/sourcecode/10.2-global-morphing-animation.md +++ b/docs/assets/contributing/zh/sourcecode/10.2-global-morphing-animation.md @@ -1,40 +1,40 @@ --- -title: 10.2 全局形变动画 +title: 10.2 全局形变动画 key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM --- + ## 10.2 全局形变动画 -分数： 8 +分数： 8 -1. 全局动画： +1. 全局动画： -1. 代码入口：`packages/vchart/src/animation/` +1. 代码入口：`packages/vchart/src/animation/` -1. 解读重点： +1. 解读重点： -1. 全局动画的实现 +1. 全局动画的实现 -1. 其他参考文档： +1. 其他参考文档： -https://www.visactor.io/vchart/guide/tutorial_docs/Animation/Animation_Types +https://www.visactor.io/vchart/guide/tutorial_docs/Animation/Animation_Types -https://www.visactor.io/vrender/guide/asd/Basic_Tutorial/Animate +https://www.visactor.io/vrender/guide/asd/Basic_Tutorial/Animate -https://visactor.io/vgrammar/guide/guides/animation +https://visactor.io/vgrammar/guide/guides/animation -[魔力之帧(上):前端图表库动画实现原理一幅生动的可视化作品往往少不了动画的参与。无论是各色各样的图表还是叙事作品，组织周 - 掘金](https://juejin.cn/post/7275270809777520651) +[魔力之帧(上):前端图表库动画实现原理一幅生动的可视化作品往往少不了动画的参与。无论是各色各样的图表还是叙事作品，组织周 - 掘金](https://juejin.cn/post/7275270809777520651) -在10.1中初步了解了VChart对动画系统的设计和图表的创建示例，这一节继续介绍在使用VChart中，不同图表配置之间切换时的过渡设计。 +在 10.1 中初步了解了 VChart 对动画系统的设计和图表的创建示例，这一节继续介绍在使用 VChart 中，不同图表配置之间切换时的过渡设计。 ### 定义 -VChart 提供了各个系列间相关切换的形变动画，我们称**全局形变动画**。 +VChart 提供了各个系列间相关切换的形变动画，我们称**全局形变动画**。 -在通过 `updateSpec` 来更新图表配置时，VChart 会检测新旧图表的两个相关联的系列，是否符合形变动画的条件，从而执行**一对一、一对多或多对一的图形**之间的动态过渡。 全局形变动画能让用户在展示的图表类型发生变化时有更好的视觉体验，避免看上去是瞬间变化的感觉，毕竟，视觉舒适是我们在展示数据和分析数据的过程中所应当关注的一个重要因素。 +在通过 `updateSpec` 来更新图表配置时，VChart 会检测新旧图表的两个相关联的系列，是否符合形变动画的条件，从而执行**一对一、一对多或多对一的图形**之间的动态过渡。 全局形变动画能让用户在展示的图表类型发生变化时有更好的视觉体验，避免看上去是瞬间变化的感觉，毕竟，视觉舒适是我们在展示数据和分析数据的过程中所应当关注的一个重要因素。 -> https://visactor.com/vchart/api/API/vchart 参考接口文档 -> +> https://visactor.com/vchart/api/API/vchart 参考接口文档 ```Typescript updateSpec @@ -46,7 +46,7 @@ updateSpec * @param morphConfig morph 动画配置 * @returns */ -updateSpec: (spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig) => Promise; +updateSpec: (spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig) => Promise; ``` @@ -54,16 +54,14 @@ updateSpec: (spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig) => P ### 效果示例 -下面通过两个示例配置说明这类过渡动画的效果： +下面通过两个示例配置说明这类过渡动画的效果： #### 一对一动画 -一对一动画是指两个不同的图形之间的过渡动画。例如在下面这个例子中，展示了我们在饼图和柱状图之间切换时的全局动画： +一对一动画是指两个不同的图形之间的过渡动画。例如在下面这个例子中，展示了我们在饼图和柱状图之间切换时的全局动画： - - ```xml /** * 自1.12.0后，全局形变动画需要手动注册才能生效 @@ -71,9 +69,11 @@ updateSpec: (spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig) => P * import { registerMorph } from '@visactor/vchart'; * * registerMorph(); + * + * 自2.0.0开始，全局形变动画默认开启，不再需要手动注册 */ -VCHART_MODULE.registerMorph(); +VCHART_MODULE.registerMorph && VCHART_MODULE.registerMorph(); const pieSpec = { type: 'pie', @@ -110,17 +110,16 @@ setInterval(() => { vchart.updateSpec(specs[count % 2]); count++; }, 2000); - + ``` #### 一对多动画 -一对多动画是指一个图形元素向多个图形元素过渡的动画。例如在下面这个例子中，展示了我们在柱状图和散点图之间切换时的全局动画，其中，将一个大的柱子拆分为多个散点的动画就是一对多动画。 +一对多动画是指一个图形元素向多个图形元素过渡的动画。例如在下面这个例子中，展示了我们在柱状图和散点图之间切换时的全局动画，其中，将一个大的柱子拆分为多个散点的动画就是一对多动画。 - ```javascript /** * 自1.12.0后，全局形变动画需要手动注册才能生效 @@ -128,9 +127,11 @@ setInterval(() => { * import { registerMorph } from '@visactor/vchart'; * * registerMorph(); + * + * 自2.0.0开始，全局形变动画默认开启，不再需要手动注册 */ -VCHART_MODULE.registerMorph(); +VCHART_MODULE.registerMorph && VCHART_MODULE.registerMorph(); function calculateAverage(data, dim) { let total = 0; @@ -221,66 +222,42 @@ setInterval(() => { vchart.updateSpec(specs[count % 2]); count++; }, 3000); - - ``` + #### 多对一动画 -多对一动画是指多个图形元素过渡到一个元素。例如，在上面的例子中，我们可以让散点系列的多个点合并为一个大的柱子。 +多对一动画是指多个图形元素过渡到一个元素。例如，在上面的例子中，我们可以让散点系列的多个点合并为一个大的柱子。 ### 效果实现的源码执行过程解读 -通过配置可以说明不同图表的切换是通过更新配置来实现的，并且在形变动画开启的情况下会自动识别系列图元的切换过渡效果，下面对默认效果的设置做一个说明。 - - - - - -### 草稿 全局动画的实现解读x - - - -全局动画是指那些作用于整个图表级别的动画效果，它们可以应用于图表加载时的整体入场动画、数据更新时的统一变化动画，以及图表销毁前的整体退场动画。在VChart中，全局动画的设计和实现依赖于几个核心组件和机制，包括`Factory`类、`AnimateManager`类、`IAnimationSpec`接口等。 +通过配置可以说明不同图表的切换是通过更新配置来实现的，并且在形变动画开启的情况下会自动识别系列图元的切换过渡效果，下面对默认效果的设置做一个说明。 +### 草稿 全局动画的实现解读 x +全局动画是指那些作用于整个图表级别的动画效果，它们可以应用于图表加载时的整体入场动画、数据更新时的统一变化动画，以及图表销毁前的整体退场动画。在 VChart 中，全局动画的设计和实现依赖于几个核心组件和机制，包括`Factory`类、`AnimateManager`类、`IAnimationSpec`接口等。 #### 1. 动画注册与管理 +**Factory 类** - -**Factory 类** - - - -`Factory`类是动画系统中的一个关键角色，它负责管理和注册各种类型的动画。通过静态方法`registerAnimation`，我们可以将特定的动画逻辑与名称关联起来，以便后续使用。 - - +`Factory`类是动画系统中的一个关键角色，它负责管理和注册各种类型的动画。通过静态方法`registerAnimation`，我们可以将特定的动画逻辑与名称关联起来，以便后续使用。 ```xml class Factory { static registerAnimation(key: string, animation: (params?: any, preset?: any) => MarkAnimationSpec) { Factory._animations[key] = animation; } -} +} ``` - -当需要为某个图表元素添加动画时，可以通过`Factory.getAnimationInKey`获取已注册的动画，并将其应用到对应的图元或图形元素上。 - - +当需要为某个图表元素添加动画时，可以通过`Factory.getAnimationInKey`获取已注册的动画，并将其应用到对应的图元或图形元素上。 #### 2. 动画配置结构 +**IAnimationSpec 接口** - -**IAnimationSpec 接口** - - - -`IAnimationSpec`接口定义了动画配置的基本结构，涵盖了从入场(`animationAppear`)到退场(`animationDisappear`)的各种状态。每个状态都可以接受布尔值（启用/禁用）、预设配置对象或自定义配置对象作为参数。 - - +`IAnimationSpec`接口定义了动画配置的基本结构，涵盖了从入场(`animationAppear`)到退场(`animationDisappear`)的各种状态。每个状态都可以接受布尔值（启用/禁用）、预设配置对象或自定义配置对象作为参数。 ```xml interface IAnimationSpec { @@ -291,26 +268,17 @@ interface IAnimationSpec { animationDisappear?: boolean | ICommonStateAnimateSpec | IMarkAnimateSpec; animationState?: boolean | IStateAnimationConfig; animationNormal?: IMarkAnimateSpec; -} +} ``` - -这些配置项允许开发者灵活地控制不同状态下动画的行为，例如设置持续时间、缓动函数、动画类型等。 - - +这些配置项允许开发者灵活地控制不同状态下动画的行为，例如设置持续时间、缓动函数、动画类型等。 #### 3. 动画状态管理 +**AnimateManager 类** - -**AnimateManager 类** - - - -`AnimateManager`继承自`StateManager`并实现了`IAnimate`接口，用于管理动画的状态。它提供了方法来更新动画状态，并根据当前状态触发相应的动画逻辑。 - - +`AnimateManager`继承自`StateManager`并实现了`IAnimate`接口，用于管理动画的状态。它提供了方法来更新动画状态，并根据当前状态触发相应的动画逻辑。 ```xml class AnimateManager extends StateManager implements IAnimate { @@ -323,26 +291,17 @@ class AnimateManager extends StateManager implements IAnimate { // 其他状态下的动画逻辑 } } -} +} ``` - -此外，`AnimateManager`还负责生成唯一的标识符（ID）和信号名称，确保每个动画实例都能被正确识别和管理。 - - +此外，`AnimateManager`还负责生成唯一的标识符（ID）和信号名称，确保每个动画实例都能被正确识别和管理。 #### 4. 动画配置生成 +**animationConfig 函数** - -**animationConfig 函数** - - - -为了简化用户配置和默认配置之间的合并过程，VChart提供了一个名为`animationConfig`的辅助函数。该函数遍历所有可能的动画状态，并根据用户提供的配置或默认配置构建出最终的动画配置对象。 - - +为了简化用户配置和默认配置之间的合并过程，VChart 提供了一个名为`animationConfig`的辅助函数。该函数遍历所有可能的动画状态，并根据用户提供的配置或默认配置构建出最终的动画配置对象。 ```xml function animationConfig( @@ -374,26 +333,17 @@ function animationConfig( } return config; -} +} ``` - -此函数会处理默认配置和用户配置的合并，并且考虑到了某些状态（如`normal`）可以直接使用用户提供的配置，而不需要额外处理。 - - +此函数会处理默认配置和用户配置的合并，并且考虑到了某些状态（如`normal`）可以直接使用用户提供的配置，而不需要额外处理。 #### 5. 全局动画的具体实现 +**全局动画的注册** - -**全局动画的注册** - - - -以折线图或区域图为例，`registerVGrammarLineOrAreaAnimation`函数展示了如何批量注册一系列动画方法。这些动画涵盖了点增长、点移动、裁剪等效果，并适用于X轴和Y轴方向。 - - +以折线图或区域图为例，`registerVGrammarLineOrAreaAnimation`函数展示了如何批量注册一系列动画方法。这些动画涵盖了点增长、点移动、裁剪等效果，并适用于 X 轴和 Y 轴方向。 ```xml const registerVGrammarLineOrAreaAnimation = () => { @@ -407,18 +357,13 @@ const registerVGrammarLineOrAreaAnimation = () => { registerClipInAnimation, registerClipOutAnimation ]); -}; +}; ``` +**全局动画的初始化** -**全局动画的初始化** - - - -在具体系列的实现文件中（如柱状图、饼图等），通常会在初始化阶段调用`initAnimation`方法来设置动画配置。这个方法会结合用户提供的配置和默认配置，生成最终的动画配置，并将其应用到相应的图元或图形元素上。 - - +在具体系列的实现文件中（如柱状图、饼图等），通常会在初始化阶段调用`initAnimation`方法来设置动画配置。这个方法会结合用户提供的配置和默认配置，生成最终的动画配置，并将其应用到相应的图元或图形元素上。 ```xml initAnimation(): void { @@ -431,52 +376,34 @@ initAnimation(): void { animationParams ) ); -} +} ``` - -这里，`animationConfig`函数用于合并默认配置和用户配置，而`userAnimationConfig`则负责提取用户提供的动画配置信息。最后，通过`setAnimationConfig`方法将生成的配置应用到具体的图元上。 - - +这里，`animationConfig`函数用于合并默认配置和用户配置，而`userAnimationConfig`则负责提取用户提供的动画配置信息。最后，通过`setAnimationConfig`方法将生成的配置应用到具体的图元上。 #### 6. 动画任务的执行 +**IAnimationTask 接口** - -**IAnimationTask 接口** - - - -对于复杂的动画序列，VChart引入了`IAnimationTask`接口来描述动画任务的数据结构。每个任务包含时间偏移、动作队列和后继任务列表，形成了一种链式动画执行机制。 - - +对于复杂的动画序列，VChart 引入了`IAnimationTask`接口来描述动画任务的数据结构。每个任务包含时间偏移、动作队列和后继任务列表，形成了一种链式动画执行机制。 ```xml interface IAnimationTask { timeOffset: number; actionList: Action[]; nextTaskList: IAnimationTask[]; -} +} ``` - -这种设计使得多个动画任务可以按顺序或并发执行，从而实现更加复杂和细腻的动画效果。 - - +这种设计使得多个动画任务可以按顺序或并发执行，从而实现更加复杂和细腻的动画效果。 #### 7. 示例：创建全局入场动画 +假设我们要为一个新创建的柱状图添加一个全局的淡入入场动画，以下是详细的实现步骤： - -假设我们要为一个新创建的柱状图添加一个全局的淡入入场动画，以下是详细的实现步骤： - - - -* **定义动画配置**：首先，在图表配置中指定`animationAppear`为`true`，表示启用入场动画。同时，可以进一步定制动画的具体行为，比如选择淡入效果、设置持续时间和缓动函数。 - - +- **定义动画配置**：首先，在图表配置中指定`animationAppear`为`true`，表示启用入场动画。同时，可以进一步定制动画的具体行为，比如选择淡入效果、设置持续时间和缓动函数。 ```xml const chartSpec = { @@ -492,27 +419,21 @@ const chartSpec = { data: [/* 数据数组 */] } ] -}; +}; ``` - -* **注册淡入动画**：接着，我们需要确保淡入动画已经被正确注册到系统中。这一步骤通常在项目启动时完成，或者在需要的地方显式调用。 - - +- **注册淡入动画**：接着，我们需要确保淡入动画已经被正确注册到系统中。这一步骤通常在项目启动时完成，或者在需要的地方显式调用。 ```xml import { Factory } from '@visactor/vchart'; import { Appear_FadeIn } from './series/bar/animation'; -Factory.registerAnimation('fadeIn', Appear_FadeIn); +Factory.registerAnimation('fadeIn', Appear_FadeIn); ``` - -* **初始化图表实例**：有了上述配置之后，我们可以初始化一个`VChart`实例，并将配置传递给它。这会触发图表的渲染过程，并应用相应的动画效果。 - - +- **初始化图表实例**：有了上述配置之后，我们可以初始化一个`VChart`实例，并将配置传递给它。这会触发图表的渲染过程，并应用相应的动画效果。 ```xml import { VChart } from '@visactor/vchart'; @@ -525,34 +446,27 @@ const chart = new VChart({ animation: true, // 开启动画 theme: 'light' // 使用浅色主题 } -}); +}); ``` +- **触发动画**：一旦图表被渲染出来，任何数据的变化都会自动触发动画。例如，当页面首次加载时，所有柱子将以淡入的方式逐渐显现；当有新的数据加入时，新柱子也会以同样的方式进入。 -* **触发动画**：一旦图表被渲染出来，任何数据的变化都会自动触发动画。例如，当页面首次加载时，所有柱子将以淡入的方式逐渐显现；当有新的数据加入时，新柱子也会以同样的方式进入。 - - - -* **手动控制动画**：如果需要对动画进行更精细的控制，比如暂停或恢复动画，可以使用`VChart`实例提供的相关方法。 - - +- **手动控制动画**：如果需要对动画进行更精细的控制，比如暂停或恢复动画，可以使用`VChart`实例提供的相关方法。 ```xml // 暂停所有正在进行的动画 chart.pauseAnimation(); // 恢复之前暂停的动画 -chart.resumeAnimation(); +chart.resumeAnimation(); ``` - #### 总结 +通过以上步骤，我们详细解读了 VChart 中全局动画的实现原理。VChart 的动画系统设计巧妙地结合了工厂模式、状态管理器模式以及模块化的动画配置，不仅提供了丰富的内置动画效果，还支持高度定制化的需求。开发者可以根据实际应用场景灵活配置和组合不同的动画，创造出既美观又实用的可视化效果。 +# 本文档由以下人员修正整理 -通过以上步骤，我们详细解读了VChart中全局动画的实现原理。VChart的动画系统设计巧妙地结合了工厂模式、状态管理器模式以及模块化的动画配置，不仅提供了丰富的内置动画效果，还支持高度定制化的需求。开发者可以根据实际应用场景灵活配置和组合不同的动画，创造出既美观又实用的可视化效果。 - - # 本文档由以下人员修正整理 - [玄魂](https://github.com/xuanhun) \ No newline at end of file +[玄魂](https://github.com/xuanhun) diff --git a/docs/assets/contributing/zh/sourcesode/10.2-global-morphing-animation.md b/docs/assets/contributing/zh/sourcesode/10.2-global-morphing-animation.md index e526dfb9e5..a171509791 100644 --- a/docs/assets/contributing/zh/sourcesode/10.2-global-morphing-animation.md +++ b/docs/assets/contributing/zh/sourcesode/10.2-global-morphing-animation.md @@ -1,40 +1,40 @@ --- -title: 10.2 全局形变动画 +title: 10.2 全局形变动画 key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM --- + ## 10.2 全局形变动画 -分数： 8 +分数： 8 -1. 全局动画： +1. 全局动画： -1. 代码入口：`packages/vchart/src/animation/` +1. 代码入口：`packages/vchart/src/animation/` -1. 解读重点： +1. 解读重点： -1. 全局动画的实现 +1. 全局动画的实现 -1. 其他参考文档： +1. 其他参考文档： -https://www.visactor.io/vchart/guide/tutorial_docs/Animation/Animation_Types +https://www.visactor.io/vchart/guide/tutorial_docs/Animation/Animation_Types -https://www.visactor.io/vrender/guide/asd/Basic_Tutorial/Animate +https://www.visactor.io/vrender/guide/asd/Basic_Tutorial/Animate -https://visactor.io/vgrammar/guide/guides/animation +https://visactor.io/vgrammar/guide/guides/animation -[魔力之帧(上):前端图表库动画实现原理一幅生动的可视化作品往往少不了动画的参与。无论是各色各样的图表还是叙事作品，组织周 - 掘金](https://juejin.cn/post/7275270809777520651) +[魔力之帧(上):前端图表库动画实现原理一幅生动的可视化作品往往少不了动画的参与。无论是各色各样的图表还是叙事作品，组织周 - 掘金](https://juejin.cn/post/7275270809777520651) -在10.1中初步了解了VChart对动画系统的设计和图表的创建示例，这一节继续介绍在使用VChart中，不同图表配置之间切换时的过渡设计。 +在 10.1 中初步了解了 VChart 对动画系统的设计和图表的创建示例，这一节继续介绍在使用 VChart 中，不同图表配置之间切换时的过渡设计。 ### 定义 -VChart 提供了各个系列间相关切换的形变动画，我们称**全局形变动画**。 +VChart 提供了各个系列间相关切换的形变动画，我们称**全局形变动画**。 -在通过 `updateSpec` 来更新图表配置时，VChart 会检测新旧图表的两个相关联的系列，是否符合形变动画的条件，从而执行**一对一、一对多或多对一的图形**之间的动态过渡。 全局形变动画能让用户在展示的图表类型发生变化时有更好的视觉体验，避免看上去是瞬间变化的感觉，毕竟，视觉舒适是我们在展示数据和分析数据的过程中所应当关注的一个重要因素。 +在通过 `updateSpec` 来更新图表配置时，VChart 会检测新旧图表的两个相关联的系列，是否符合形变动画的条件，从而执行**一对一、一对多或多对一的图形**之间的动态过渡。 全局形变动画能让用户在展示的图表类型发生变化时有更好的视觉体验，避免看上去是瞬间变化的感觉，毕竟，视觉舒适是我们在展示数据和分析数据的过程中所应当关注的一个重要因素。 -> https://visactor.com/vchart/api/API/vchart 参考接口文档 -> +> https://visactor.com/vchart/api/API/vchart 参考接口文档 ```Typescript updateSpec @@ -46,7 +46,7 @@ updateSpec * @param morphConfig morph 动画配置 * @returns */ -updateSpec: (spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig) => Promise; +updateSpec: (spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig) => Promise; ``` @@ -54,16 +54,14 @@ updateSpec: (spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig) => P ### 效果示例 -下面通过两个示例配置说明这类过渡动画的效果： +下面通过两个示例配置说明这类过渡动画的效果： #### 一对一动画 -一对一动画是指两个不同的图形之间的过渡动画。例如在下面这个例子中，展示了我们在饼图和柱状图之间切换时的全局动画： +一对一动画是指两个不同的图形之间的过渡动画。例如在下面这个例子中，展示了我们在饼图和柱状图之间切换时的全局动画： - - ```xml /** * 自1.12.0后，全局形变动画需要手动注册才能生效 @@ -71,9 +69,11 @@ updateSpec: (spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig) => P * import { registerMorph } from '@visactor/vchart'; * * registerMorph(); + * + * 自2.0.0开始，全局形变动画默认开启，不再需要手动注册 */ -VCHART_MODULE.registerMorph(); +VCHART_MODULE.registerMorph && VCHART_MODULE.registerMorph(); const pieSpec = { type: 'pie', @@ -110,17 +110,16 @@ setInterval(() => { vchart.updateSpec(specs[count % 2]); count++; }, 2000); - + ``` #### 一对多动画 -一对多动画是指一个图形元素向多个图形元素过渡的动画。例如在下面这个例子中，展示了我们在柱状图和散点图之间切换时的全局动画，其中，将一个大的柱子拆分为多个散点的动画就是一对多动画。 +一对多动画是指一个图形元素向多个图形元素过渡的动画。例如在下面这个例子中，展示了我们在柱状图和散点图之间切换时的全局动画，其中，将一个大的柱子拆分为多个散点的动画就是一对多动画。 - ```javascript /** * 自1.12.0后，全局形变动画需要手动注册才能生效 @@ -128,9 +127,11 @@ setInterval(() => { * import { registerMorph } from '@visactor/vchart'; * * registerMorph(); + * + * 自2.0.0开始，全局形变动画默认开启，不再需要手动注册 */ -VCHART_MODULE.registerMorph(); +VCHART_MODULE.registerMorph && VCHART_MODULE.registerMorph(); function calculateAverage(data, dim) { let total = 0; @@ -221,66 +222,42 @@ setInterval(() => { vchart.updateSpec(specs[count % 2]); count++; }, 3000); - - ``` + #### 多对一动画 -多对一动画是指多个图形元素过渡到一个元素。例如，在上面的例子中，我们可以让散点系列的多个点合并为一个大的柱子。 +多对一动画是指多个图形元素过渡到一个元素。例如，在上面的例子中，我们可以让散点系列的多个点合并为一个大的柱子。 ### 效果实现的源码执行过程解读 -通过配置可以说明不同图表的切换是通过更新配置来实现的，并且在形变动画开启的情况下会自动识别系列图元的切换过渡效果，下面对默认效果的设置做一个说明。 - - - - - -### 草稿 全局动画的实现解读x - - - -全局动画是指那些作用于整个图表级别的动画效果，它们可以应用于图表加载时的整体入场动画、数据更新时的统一变化动画，以及图表销毁前的整体退场动画。在VChart中，全局动画的设计和实现依赖于几个核心组件和机制，包括`Factory`类、`AnimateManager`类、`IAnimationSpec`接口等。 +通过配置可以说明不同图表的切换是通过更新配置来实现的，并且在形变动画开启的情况下会自动识别系列图元的切换过渡效果，下面对默认效果的设置做一个说明。 +### 草稿 全局动画的实现解读 x +全局动画是指那些作用于整个图表级别的动画效果，它们可以应用于图表加载时的整体入场动画、数据更新时的统一变化动画，以及图表销毁前的整体退场动画。在 VChart 中，全局动画的设计和实现依赖于几个核心组件和机制，包括`Factory`类、`AnimateManager`类、`IAnimationSpec`接口等。 #### 1. 动画注册与管理 +**Factory 类** - -**Factory 类** - - - -`Factory`类是动画系统中的一个关键角色，它负责管理和注册各种类型的动画。通过静态方法`registerAnimation`，我们可以将特定的动画逻辑与名称关联起来，以便后续使用。 - - +`Factory`类是动画系统中的一个关键角色，它负责管理和注册各种类型的动画。通过静态方法`registerAnimation`，我们可以将特定的动画逻辑与名称关联起来，以便后续使用。 ```xml class Factory { static registerAnimation(key: string, animation: (params?: any, preset?: any) => MarkAnimationSpec) { Factory._animations[key] = animation; } -} +} ``` - -当需要为某个图表元素添加动画时，可以通过`Factory.getAnimationInKey`获取已注册的动画，并将其应用到对应的图元或图形元素上。 - - +当需要为某个图表元素添加动画时，可以通过`Factory.getAnimationInKey`获取已注册的动画，并将其应用到对应的图元或图形元素上。 #### 2. 动画配置结构 +**IAnimationSpec 接口** - -**IAnimationSpec 接口** - - - -`IAnimationSpec`接口定义了动画配置的基本结构，涵盖了从入场(`animationAppear`)到退场(`animationDisappear`)的各种状态。每个状态都可以接受布尔值（启用/禁用）、预设配置对象或自定义配置对象作为参数。 - - +`IAnimationSpec`接口定义了动画配置的基本结构，涵盖了从入场(`animationAppear`)到退场(`animationDisappear`)的各种状态。每个状态都可以接受布尔值（启用/禁用）、预设配置对象或自定义配置对象作为参数。 ```xml interface IAnimationSpec { @@ -291,26 +268,17 @@ interface IAnimationSpec { animationDisappear?: boolean | ICommonStateAnimateSpec | IMarkAnimateSpec; animationState?: boolean | IStateAnimationConfig; animationNormal?: IMarkAnimateSpec; -} +} ``` - -这些配置项允许开发者灵活地控制不同状态下动画的行为，例如设置持续时间、缓动函数、动画类型等。 - - +这些配置项允许开发者灵活地控制不同状态下动画的行为，例如设置持续时间、缓动函数、动画类型等。 #### 3. 动画状态管理 +**AnimateManager 类** - -**AnimateManager 类** - - - -`AnimateManager`继承自`StateManager`并实现了`IAnimate`接口，用于管理动画的状态。它提供了方法来更新动画状态，并根据当前状态触发相应的动画逻辑。 - - +`AnimateManager`继承自`StateManager`并实现了`IAnimate`接口，用于管理动画的状态。它提供了方法来更新动画状态，并根据当前状态触发相应的动画逻辑。 ```xml class AnimateManager extends StateManager implements IAnimate { @@ -323,26 +291,17 @@ class AnimateManager extends StateManager implements IAnimate { // 其他状态下的动画逻辑 } } -} +} ``` - -此外，`AnimateManager`还负责生成唯一的标识符（ID）和信号名称，确保每个动画实例都能被正确识别和管理。 - - +此外，`AnimateManager`还负责生成唯一的标识符（ID）和信号名称，确保每个动画实例都能被正确识别和管理。 #### 4. 动画配置生成 +**animationConfig 函数** - -**animationConfig 函数** - - - -为了简化用户配置和默认配置之间的合并过程，VChart提供了一个名为`animationConfig`的辅助函数。该函数遍历所有可能的动画状态，并根据用户提供的配置或默认配置构建出最终的动画配置对象。 - - +为了简化用户配置和默认配置之间的合并过程，VChart 提供了一个名为`animationConfig`的辅助函数。该函数遍历所有可能的动画状态，并根据用户提供的配置或默认配置构建出最终的动画配置对象。 ```xml function animationConfig( @@ -374,26 +333,17 @@ function animationConfig( } return config; -} +} ``` - -此函数会处理默认配置和用户配置的合并，并且考虑到了某些状态（如`normal`）可以直接使用用户提供的配置，而不需要额外处理。 - - +此函数会处理默认配置和用户配置的合并，并且考虑到了某些状态（如`normal`）可以直接使用用户提供的配置，而不需要额外处理。 #### 5. 全局动画的具体实现 +**全局动画的注册** - -**全局动画的注册** - - - -以折线图或区域图为例，`registerVGrammarLineOrAreaAnimation`函数展示了如何批量注册一系列动画方法。这些动画涵盖了点增长、点移动、裁剪等效果，并适用于X轴和Y轴方向。 - - +以折线图或区域图为例，`registerVGrammarLineOrAreaAnimation`函数展示了如何批量注册一系列动画方法。这些动画涵盖了点增长、点移动、裁剪等效果，并适用于 X 轴和 Y 轴方向。 ```xml const registerVGrammarLineOrAreaAnimation = () => { @@ -407,18 +357,13 @@ const registerVGrammarLineOrAreaAnimation = () => { registerClipInAnimation, registerClipOutAnimation ]); -}; +}; ``` +**全局动画的初始化** -**全局动画的初始化** - - - -在具体系列的实现文件中（如柱状图、饼图等），通常会在初始化阶段调用`initAnimation`方法来设置动画配置。这个方法会结合用户提供的配置和默认配置，生成最终的动画配置，并将其应用到相应的图元或图形元素上。 - - +在具体系列的实现文件中（如柱状图、饼图等），通常会在初始化阶段调用`initAnimation`方法来设置动画配置。这个方法会结合用户提供的配置和默认配置，生成最终的动画配置，并将其应用到相应的图元或图形元素上。 ```xml initAnimation(): void { @@ -431,52 +376,34 @@ initAnimation(): void { animationParams ) ); -} +} ``` - -这里，`animationConfig`函数用于合并默认配置和用户配置，而`userAnimationConfig`则负责提取用户提供的动画配置信息。最后，通过`setAnimationConfig`方法将生成的配置应用到具体的图元上。 - - +这里，`animationConfig`函数用于合并默认配置和用户配置，而`userAnimationConfig`则负责提取用户提供的动画配置信息。最后，通过`setAnimationConfig`方法将生成的配置应用到具体的图元上。 #### 6. 动画任务的执行 +**IAnimationTask 接口** - -**IAnimationTask 接口** - - - -对于复杂的动画序列，VChart引入了`IAnimationTask`接口来描述动画任务的数据结构。每个任务包含时间偏移、动作队列和后继任务列表，形成了一种链式动画执行机制。 - - +对于复杂的动画序列，VChart 引入了`IAnimationTask`接口来描述动画任务的数据结构。每个任务包含时间偏移、动作队列和后继任务列表，形成了一种链式动画执行机制。 ```xml interface IAnimationTask { timeOffset: number; actionList: Action[]; nextTaskList: IAnimationTask[]; -} +} ``` - -这种设计使得多个动画任务可以按顺序或并发执行，从而实现更加复杂和细腻的动画效果。 - - +这种设计使得多个动画任务可以按顺序或并发执行，从而实现更加复杂和细腻的动画效果。 #### 7. 示例：创建全局入场动画 +假设我们要为一个新创建的柱状图添加一个全局的淡入入场动画，以下是详细的实现步骤： - -假设我们要为一个新创建的柱状图添加一个全局的淡入入场动画，以下是详细的实现步骤： - - - -* **定义动画配置**：首先，在图表配置中指定`animationAppear`为`true`，表示启用入场动画。同时，可以进一步定制动画的具体行为，比如选择淡入效果、设置持续时间和缓动函数。 - - +- **定义动画配置**：首先，在图表配置中指定`animationAppear`为`true`，表示启用入场动画。同时，可以进一步定制动画的具体行为，比如选择淡入效果、设置持续时间和缓动函数。 ```xml const chartSpec = { @@ -492,27 +419,21 @@ const chartSpec = { data: [/* 数据数组 */] } ] -}; +}; ``` - -* **注册淡入动画**：接着，我们需要确保淡入动画已经被正确注册到系统中。这一步骤通常在项目启动时完成，或者在需要的地方显式调用。 - - +- **注册淡入动画**：接着，我们需要确保淡入动画已经被正确注册到系统中。这一步骤通常在项目启动时完成，或者在需要的地方显式调用。 ```xml import { Factory } from '@visactor/vchart'; import { Appear_FadeIn } from './series/bar/animation'; -Factory.registerAnimation('fadeIn', Appear_FadeIn); +Factory.registerAnimation('fadeIn', Appear_FadeIn); ``` - -* **初始化图表实例**：有了上述配置之后，我们可以初始化一个`VChart`实例，并将配置传递给它。这会触发图表的渲染过程，并应用相应的动画效果。 - - +- **初始化图表实例**：有了上述配置之后，我们可以初始化一个`VChart`实例，并将配置传递给它。这会触发图表的渲染过程，并应用相应的动画效果。 ```xml import { VChart } from '@visactor/vchart'; @@ -525,34 +446,27 @@ const chart = new VChart({ animation: true, // 开启动画 theme: 'light' // 使用浅色主题 } -}); +}); ``` +- **触发动画**：一旦图表被渲染出来，任何数据的变化都会自动触发动画。例如，当页面首次加载时，所有柱子将以淡入的方式逐渐显现；当有新的数据加入时，新柱子也会以同样的方式进入。 -* **触发动画**：一旦图表被渲染出来，任何数据的变化都会自动触发动画。例如，当页面首次加载时，所有柱子将以淡入的方式逐渐显现；当有新的数据加入时，新柱子也会以同样的方式进入。 - - - -* **手动控制动画**：如果需要对动画进行更精细的控制，比如暂停或恢复动画，可以使用`VChart`实例提供的相关方法。 - - +- **手动控制动画**：如果需要对动画进行更精细的控制，比如暂停或恢复动画，可以使用`VChart`实例提供的相关方法。 ```xml // 暂停所有正在进行的动画 chart.pauseAnimation(); // 恢复之前暂停的动画 -chart.resumeAnimation(); +chart.resumeAnimation(); ``` - #### 总结 +通过以上步骤，我们详细解读了 VChart 中全局动画的实现原理。VChart 的动画系统设计巧妙地结合了工厂模式、状态管理器模式以及模块化的动画配置，不仅提供了丰富的内置动画效果，还支持高度定制化的需求。开发者可以根据实际应用场景灵活配置和组合不同的动画，创造出既美观又实用的可视化效果。 +# 本文档由以下人员修正整理 -通过以上步骤，我们详细解读了VChart中全局动画的实现原理。VChart的动画系统设计巧妙地结合了工厂模式、状态管理器模式以及模块化的动画配置，不仅提供了丰富的内置动画效果，还支持高度定制化的需求。开发者可以根据实际应用场景灵活配置和组合不同的动画，创造出既美观又实用的可视化效果。 - - # 本文档由以下人员修正整理 - [玄魂](https://github.com/xuanhun) \ No newline at end of file +[玄魂](https://github.com/xuanhun) diff --git a/docs/assets/examples/en/storytelling/bar-to-pie.md b/docs/assets/examples/en/storytelling/bar-to-pie.md index 1bda95e116..c0de2e3dbb 100644 --- a/docs/assets/examples/en/storytelling/bar-to-pie.md +++ b/docs/assets/examples/en/storytelling/bar-to-pie.md @@ -23,8 +23,10 @@ We often use different chart types for different visualization purposes. The sam * import { registerMorph } from '@visactor/vchart'; * * registerMorph(); + * + * 自2.0.0开始，全局形变动画默认开启，不再需要手动注册 */ -VCHART_MODULE.registerMorph(); +VCHART_MODULE.registerMorph && VCHART_MODULE.registerMorph(); const pieSpec = { type: 'pie', data: [ diff --git a/docs/assets/examples/en/storytelling/bar-to-scatter.md b/docs/assets/examples/en/storytelling/bar-to-scatter.md index 6421ab74d9..89562c3b9c 100644 --- a/docs/assets/examples/en/storytelling/bar-to-scatter.md +++ b/docs/assets/examples/en/storytelling/bar-to-scatter.md @@ -26,8 +26,10 @@ Global animation enhances the observer's tracking of data changes in certain sce * import { registerMorph } from '@visactor/vchart'; * * registerMorph(); + * + * 自2.0.0开始，全局形变动画默认开启，不再需要手动注册 */ -VCHART_MODULE.registerMorph(); +VCHART_MODULE.registerMorph && VCHART_MODULE.registerMorph(); function calculateAverage(data, dim) { let total = 0; for (let i = 0; i < data.length; i++) { diff --git a/docs/assets/examples/zh/storytelling/bar-to-pie.md b/docs/assets/examples/zh/storytelling/bar-to-pie.md index e618ea654f..f9ed21e6b2 100644 --- a/docs/assets/examples/zh/storytelling/bar-to-pie.md +++ b/docs/assets/examples/zh/storytelling/bar-to-pie.md @@ -23,8 +23,10 @@ option: pieChart#animationUpdate * import { registerMorph } from '@visactor/vchart'; * * registerMorph(); + * + * 自2.0.0开始，全局形变动画默认开启，不再需要手动注册 */ -VCHART_MODULE.registerMorph(); +VCHART_MODULE.registerMorph && VCHART_MODULE.registerMorph(); const pieSpec = { type: 'pie', diff --git a/docs/assets/examples/zh/storytelling/bar-to-scatter.md b/docs/assets/examples/zh/storytelling/bar-to-scatter.md index df995c0454..8a4abde178 100644 --- a/docs/assets/examples/zh/storytelling/bar-to-scatter.md +++ b/docs/assets/examples/zh/storytelling/bar-to-scatter.md @@ -26,8 +26,10 @@ option: commonChart#series-bar.animationUpdate * import { registerMorph } from '@visactor/vchart'; * * registerMorph(); + * + * 自2.0.0开始，全局形变动画默认开启，不再需要手动注册 */ -VCHART_MODULE.registerMorph(); +VCHART_MODULE.registerMorph && VCHART_MODULE.registerMorph(); function calculateAverage(data, dim) { let total = 0; diff --git a/docs/assets/guide/en/tutorial_docs/Animation/Animation_Types.md b/docs/assets/guide/en/tutorial_docs/Animation/Animation_Types.md index 8d815b382e..c3428a0307 100644 --- a/docs/assets/guide/en/tutorial_docs/Animation/Animation_Types.md +++ b/docs/assets/guide/en/tutorial_docs/Animation/Animation_Types.md @@ -148,9 +148,11 @@ A one-to-one animation is the transition animation between two different shapes. * import { registerMorph } from '@visactor/vchart'; * * registerMorph(); + * + * Since version 2.0.0, global morph animations are enabled by default, and manual registration is no longer needed. */ -VCHART_MODULE.registerMorph(); +VCHART_MODULE.registerMorph && VCHART_MODULE.registerMorph(); const pieSpec = { type: 'pie', @@ -200,9 +202,11 @@ A one-to-many animation is the transition animation from one graphical element t * import { registerMorph } from '@visactor/vchart'; * * registerMorph(); + * + * Since version 2.0.0, global morph animations are enabled by default, and manual registration is no longer needed. */ -VCHART_MODULE.registerMorph(); +VCHART_MODULE.registerMorph && VCHART_MODULE.registerMorph(); function calculateAverage(data, dim) { let total = 0; for (let i = 0; i < data.length; i++) { diff --git a/docs/assets/guide/zh/tutorial_docs/Animation/Animation_Types.md b/docs/assets/guide/zh/tutorial_docs/Animation/Animation_Types.md index cc98de8424..1d10c8399c 100644 --- a/docs/assets/guide/zh/tutorial_docs/Animation/Animation_Types.md +++ b/docs/assets/guide/zh/tutorial_docs/Animation/Animation_Types.md @@ -148,9 +148,11 @@ VChart 提供了各个系列间相关切换的形变动画。在你通过 `updat * import { registerMorph } from '@visactor/vchart'; * * registerMorph(); + * + * 自2.0.0开始，全局形变动画默认开启，不再需要手动注册 */ -VCHART_MODULE.registerMorph(); +VCHART_MODULE.registerMorph && VCHART_MODULE.registerMorph(); const pieSpec = { type: 'pie', @@ -200,9 +202,11 @@ setInterval(() => { * import { registerMorph } from '@visactor/vchart'; * * registerMorph(); + * + * 自2.0.0开始，全局形变动画默认开启，不再需要手动注册 */ -VCHART_MODULE.registerMorph(); +VCHART_MODULE.registerMorph && VCHART_MODULE.registerMorph(); function calculateAverage(data, dim) { let total = 0;