组件的动画

<< Click to Display Table of Contents >>

当前位置:  制作可视化报告 > 组件操作与设置 

组件的动画

复制链接

1. 概述

1.1 应用场景

用户在查看报告时,数据看起来更生动。

1.2 功能介绍

用户可以在组件的设置中开启动画,并设置动画的轮播时长、轮播间隔等属性。使用此功能必须申请包含大屏功能的license。

2. 动画设置

2.1 饼图、环状图、南丁格尔玫瑰图

选中组件,在右侧编辑栏【设置】中选择“动画”,展开后点击勾选“轮播”即可。您可以设置动画时长和动画间隔。

ComponentAnimation_PieChart_Entrance

【动画时长】各类别的扇形从饼图中向外突出移动时所需的时间,默认500ms。

【动画间隔】一个类别的饼图向外突出的动画完成,进行回缩并开始下一个类别的扇形向外突出动画的时间,默认3000ms。

效果如图:

PieAnimation

2.2 柱图、线图、点图、面积图、瀑布图、甘特图、帕累托图、组合图

选中组件,在右侧编辑栏-【设置】中选择“动画”,展开后点击勾选“轮播”即可。您可以设置动画时长、动画间隔、轮播选项和轮播顺序。

【动画时长】各类别的标记(柱子、点、扇区)颜色高亮所需的时间,默认500ms。

【动画间隔】柱子、点、气泡的标签、标记逐个显示,效果为淡入淡出,当前一个淡出时后一个淡入动画的时间,默认2000ms。

【轮播选项】图表绑定多个度量列,可以选择其中一个度量列进行轮播或全部,默认全部。

【轮播顺序】图表支持两种轮播顺序,轴标签和标记,选择后图表会按照对应的顺序进行轮播,默认轴标签。

效果如图:

chart_animation

chart_animation_2

2.3 地图

选中组件,在右侧编辑栏【设置】中选择“动画”,展开后点击勾选“轮播”即可。您可以设置动画时长、动画间隔、轮播选项、轮播顺序和是否保留所有渲染区域。

【动画时长】各类别的扇形从饼图中向外突出移动时所需的时间,默认500ms。

【动画间隔】地图点、区域的标签、标记逐个显示,效果为淡入淡出,当前一个淡出时后一个淡入动画的时间,默认2000ms。

【轮播选项】多层地图时可以选择开启其中一层的动画也可选择全部,默认全部。

【是否保留所有渲染区域】勾选后,地图渲染效果将被保留,各个区域依次轮播,默认不勾选,即轮播时各区域一个个渲染出现。

效果如图:

Map_Animation

2.4 指标卡

选中组件,在右侧编辑栏-设置中选择“动画”,展开后点击勾选“翻转动画”即可。你可以设置滚动时长,默认1000ms。

ComponentAnimation_KPI_Entrance

效果如图:

kpi

2.5 选项卡

选中组件,在右侧编辑栏-设置中选择“动画”,展开后点击勾选“轮播”即可。你可以设置轮播时间,默认3s。

ComponentAnimation_Tab_Entrance

效果如图:

Tab

2.6 轮播组件

选中组件,在右侧编辑栏-设置中,你可以设置轮播时间,默认0s。

ComponentAnimation_Carousel_Entrance

效果如图:

Carousel

2.7 文本组件

文本组件有两种动画效果:翻转动画、滚动。

选中组件,在右侧编辑栏-设置中选择“动画”,展开后点击所需动画效果。在开启“滚动”动画后,你可以设置滚动速度、末尾间隔和停留时间。滚动速度默认2字符/s,末尾间隔默认10字符,停留时间默认2s。

ComponentAnimation_Text_Entrance

效果如图:

Text

2.8 表格

表格支持表格滚动和溢出文本滚动两种动画,具体详见表格动画

2.9 范围参数、范围过滤

选中组件,在右侧编辑栏-设置中选择“动画”,展开勾选“自动播放”。您可以设置播放间隔,播放顺序,以及是否循环播放。

Range_settings

【播放间隔】选中的滑块按照播放顺序向左/向右滑动的间隔时间,默认播放间隔为2 秒。

【播放顺序】滑块滑动的方向,支持向左、向右。

【循环播放】默认为非勾选状态,从选中的滑块开始播放,一直播放到最后滑块结束。勾选后,从选中的滑块开始播放,一直播放到最后滑块,再循环播放。

点击范围参数/范围过滤组件工具栏上的播放按钮开始播放动画。

注意:

若设置的范围、分组只有一个区间,则开启播放后无效果。

滑块为区间的播放动画:

viewdb_range_filter_animation_1

滑块为单选的播放动画:

viewdb_range_filter_animation_2

2.10 3D模型、3D城市

选中3D模型、3D城市组件,点击右侧编辑栏【设置 > 动画】中选择动画展开,勾选上“轮播”展开动画设置。支持三种动画设置,包括单点环绕、多视角切换、模型轮播。

单点环绕

3D模型是以Y轴为中心轴环绕,3D城市以当前视角中心为旋转中心环绕。

【旋转方向】固定视角后,支持逆时针、顺时针,默认逆时针。

【动画时长】旋转一圈的时长,默认为2000毫秒,可以输入大于等于0的整数。

【动画间隔】旋转完一周进入下一周旋转的间隔时间,默认为500毫秒,可以输入大于等于0的整数,默认为0毫秒,表示连续环绕。

【默认开启模型动画】默认开启模型文件本身自带的动画,点击“选择动画”,可在“选择动画”的对话框中全选、单个动画。

说明:

目前仅支持glb/gltf模型文件内的动画。

Single_point_surround

多视角切换

按照自定义视角列表从头到尾依次轮播,未添加视角、添加视角只有一个时,无动画效果。

【动画时长】、【动画间隔】参考单点环绕中的说明。

Multi_perspective_switch

模型轮播

模型轮播设置包括轮播对象、动画时长、动画间隔。

【轮播对象】轮播对象包括按模型列表、按绑定模型名称。其中按模型列表支持选择模型,在选择模型的对话框中,点击选择模型列表中的模型添加到已选择列表中,可拖拽调整模型列表调整轮播顺序。

【动画时长】、【动画间隔】:参考单点环绕中的说明。

【轮播时传递参数】聚焦到模型时,将设置好的组件传参(选中操作)的参数传递给其他数据来实现联动,默认勾选,详情参考举例1

【轮播时触发模型超链接(仅支持悬停)】当给模型定义了超链接时,若目标窗口为“悬停”,轮播到该模型时可以触发超链接实现联动,默认勾选,详情参考举例2

举例1:

轮播到不同模型传递不同参数,同时只显示对应模型的标签。

1)3D模型上绑定模型名称、模型数据上绑定节点、温度,上传、选择工厂模型。

2)表格组件上绑定节点、进料。

3)点击报告顶部的工具栏【参数 > 组件传参】,点击添加按钮,操作选择选中,勾选上3D模型组件名称“图表6”,数据列选择“节点”,传递参数选择“节点1”。

ComponentAnimation_component_transmission_parameters

4)选中3D模型组件,点击右侧的【设置 > 动画】,勾选“轮播”。

ComponentAnimation_Carousel

5)选中表格组件,点击组件工具栏右上角的“过滤”,在弹出的“过滤”对话框中,选择“汇总过滤”,设置“节点是等于?{节点1}”。

ComponentAnimation_Filter

6)轮播不同模型时传递不同参数的效果如下图所示。

Pass_parameters_during_carousel 

 

举例2:

轮播到不同模型触发模型超链接,悬浮显示超链接报告。

1)3D模型图上绑定模型名称,模型数据上绑定节点、温度,上传、选择工厂模型。

2)选中3D模型组件,点击右侧的【设置 > 超链接】,在“超链接”的对话框中,设置参数名为“节点1”,节点类型选择“数据列”,参数值选择“节点”。

ComponentAnimation_hyperlink

3)选中3D模型组件,点击右侧的【设置 > 动画】,勾选“轮播”。

ComponentAnimation_Carousel

4)轮播到不同模型触发超链接,悬浮显示超链接报告的效果如下图所示。

Trigger_model_hyperlink_during_carousel