历史版本3 :FVS分页间组件动画 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

适用场景:安装了「FVS大屏编辑模式」插件的用户,可参考本文了解 FVS 模板的相关功能。

点击查看视频课程:平滑过渡 。

1.1 版本

报表服务器版本
JAR包插件版本
11.02021-11-15V1.0.0

1.2 应用场景

FVS 大屏组件动画特指组件整体在页面切换时,组件进入和退出的动态效果,可以制作出类似 PPT 的一些动画效果。

例如 FVS组件联动及组件动画应用 文档中的示例,四周的组件分别设置了进入退出的动画。效果如下图所示:

1641291417192816.gif

注:部分组件内容也包括一些动画特效,例如三维组件的视角变化、图表组件的 交互属性 等等,这些动画与本文所讲的组件动画无关。

2. 功能介绍编辑

2.1 生效机制

FVS 大屏模板中的任意组件都可以设置动画;当多个组件合并成组合时,组合动画也需要单独设置,设置方法与组件动画一致。

FVS 大屏模板中存在 分页平滑过渡动画,切换分页时,将有平滑过渡转场效果。

若同时设置了「组件动效」、「组合动效」和「平滑过渡」,那么优先级排序为平滑过渡>组合动效>组件动效。

优先级最高的设置生效,优先级低的均不生效。

2.2 设置方法

FVS 大屏模板中的任意组件都可以设置动画,包括进入动画和退出动画。

选中页面中的组件,点击配置栏中的「动画」,点击「动效设置」按钮,即可设置组件动画。如下图所示:

当从上一页切换到下一页时,上一页组件的退出动效和下一页组件的进入动效生效。

当从下一页切换到上一页时,上一页组件的退出动效和下一页组件的进入动效反向生效。

设置项的具体配置如下表所示:

配置项
说明
进入动效

定义:组件出现时的动态效果

支持设置:无、淡入、向右滑动展开、向左滑动展开、向上滑动展开、向下滑动展开

默认值:淡入

动效时长

定义:开始动画的持续时长

单位:毫秒

默认值:1000

进入时机

定义:组件什么时候开始出现

支持设置:在上一页开始切换时立即进入、在上一页开始切换时延迟X秒后进入、在上一页完全消失后立即进入、在上一页完全消失后延迟X秒后进入

默认值:在上一页开始切换时立即进入

退出动效定义:组件消失时的动态效果

支持设置:无、淡出、向左滑动收起、向右滑动收起、向上滑动收起、向下滑动收起

默认值:淡出 

动效时长

定义:消失动画的持续时长

单位:毫秒

默认值:1000

退出时机

定义:组件什么时候开始消失

支持设置:在当前页切换时立即退出、在当前页切换时延迟X秒后退出、

默认值:在当前页切换时立即退出

2.3 效果示例

2.3.1 无动画切换

无动画.gif

2.3.2 淡入淡出

淡入淡出.gif

2.3.3 左右滑动切换

左滑右滑.gif

2.3.4 上下滑动切换

上滑下滑.gif