Smooth Transition Between Pages in FVS

This document applies to users who have installed the FineVis Data Visualization plugin to learn plugin functions.

Version

Application Scenario

If the FVS template contains multiple pages, you can set transition effects between them. If you enable the Smooth Transition function, when you switch to the next page in the preview, components with the same name on these two pages will have a smooth movement effect.

This function is commonly used for smooth transition effects when you want to show the different perspectives of a 3D component on several pages, as shown in the following figure.

If you disable the function, the effect is shown in the following figure.

Effective Mechanism

Page A and page B are adjacent, or page A can directly jump to page B through pagination events, and there are components with identical names on these two pages.

· Enable the Smooth Transition button for page B to make a smooth transition from page A to page B.

· Similarly, enable the Smooth Transition button for page A to make a smooth transition from page B to page A.

The Setting Button

Select the page where you want to set a smooth transition, click Transition in the configuration bar, enable the Smooth Transition button, and set the Duration.

After you enable the button, if a component exists both on the previous page and on the current page, a shifting animation is triggered during page switching, and the component's exit animation on the previous page is invalid.

Note:

If two components with the same name have different types, the animations in the component content may be affected.

Effect Example

There is the same column chart component on page 1 and page 2 with different relative positions. The smooth transition effect is shown in the following figure.

There is a column chart on page 1 and a bar chart on page 2. Both components are named Example Component and are located in the same relative position with different data. The smooth transition effect is shown in the following figure.

There is a bar chart on page 1 and a column chart on page 2. Both components are named Example Component. However, they are located in different relative positions with different data. The smooth transition effect is shown in the following figure.