路徑 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)}"> ```