让等待时间不再枯燥——页面加载动画自定义插件

在预览数据量较大的报表、或者视觉效果非常酷炫的大屏模板时，加载时间往往会比较长。FR默认的加载动画为蓝白相间的条柱变化，显得比较单一，并且背景颜色为白色（无色），尤其在深色系大屏加载前后强烈的亮度反差会让查看的用户非常不适。
现如今可通过加载动画自定义插件实现对加载页面的定制，使页面内容展示的一致性由报表、大屏本身延展到加载画面，同时满足企业个性化的展示需要，达到细节的完美。

【功能介绍】

• 全局页面加载动画自定义，可设置动画和尺寸
• 全局元素加载动画自定义，可设置动画和尺寸
• 全局加载动画背景自定义功能（加载完恢复）
• 单个模板文件(cpt/frm)页面加载动画自定义，可设置动画和尺寸
• 单个模板文件(cpt/frm)元素加载动画自定义，可设置动画和尺寸
• 单个模板文件(cpt/frm)加载动画背景自定义功能（加载完恢复）
  
  

【下载方式】
打开FineReport设计器，在“服务器——插件管理——应用商城”中搜索“页面加载动画自定义”安装下载进入帆软市场安装下载，搜索“页面加载动画自定义”、“9.0页面加载动画自定义”安装下载

【使用说明】
1.动图目录建立
在FR系统部署目录下webapps/webroot/ 的静态文件夹中 help 或 scripts 等目录下均可（但不要放入WEB-INF中），创建文件夹 loadingimages，将背景图、加载动画gif图都放置在此文件夹中。



素材： 1558582264672757.zip (2.16 MB, 下载次数: 131)

2019-6-11 14:06 上传

点击文件名下载附件
插件动图资源包

2.全局插件参数配置
进入数据决策系统的报表平台管理页面>管理系统>系统管理>常规，在安装本插件后可见多了“加载效果自定义”部分，如下图所示



动画图片路径：对应存放动图和背景图的文件路径，默认为 /webroot/help/loadingImages/。（此项可以设置网络共享目录或者URL地址均可，例如：http://shopres.finereport.com/ueditor/loadingImages/）

• 背景图：系统全局背景自定义的图片名称，类型限定为 JPG 格式。默认为 bg_none，即透明背景。
• 元素动图：报表画面中局部 HTML 元素加载动图，填写GIF文件名称（不含文件扩展名）。
• 元素动图宽度、高度：默认动图 宽度 30 像素px、高度 30 像素px，可自行根据实际需求修改。
• 页面动图：报表页面加载动图，填写GIF文件名称（不含文件扩展名）。
• 页面动图宽度、高度：页面动图默认宽度 60 像素px、高度 60 像素px，可自行更具实际需求修改。
  

3.模板单独参数配置
在 FR 系统部署目录对应 webapps/webroot/WEB-INF/resources 目录下创建文件 LoadingConfig.xml 。
编辑 LoadingConfig.xml 文件，添加指定模板的属性。各个标签标识如下：

• reportName：报表的路径文件名称，包括路径和报表名称；
• bgImage：背景图片名称（不含文件扩展名）;
• localPic：元素动图名称（不含文件扩展名）；
• localWidth：元素动图宽度；
• localHeight：元素动图高度；
• wholePic：页面动图名称（不含文件扩展名）；
• wholeWidth：页面动图宽度；
• wholeHeight：页面动图高度；
  

示例如下：

1. <font color="#000000"><?xml version="1.0" encoding="UTF-8"?>
   
2. <LoadingConfig>
   
3. <ReportAttr
   
4.     reportName="doc/example.frm"
   
5.     bgImage="bg_yellow"
   
6.     localPic="circle-local"
   
7.     wholePic="circle-whole"/>
   
8. <ReportAttr
   
9.     reportName="doc/GettingStarted.cpt"
   
10.     bgImage="bg_yellow"
    
11.     localPic="default-local"
    
12.     wholePic="default-whole"/>
    
13. <ReportAttr
    
14.     reportName="doc/GettingStarted-test.cpt"
    
15.     bgImage="bg_yellow"
    
16.     localPic="default-local"  localWidth="200" localHeight="200"
    
17.     wholePic="default-whole" wholeWidth="400" wholeHeight="400"/>
    
18. </LoadingConfig></font>

复制代码

4.效果查看
配置完以后，需重启服务才会生效，刷新页面即可见加载动画及背景已更改。


【相关链接】
帮助文档链接：加载页面动画自定义插件

这就很6了

星痕 发表于 2019-6-11 15:06
这就很6了

感觉可以用来做很多有趣的事情

支持支持，点赞。

请问，为什么我设置了没有什么用

现在都直接把这个功能都给噶了，系统管理里面根本找不到改设置了。

虔诚求问:效果图的第一个,黑色背景怎么设置的?