路径 D:\ireport365\ireport365.war\js\enduser\designer\vs-component-engine.js 在oap分析下面写 1800左右行大概 ``` B.groups.push({ name: "dh", title: { text: "加载动画" }, elements: [{ title: "动画开启", type: "switch", bind: "showDh", on: vsLang.on, off: vsLang.off },{ title: "动画选择", type: "select-s", bind: "animationContent", show: function() { return s.component.config.showDh }, items: [{ name: "淡入", value: "a-fadein" }, { name: "淡入-从上", value: "a-fadeinT" }, { name: "淡入-从右", value: "a-fadeinR" }, { name: "淡入-从下", value: "a-fadeinB" }, { name: "淡入-从左", value: "a-fadeinL" }, { name: "弹入", value: "a-bouncein" }, { name: "弹入-从上", value: "a-bounceinT" }, { name: "弹入-从右", value: "a-bounceinR" }, { name: "弹入-从下", value: "a-bounceinB" }, { name: "弹入-从左", value: "a-bounceinL" }, { name: "转入", value: "a-rotatein" }, { name: "转入-从左上", value: "a-rotateinLT" }, { name: "转入-从左下", value: "a-rotateinLB" }, { name: "转入-从右上", value: "a-rotateinRT" }, { name: "转入-从右下", value: "a-rotateinRB" }, { name: "翻转", value: "a-flip" }, { name: "翻入-X轴", value: "a-flipinX" }, { name: "翻入-Y轴", value: "a-flipin a-flipinY" }, { name: "闪烁", value: "a-flash" }, { name: "震颤", value: "a-shake" }, { name: "摇摆", value: "a-swing" }, { name: "摇晃", value: "a-wobble" }, { name: "震铃", value: "a-ring" }] }] }); ``` 路径：D:\ireport365\ireport365.war\js\enduser\designer\vs-designer-component.js 在以前oap分析下面写 大概1800行位置 ``` // 组件加载动画系列 start // 加载动画开关 $scope.$watch("component.config.showDh", function(newValue) { $scope.component.config.showDh = newValue; }); // 监听选择动画 $scope.$watch("component.config.animationContent", function (newValue,oldValue) { if (newValue != null && newValue !== oldValue) { // console.log(newValue) $scope.component.config.animationContent = newValue; // console.log($scope.component.config.animationContent) } }); // 组件加载动画系列 end ``` 路径：D:\ireport365\ireport365.war\template\designer\main.html 添加css文件 ``` <link href="${pageContext.request.contextPath}/libs/animation/animation.css" rel="stylesheet"> ``` 防止出错直接正行代码 全部复制 如图的位置  ``` <div class="box-content {{ component.config.showDh?component.config.animationContent.value:'' }}" ng-style="{'background-size':component.config.backgroundSize.x+' '+component.config.backgroundSize.y, 'background-position':component.config.backgroundPosition.x+' '+component.config.backgroundPosition.y, 'background-image':compileAttachmentStyleUrl(component.config.backgroundImage), 'background-repeat':component.config.backgroundRepeat,'background-color': component.context.measureLinkSelected ? component.config.mLinkBgColor : component.config.backgroundColor, 'border-radius':component.config.borderRadius+'px', 'border-top': component.context.measureLinkSelected ? component.config.mLinkBorderTopSize+'px solid '+component.config.mLinkBorderTopColor : component.config.borderTopSize+'px solid '+component.config.borderTopColor, 'border-bottom': component.context.measureLinkSelected ? component.config.mLinkBorderBottomSize+'px solid '+component.config.mLinkBorderBottomColor : component.config.borderBottomSize+'px solid '+component.config.borderBottomColor, 'border-left': component.context.measureLinkSelected ? component.config.mLinkBorderLeftSize+'px solid '+component.config.mLinkBorderLeftColor : component.config.borderLeftSize+'px solid '+component.config.borderLeftColor, 'border-right': component.context.measureLinkSelected ? component.config.mLinkBorderRightSize+'px solid '+component.config.mLinkBorderRightColor : component.config.borderRightSize+'px solid '+component.config.borderRightColor, 'border-image-slice': component.config.borderImageSlice == null || component.config.borderImageSlice.length === 0 ? '14 fill' : component.config.borderImageSlice, 'border-image-source': compileFullUrl(attachmentPrefix+component.config.borderImageSource)}"> ``` 路径：D:\ireport365\ireport365.war\WEB-INF\classes\system-resource\report-template.html 添加css文件 ``` <link href="${cdnPath}libs/animation/animation.css" rel="stylesheet"> ``` 防止出错 整行复制吧 如下图位置  ``` <div class="box-content {{ component.config.showDh?component.config.animationContent.value:'' }}" ng-style="{'background-size':component.config.backgroundSize.x+' '+component.config.backgroundSize.y, 'background-position':component.config.backgroundPosition.x+' '+component.config.backgroundPosition.y, 'background-image':'url('+compileUrl(attachmentPrefix+component.config.backgroundImage)+')', 'background-repeat':component.config.backgroundRepeat,'background-color': component.context.measureLinkSelected ? component.config.mLinkBgColor : component.config.backgroundColor, 'border-radius':component.config.borderRadius+'px', 'border-top': component.context.measureLinkSelected ? component.config.mLinkBorderTopSize+'px solid '+component.config.mLinkBorderTopColor : component.config.borderTopSize+'px solid '+component.config.borderTopColor, 'border-bottom': component.context.measureLinkSelected ? component.config.mLinkBorderBottomSize+'px solid '+component.config.mLinkBorderBottomColor : component.config.borderBottomSize+'px solid '+component.config.borderBottomColor, 'border-left': component.context.measureLinkSelected ? component.config.mLinkBorderLeftSize+'px solid '+component.config.mLinkBorderLeftColor : component.config.borderLeftSize+'px solid '+component.config.borderLeftColor, 'border-right': component.context.measureLinkSelected ? component.config.mLinkBorderRightSize+'px solid '+component.config.mLinkBorderRightColor : component.config.borderRightSize+'px solid '+component.config.borderRightColor, 'border-image-slice': component.config.borderImageSlice == null || component.config.borderImageSlice.length === 0 ? '14 fill' : component.config.borderImageSlice, 'border-image-source': compileFullUrl(attachmentPrefix+component.config.borderImageSource)}"> ``` 还有浮动后 如下图的位置  ``` <div class="box-content {{ component.config.showDh?component.config.animationContent.value:'' }}" ng-style="{'background-size':component.config.backgroundSize.x+' '+component.config.backgroundSize.y, 'background-position':component.config.backgroundPosition.x+' '+component.config.backgroundPosition.y, 'background-image':'url('+compileUrl(attachmentPrefix+component.config.backgroundImage)+')', 'background-repeat':component.config.backgroundRepeat,'background-color': component.config.backgroundColor, 'border-radius':component.config.borderRadius+'px', 'border-top': component.config.borderTopSize+'px solid '+component.config.borderTopColor, 'border-bottom': component.config.borderBottomSize+'px solid '+component.config.borderBottomColor, 'border-left': component.config.borderLeftSize+'px solid '+component.config.borderLeftColor, 'border-right': component.config.borderRightSize+'px solid '+component.config.borderRightColor, 'border-image-slice': component.config.borderImageSlice == null || component.config.borderImageSlice.length === 0 ? '14 fill' : component.config.borderImageSlice, 'border-image-source': compileFullUrl(attachmentPrefix+component.config.borderImageSource)}"> ```