Common Animation Cases

Bar Chart Carousel Animation

Below is a demo of a carousel animation for a bar chart. The configuration defines the normal-state animation (animationNormal) for the bar chart element (bar). The key features of the content are explained below:

• startTime: The animation starts running at 350 milliseconds.
• oneByOne: The execution time interval for each bar is 200 milliseconds.
• loop: Animation loop playback is enabled. Next, we will introduce the contents of the TimeLine array in detail. This array contains two time slices, which are used to control the animation effects of the bar chart appearing on the screen and disappearing off the screen:

First time slice:

• delay: Animation delay time is 1000 milliseconds.

• effects: Animation effect configuration

  • type: Animation effect type is "growHeightOut" (bar height gradually decreases to disappear)
  • easing: Animation easing function is "bounceOut" (bouncing easing, more dynamic)
  • options: Optional parameters
    • orient: Animation direction is "negative" (negative direction, from bottom to top)

• duration: Animation duration is 300 milliseconds.

• Second time slice

• delay: Animation delay time is 1000 milliseconds.

• effects: Animation effect configuration

  • type: Animation effect type is "growHeightIn" (bar height gradually increases to display)
  • easing: Animation easing function is "bounceOut" (bounce easing)
  • options: Optional parameters
    • orient: Animation direction is "negative" (moving in the negative direction, from bottom to top)

• duration: Animation duration is 1200 milliseconds.

Pie Chart Carousel Animation

Below is a demo of a carousel animation for a pie chart. We have configured the normal-state animation (animationNormal) for the pie chart element. We have defined two timelines:

• The first timeline (TimeLineA) starts running 100 milliseconds after the chart enters the scene and does not loop.
  • TimeLineA defines a time slice for executing a transparency-reducing animation with a duration of 500 milliseconds.
• The second timeline (TimeLineB) starts running 800 milliseconds later and is executed in a loop. The oneByOne attribute is set to true, indicating that the animation of each element starts after the previous element's animation is completed. TimeLineB defines 3 time slices:
  • Transparency recovers and the outer radius of the element expands by 10 px for emphasis, with an animation duration of 500 milliseconds;
  • The element properties remain unchanged for 500 milliseconds;
  • The element attributes are restored with a duration of 500 milliseconds.

Top 10 Bar Chart Animation

Below is a demo of a dynamic ranking bar chart animation. In this example, we have configured the update animation for the bar chart element. This configuration defines two animation effects, which are:

• Update animation (for all attributes except the element position visual channels x, y), with a duration of 2000 ms and a linear easing function linear;
• The change of position visual channels x, y has a duration of 300 ms, also using the linear easing function linear.