After understanding how to add change animation effects when specific chart element data changes, we can configure data update animations for series elements in a specific type of chart to meet animation effects in specific scenarios.
Interpretation of Data Update Animation Implementation
Data update animation refers to the animation effect executed by chart elements based on the new data state when the chart data changes. In VChart, this animation is designed to be very flexible and can be applied to three scenarios: new data entry (enter), existing data update (update), and old data removal (exit). Below is a detailed interpretation of the implementation.
1. Animation Configuration Structure
IAnimationSpec Interface
The IAnimationSpec interface defines the basic structure of animation configuration, which includes animation settings for different states. For data update animations, it mainly involves the following three properties:
animationEnter: Describes the animation effect when new data is added.
animationUpdate: Describes the animation effect when existing data is updated.
animationExit: Describes the animation effect when old data is removed.
Each attribute can accept a boolean value (enable/disable), a preset configuration object, or a custom configuration object as a parameter, providing developers with a high degree of customization possibilities.
2. Animation Manager
AnimateManager Class
The AnimateManager class is responsible for managing and coordinating the state of all animations. It implements the IAnimate interface and provides methods to update and retrieve animation states. For data update animations, the AnimateManager ensures that these animations are automatically triggered when data changes and can be paused or resumed as needed.
When chart elements enter the update, appear, or exit states, the updateAnimateState method is called and passes the state to the internal state management logic. This allows all eligible elements to perform the corresponding animations.
3. Animation Configuration Generation
animationConfig Function
To simplify the merging process between user configurations and default configurations, VChart provides a helper function called animationConfig. This function iterates over all possible animation states and constructs the final animation configuration object based on the user-provided configuration or the default configuration.
function animationConfig<Presetextendsstring>(
defaultConfig: MarkAnimationSpec = {},
userConfig?: Partial<Record<IAnimationState, boolean | IStateAnimateSpec<Preset> | IAnimationConfig | IAnimationConfig[]>>,
params?: { dataIndex: (datum: any, params: any) => number; dataCount: () => number; }
): MarkAnimationSpec {
const config = {} as MarkAnimationSpec;
for (let i = 0; i < AnimationStates.length; i++) {
const state = AnimationStates[i];
const userStateConfig = userConfig ? userConfig[state] : undefined;
if (userStateConfig === false) continue;
if (state === 'enter' || state === 'update' || state === 'exit') {
let defaultStateConfig: IAnimationConfig[];
if (isArray(defaultConfig[state])) {
defaultStateConfig = defaultConfig[state] as IAnimationConfig[];
} else {
defaultStateConfig = [{ ...DEFAULT_ANIMATION_CONFIG[state], ...defaultConfig[state] } as any];
}
config[state] = defaultStateConfig;
}
}
return config;
}
This function handles the merging of animation configurations in enter, update, and exit states, ensuring that the configurations provided by the user are correctly applied to specific graphical elements. If the user does not provide custom animation configurations, the default configurations are used.
4. Specific Implementation of Data Update Animation
Taking a bar chart as an example, suppose we want to add a fade-in effect for newly added data points, a scaling effect for updated data points, and a fade-out effect for removed data points. Here are the detailed implementation steps:
Define Animation Configuration: First, specify the animationEnter, animationUpdate, and animationExit configurations for the bar chart series in the chart configuration. Here, we can choose built-in animation types and adjust their duration and easing functions.
Register Animation: Next, we need to ensure that the required animations have been correctly registered in the system. This step is usually completed at project startup or explicitly called where needed.
The Appear_FadeIn, ScaleInOutAnimation, and Appear_FadeOut functions here define the specific logic for fade-in, scale, and fade-out animations, such as how to change the transparency or size of graphic elements.
Initialize the chart instance: With the above configuration, we can initialize a VChart instance and pass the configuration to it. This will trigger the rendering process of the chart and apply the corresponding animation effects.
Trigger Animation: Once the chart is rendered, any change in data will automatically trigger animation. For example, when new data is added, the animationEnter configuration takes effect; when data is updated, the animationUpdate configuration is effective; and when data is removed, the animationExit configuration is applied.
For complex animation sequences, VChart introduces the IAnimationTask interface to describe the data structure of animation tasks. Each task includes a time offset, an action queue, and a list of successor tasks, forming a chain-like animation execution mechanism.
This design allows multiple animation tasks to be executed sequentially or concurrently, enabling more complex and delicate animation effects. For data update animations, it can be part of an independent task chain, working in conjunction with other animation tasks.
6. Example: Creating a Bar Chart with Data Update Animation
Below is an example of creating a bar chart with data update animation, illustrating how to use VChart's data update animation system to implement the basic process.
Step 1: Define Animation Configuration
First, we need to define the basic configuration of the bar chart, including the data source and other visual attributes. At the same time, we will also specify the animationEnter, animationUpdate, and animationExit configurations here to ensure that the corresponding animation effects can be triggered when the data changes.
Ensure that the required animations have been correctly registered in the system. This step is usually completed at project startup or explicitly called where needed.
import { Factory } from '@visactor/vchart';
import { Appear_FadeIn, ScaleInOutAnimation, Appear_FadeOut } from './series/bar/animation';
Factory.registerAnimation('fadeIn', Appear_FadeIn);
Factory.registerAnimation('scaleIn', ScaleInOutAnimation);
Factory.registerAnimation('fadeOut', Appear_FadeOut);
Step 3: Initialize the Chart Instance
With the above configuration, we can initialize a VChart instance and pass the configuration to it. This step will trigger the chart rendering process and apply the corresponding animation effects.
Once the chart is rendered, any changes in the data will automatically trigger animations. For example, when new data is added, the animationEnter configuration will take effect; when data is updated, the animationUpdate configuration is effective; and when data is removed, the animationExit configuration is applied.
In this example, the updateSeriesData method triggers a series of animations:
For newly added data points (the fourth data point), the animationEnter configuration makes it gradually appear with a fade-in effect.
For existing data points (the first three data points), the animationUpdate configuration adjusts their size based on the new data values and transitions them with a scaling effect.
If any data points are removed, the animationExit configuration makes them disappear with a fade-out effect.
Step 5: Dynamically Control Animations
In some cases, you may want to dynamically control the behavior of data update animations, such as changing the speed or style of the animation. VChart provides flexible methods to achieve this.
To better manage the lifecycle of animations, VChart provides a series of event listeners and hook functions. For example, the VGRAMMAR_HOOK_EVENT.AFTER_DO_RENDER event can be triggered after the chart is initially rendered, while VGRAMMAR_HOOK_EVENT.ANIMATION_END will be triggered at the end of the animation.
This code demonstrates how to execute specific logic at different animation stages to ensure smooth transitions between animations and enhance user experience.
8. Difference Detection and Animation Trigger
Difference Detection
During the data update process, VChart automatically performs difference detection to identify which data points are new, updated, or removed. Based on this information, AnimateManager triggers the corresponding animations.
The diffState attribute here indicates the type of state change for the element, such as enter, update, or exit. The AnimateManager will decide which type of animation to apply based on this attribute.
9. Specific Implementation of Animation
Specific Animation Functions
Each specific animation function (such as Appear_FadeIn, ScaleInOutAnimation, and Appear_FadeOut) defines the specific behavior of the animation. For example, the Appear_FadeIn function might look like this:
This code defines a fade-in animation by adjusting the opacity attribute of a graphic element from 0 to 1 to achieve a visual fade-in effect.
10. Animation State Management
State Transition and Update
AnimateManager not only manages normal animations but also handles animation transitions in other states. For example, when new data is added, the animation in the enter state is triggered; when data is updated, the animation in the update state takes effect; and when data is removed, the animation in the exit state comes into play.
When chart elements enter the update, appear, or exit states, the updateAnimateState method is called and passes the state to the internal state management logic. This allows all eligible elements to perform the corresponding animations.
Summary
Through the above steps, we have detailed the implementation principles of data update animations in VChart. The data update 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. Specifically:
**animationEnter**: Suitable for entry animations of new data points, such as fade-in, growth, etc.
**animationUpdate**: Suitable for update animations of existing data points, such as scaling, color gradient, etc.
**animationExit**: Suitable for exit animations of old data points, such as fade-out, shrink, etc.
This design ensures that when data changes, the chart can be presented to users in a smooth and intuitive manner, enhancing the interactive experience and visual appeal.
This document was revised and organized by the following personnel
