最新历史版本 :大屏常见动态效果 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

在大屏需求规划阶段,我们就要了解清楚大屏的使用方式,分析展示需求,决定大屏是否需要一些动态效果。

本文所指的动态效果均为大屏上自动的动态效果,即不需要人为操作就可以展示在大屏上。

2. 学习资料归纳编辑

大屏常见的动态效果包括各种轮播、滚动和闪烁动画等,以下是学习资料归纳:

动态效果分类动态效果帮助文档讲解视频
轮播类

图表轮播:
自动轮播多个图表

图表切换属性

图表轮播

tab页轮播:
自动轮播多个tab页,tab页中可嵌入多个组件甚至嵌入大屏模板

FVS_Tab组件

tab轮播

tab轮播实现模板轮播

图表数据提示点轮播:
自动轮播图表每个系列的数据提示,不需要鼠标悬浮显示

图表开启自动数据点提示轮播接口图表数据点轮播

地图数据提示点轮播:
自动轮播地图上每个数据点,不需要鼠标悬浮显示

地图开启数据点提示轮播地图数据点轮播
滚动类

表格跑马灯效果:
表格内容自动向上滚动的效果,类似跑马灯

FVS跑马灯特效

表格跑马灯效果
闪烁动画类文本条件变色:

指标卡或表格中的某值达到警示值时变色以引起重视

单元格添加预警,间隔背景色——

3. 应用场景编辑

3.1 图表轮播

使用场景:

图表轮播是帆软图表中内置的功能,其作用是在同一区域轮播显示两个以上图表,图表之间有一定的关联关系或共同组成一个小的主题模块。

如下模板中,有三组图表自动轮播的效果。每组轮播中都有相关的两个图表,如“整体情况-去年”、“整体情况-今年”分别描述了托管规模与收入的整体情况。

图表轮播示例模板.gif

点击下载该示例模板:信托投资驾驶舱

正常情况下,图表自动轮播,若需要单独关注某个图表,可将鼠标悬浮在图表上,让轮播暂停。

图表轮播示例组件.gif

自动轮播更适合参观展示大屏场景,也可以添加按钮做手动轮播,在驾驶舱大屏中有较多的应用场景:

图表轮播切换.gif

3.2 tab块实现模板轮播

使用场景:

模板轮播在大屏上也是常见的需求,以驾驶舱大屏为例,领导需要在会议室电视机上查看的数据可能不止某一方面,门店运营数据、销售回款数据等都要关注,而一张大屏无法排布这么多的数据指标时,通常可以制作多张大屏,用轮播的效果展示。

以下图中的模板为例,一共有3张模板要轮播,结合了场景地图自带的场景切换按钮,在切换或轮播场景的同时轮播了模板,整个模板形成了逻辑上的连贯,同时又展示了三张模板的信息。

模板轮播示例.gif

点击下载该示例模板:零售行业3D场景大屏

3.3 图表数据提示点轮播

使用场景:

为了大屏视觉设计的美观整洁,我们通常隐藏掉了大量的图表标签,但又希望图表信息展示全面,此时可以使用图表数据提示点轮播的方式,依次轮播图表中每个系列的具体数值。

如下图中的模板,为了大屏美观我们使用了扩展图表中的特殊形状柱形图,并隐藏掉标签,使用图表数据点轮播提示,让图表具体数据也能被展示出来。

图表轮播提示点示例.gif

点击下载该示例模板:酒店展示大屏(原模板无图表轮播效果,可根据帮助文档中的方法添加)

3.4 表格跑马灯效果

使用场景:

表格是大屏上常见的元素,但表格在大屏上的面积占比不宜过大,那么表格信息无法展示全的时候,就可以应用表格滚动效果(3形式像跑马灯)。

如下图中的模板,产品销售排名明细表中,需要展示的产品记录数超过表格高度,使用表格跑马灯效果使数据能展示完全。

表格滚动示例.gif

点击下载该示例模板:综合管理驾驶舱