I. Overview
Applicable scenarios: Users who have installed the "FVS Large Screen Editing Mode" plugin can refer to this article to learn about the related functions of the FVS template.
1. Version
| Report server version | JAR package | FVS large screen editing mode (beta version) version |
|---|---|---|
| 11.0 | 2021-11-15 | V1.0.0 |
2. Function introduction
There are two kinds of animations for FVS large screen components: component frame animation and component content animation.
Component content animation: It refers to the smooth transition of the component content itself. This article will not go into details. For details, please refer to: Chart Interaction Attributes
Component frame animation: It refers to the dynamic effect setting of the entry and exit of components in the page when the page is switched. As shown below:
3. Priority
The components in the FVS large screen template support multiple merging into group. The group dynamic effects need to be set separately. The setting method is the same as the component dynamic effects.
There is a smooth transition animation effect in the FVS large screen template, and the transition animation effect will have a moving transition effect.
If "Component Dynamic", "Group Dynamic" and "Smooth Transition" are set at the same time, the priority order is Smooth Transition > Group Dynamic > Component Dynamic.
The setting with the highest priority takes effect, and the setting with the lower priority does not take effect.
II. Common component animation
1. Setting method
Any component in the FVS large screen template can be animated, including appearing and disappearing animations.
Select the component on the page, click Animation in the configuration bar, and click the Animation Settings button to set the component animation. As shown below:
Each component can be set to entrance effect and exit effect.
When switching from the previous page to the next page, the exit effect of the previous page component and the entrance effect of the next page component take effect.
When switching from the next page to the previous page, the exit effect of the previous page component and the entrance effect of the next page component take effect in reverse.
The specific configuration of the setting items is shown in the following table:
| Configuration item | Introduction |
|---|---|
| Entrance Effect | Definition: The dynamic effect when the component appears Support settings: none, fade in, fly from left, fly from right, fly from top, fly from bottom Default: fade in |
| Duration | Definition: The duration of the start animation Unit: milliseconds Default: 1000 |
| Timing | Definition: when components start appearing Support settings: Enter at once when switching previous page, Enter with a delay when switching previous page, Enter at once when previous page disappears totally, Enter with a delay when previous page disappears totally Default: Enter at once when switching previous page |
| Exit Effect | Definition: The dynamic effect when the component disappears Support settings: none, fade out, exit to left, exit to right, exit to top, exit to bottom Default: fade out |
| Duration | Definition: The duration of the disappearing animation Unit: milliseconds Default: 1000 |
| Timing | Definition: when the component starts to disappear Support settings: when switching current page,exit at once; when switching current page,exit with a delay Default: when switching current page,exit at once |
2. Effect preview
1) No animation switching
2) Fade in and out
3) Swipe left and right to switch
4) Swipe up and down to switch
III. Smooth transition
FVS provides a "smooth transition" function.
1. Setting method
1) Effective mechanism
Page A and Page B are adjacent, and there are components with exactly the same name in Page A and Page B.
To smoothly transition from page A to page B, turn on the Smooth Transition button on page B.
To smoothly transition from page B to page A, turn on the Smooth Transition button on page A.
2) Settings button
Select the page where the "Smooth Transition" effect needs to be set, click the Transition button in the configuration bar, enable the Smooth Transition button, and set the duration.
If there is a "component with the same name" on the previous page and the current page, the transition animation will have a moving transition effect, but the "exit effect" of the component on the previous page will be invalid.
Note: If two components with the same name are of different types, it may affect the animation of the component content.
2. Example
1) Example background
There is a column chart component named Example Component on page1, the entrance effect is "fade in", and the exit effect is "fade out". As shown below:
On page 2, there is a column chart component named Example Component, the entrance effect is "fly from left", and the exit effect is "exit to right". As shown below:
2) Scene 1
If "Smooth Transition" is not turned on, all four in and out motion effects will take effect. As shown below:
3) Scene 2
If "Smooth Transition" is turned on for "Page2", when switching from Page1 to Page2, the exit effect "Fade Out" of the column chart in Page1 and the entrance effect of the column chart in Page2 "fly from left" is invalid, and the transition effect is changed to move. As shown below:
4) Scene 3
If "Smooth Transition" is enabled for "Page1", when switching from Page2 to Page1:
The exit effect of the column chart in page2 and the entrance effect of the column chart in page1 are invalid, and the transition effect is changed. As shown below:
