页面加载动画自定义

1.1 版本

1.2 应用场景

默认情况下 FineReport 加载动画为蓝白相间条柱变化，且外部元素无背景变化这样的画面风格可能比较突兀。

用户可以使用该插件实现页面加载动画的自定义，定制化效果满足企业用户对报表细节效果的完美追求。

1.3 功能简介

1）提供加载动画的自定义功能。

• 系统全局加载动画的自定义功能，可定制图片动画和尺寸大小。

• 单个模板加载动画的自定义功能，可定制图片动画和尺寸大小。

2）加载时布局元素的背景自定义功能。

• 系统全局加载时布局元素的背景自定义功能（加载完恢复）。

• 单个模板加载时布局元素的背景自定义功能（加载完恢复）。

3）新增页面动图、元素动图、背景图各项显示禁用功能。

1.4 注意事项

1）不支持移动端

2）该插件只支持挂载在平台的模板使用，单独预览报表链接没有效果。

2.1 安装插件

点击下载插件：页面加载动画自定义

设计器插件安装方法参照： 设计器插件管理

服务器安装插件方法参照： 服务器插件管理

安装完成后，默认插件启用，我们接着进行两步骤完成插件配置操作。

2.2 动图目录建立

首先下载动图资源文件：插件动图资源包 .zip (见文末)，解压缩后的得到动图文件夹loadingImages。

将动图文件夹 loadingImages 拷贝到 FineReport 安装路径 %FR_HOME%\webapps\webroot的 help 或 scripts 目录下均可。

注：不要放入 WEB-INF 中。

文件中默认包含加载动画 GIF，提供用户进行选择配置；同时用户也可添加自定义的各种动图和背景图片放在loadingImages 目录，然后维护参数对应名称，即可生效。

2.3 插件参数配置

2.3.1 全局参数配置

进入到报表平台管理页面（数据决策系统）>管理系统>系统管理>常规，配置加载效果自定义，如下图所示：

参数说明：

2.3.2 模板参数配置

在 FineReport 安装路径 %FR_HOME%\webapps\webroot\WEB-INF\resources 下创建文件 LoadingConfig.xml 。

编辑 LoadingConfig.xml 文件，添加指定模板的属性。所含属性标签如下所示：

• reportName：报表的路径文件名称，包括路径和报表名称；

• bgImage：背景图片名称（不含文件扩展名），值为bg_none或none为禁用不显示;
  

• localPic：元素动图名称（不含文件扩展名），值为none为禁用不显示；

• localWidth：元素动图宽度；

• localHeight：元素动图高度；
  

• wholePic：页面动图名称（不含文件扩展名），值为none为禁用不显示；

• wholeWidth：页面动图宽度；

• wholeHeight：页面动图高度；
  

示例如下：

<?xml version="1.0" encoding="UTF-8"?>
<LoadingConfig>
<ReportAttr 
    reportName="doc/example.frm"
    bgImage="bg_yellow" 
    localPic="circle-local" 
    wholePic="circle-whole"/>
<ReportAttr 
    reportName="doc/GettingStarted.cpt" 
    bgImage="bg_yellow" 
    localPic="default-local" 
    wholePic="default-whole"/>
<ReportAttr 
    reportName="doc/GettingStarted-test.cpt" 
    bgImage="bg_yellow" 
    localPic="default-local"  localWidth="200" localHeight="200"
    wholePic="default-whole" wholeWidth="400" wholeHeight="400"/>
</LoadingConfig>

配置文件下载：LoadingConfig.xml

默认提供的动图资源展示，如下图所示：

序号	局部元素动图	页面动图
1
2
3
4
5
6
7
8
9
10
11
12

动图资源文件下载：插件动画资源包.rar

配置参数文件，全局动画参数是可视化配置、模板动画参数是xm配置。配置生效是需要重启服务工程的。