diff --git a/ace/ace_standard/src/main/js/default/pages/animateTransform/index.css b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.css deleted file mode 100644 index c559fb041924e682782f7d7afbc9e0591dbda708..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/animateTransform/index.css +++ /dev/null @@ -1,14 +0,0 @@ -/* xxx.css */ -.container { - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - background-color: #f8f8ff; -} -.back_container { - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - height: 1000px; - width: 1080px; -} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/animateTransform/index.hml b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.hml deleted file mode 100644 index 3c27430c1df4d393d65c31c26509e504a6df8199..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/animateTransform/index.hml +++ /dev/null @@ -1,31 +0,0 @@ - -
-
- - - - - - - - - - - - - - - - - - -
-
\ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/animateTransform/prop/index.css b/ace/ace_standard/src/main/js/default/pages/animateTransform/prop/index.css new file mode 100644 index 0000000000000000000000000000000000000000..89dc0400e967edd60d21ba8d70c761419dcda1f3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateTransform/prop/index.css @@ -0,0 +1,54 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: center; + margin: 2px; + padding: 2px; +} + +.svg-style{ + width: 100px; + flex-weight: 1; + background-color: #eee; +} + +.prop-container{ + flex-direction: column; + flex-weight: 1; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; + align-items: center; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/animateTransform/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/animateTransform/prop/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..0d59b22f1770e3c21e9e9af6db4a055e21c070c8 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateTransform/prop/index.hml @@ -0,0 +1,190 @@ + + +
+
+ + animateTransform特有属性 + + + 标识属性 -- id + + + + text + + + + + + 动效的属性名的属性 -- attributeName + + + + text + + + + + + + 延迟时间属性 -- begin + + + + text + + + + + + + 持续时间属性 -- dur + + + + text + + + + + + + 结束时间属性 -- end + + + + text + + + + + + + 动画播放次数属性 -- repeatCount + + + + text + + + + + + + 动画结束状态属性 -- fill + + + + text + + + + + + + 动画插值模式属性 -- calcMode + + + + text + + + + + + + + + 关键帧时间属性 -- keyTimes + + + + text + + + + + + + 贝塞尔控制点属性 -- keySplines + + + + text + + + + + + + 动画偏移值属性 -- by + + + + text + + + + + + + 开始值属性 -- from + + + + text + + + + + + + 结束值属性 -- to + + + + text + + + + + + + 变化值属性 -- values + + + + text + + + + + + + 动画类型属性 -- type + + + + text + + + + + + + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/animateTransform/prop/index.js b/ace/ace_standard/src/main/js/default/pages/animateTransform/prop/index.js new file mode 100644 index 0000000000000000000000000000000000000000..7ccb0659d720e38d8369619120cba6883861cb80 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateTransform/prop/index.js @@ -0,0 +1,135 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import prompt from '@system.prompt'; + +export default { + data:{ + listOne:[{}], + listThree:[{},{},{}], + idProp : null, + attributeNameProp : null, + attributeNamePropNone: null, + beginProp : null, + beginPropNone : null, + durProp : null, + durPropNone : null, + endProp : null, + endPropNone: null, + repeatCountProp : null, + repeatCountPropNone : null, + fillPropFreeze : null, + fillPropRemove : null, + calcModePropDiscrete : null, + calcModePropLinear: null, + calcModePropPaced : null, + calcModePropSpline: null, + keyTimesProp : null, + keyTimesPropNone : null, + keySplinesProp : null, + keySplinesPropNone : null, + byProp : null, + byPropNone : null, + fromProp : null, + fromPropNone : null, + toProp : null, + toPropNone : null, + valuesProp : null, + valuesPropNone : null, + typePropTranslate : null, + typePropScale : null, + typePropRotate : null, + typePropSkewX : null, + typePropSkewY : null, + }, + + onShow(){ + this.getCommonPropValues(); + globalThis.value = { + idProp : this.idProp, + attributeNameProp : this.attributeNameProp, + attributeNamePropNone: this.attributeNamePropNone, + beginProp : this.beginProp, + beginPropNone : this.beginPropNone, + durProp : this.durProp, + durPropNone : this.durPropNone, + endProp : this.endProp, + endPropNone: this.endPropNone, + repeatCountProp : this.repeatCountProp, + repeatCountPropNone : this.repeatCountPropNone, + fillPropFreeze : this.fillPropFreeze, + fillPropRemove : this.fillPropRemove, + calcModePropDiscrete : this.calcModePropDiscrete, + calcModePropLinear : this.calcModePropLinear, + calcModePropPaced : this.calcModePropPaced, + calcModePropSpline : this.calcModePropSpline, + keyTimesProp : this.keyTimesProp, + keyTimesPropNone : this.keyTimesPropNone, + keySplinesProp : this.keySplinesProp, + keySplinesPropNone : this.keySplinesPropNone, + byProp : this.byProp, + byPropNone : this.byPropNone, + fromProp : this.fromProp, + fromPropNone : this.fromPropNone, + toProp : this.toProp, + toPropNone : this.toPropNone, + valuesProp : this.valuesProp, + valuesPropNone : this.valuesPropNone, + typePropTranslate : this.typePropTranslate, + typePropScale : this.typePropScale, + typePropRotate : this.typePropRotate, + typePropSkewX : this.typePropSkewX, + typePropSkewY : this.typePropSkewY, + } + }, + + getCommonPropValues(){ + this.idProp = this.$element("idProp").getInspector() + this.attributeNameProp = this.$element("attributeNameProp").getInspector() + this.attributeNamePropNone = this.$element("attributeNamePropNone").getInspector() + this.beginProp = this.$element("beginProp").getInspector() + this.beginPropNone = this.$element("beginPropNone").getInspector() + this.durProp = this.$element("durProp").getInspector() + this.durPropNone = this.$element("durPropNone").getInspector() + this.endProp = this.$element("endProp").getInspector() + this.endPropNone = this.$element("endPropNone").getInspector() + this.repeatCountProp = this.$element("repeatCountProp").getInspector() + this.repeatCountPropNone = this.$element("repeatCountPropNone").getInspector() + this.fillPropFreeze = this.$element("fillPropFreeze").getInspector() + this.fillPropRemove = this.$element("fillPropRemove").getInspector() + this.calcModePropDiscrete = this.$element("calcModePropDiscrete").getInspector() + this.calcModePropLinear = this.$element("calcModePropLinear").getInspector() + this.calcModePropPaced = this.$element("calcModePropPaced").getInspector() + this.calcModePropSpline = this.$element("calcModePropSpline").getInspector() + this.keyTimesProp = this.$element("keyTimesProp").getInspector() + this.keyTimesPropNone = this.$element("keyTimesPropNone").getInspector() + this.keySplinesProp = this.$element("keySplinesProp").getInspector() + this.keySplinesPropNone = this.$element("keySplinesPropNone").getInspector() + this.byProp = this.$element("byProp").getInspector() + this.byPropNone = this.$element("byPropNone").getInspector() + this.fromProp = this.$element("fromProp").getInspector() + this.fromPropNone = this.$element("fromPropNone").getInspector() + this.toProp = this.$element("toProp").getInspector() + this.toPropNone = this.$element("toPropNone").getInspector() + this.valuesProp = this.$element("valuesProp").getInspector() + this.valuesPropNone = this.$element("valuesPropNone").getInspector() + this.typePropTranslate = this.$element("typePropTranslate").getInspector() + this.typePropScale = this.$element("typePropScale").getInspector() + this.typePropRotate = this.$element("typePropRotate").getInspector() + this.typePropSkewX = this.$element("typePropSkewX").getInspector() + this.typePropSkewY = this.$element("typePropSkewY").getInspector() + return + }, +} diff --git a/ace/ace_standard/src/main/js/default/pages/animateTransform/router/index.css b/ace/ace_standard/src/main/js/default/pages/animateTransform/router/index.css new file mode 100644 index 0000000000000000000000000000000000000000..59e8734e51a8c6343fc87b261804f0f669009fee --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateTransform/router/index.css @@ -0,0 +1,23 @@ +.container { + width: 100%; + flex-direction: column; + align-items: center; + padding-bottom: 40px; +} +.container-title{ + font-size: 26px; + font-weight: 600; + padding: 16px; +} +.title{ + font-size: 18px; + color: grey; + padding: 5px; + text-align: center; +} +.svg-style{ + border: 1px solid #000000; +} +.outerBox{ + flex-direction: column; +} diff --git a/ace/ace_standard/src/main/js/default/pages/animateTransform/router/index.hml b/ace/ace_standard/src/main/js/default/pages/animateTransform/router/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..81c8486a85262fec52893c048d236cf05261a89a --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateTransform/router/index.hml @@ -0,0 +1,185 @@ +
+ + animateMotion动画效果 + +
+
+ + 动画效果1 + + + + + + + +
+
+ + 动画效果2 + + + + + + + +
+
+
+
+ + 动画效果3 + + + + + + + +
+
+ + 动画效果4 + + + + + + + +
+
+
+
+ + 动画效果5 + + + + + + + +
+
+ + 动画效果6 + + + + + + + +
+
+
+
+ + 动画效果7 + + + + + + + +
+
+ + 动画效果8 + + + + + + + +
+
+
+
+ + 动画效果9 + + + + + + + +
+
+ + 动画效果10 + + + + + + + +
+
+
+
+ + 动画效果11 + + + + + + + + + +
+
+ + 动画效果12 + + + + + + + + + +
+
+ + 动画效果13 + + + + animateTransform + + + + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/animateTransform/index.js b/ace/ace_standard/src/main/js/default/pages/animateTransform/router/index.js similarity index 94% rename from ace/ace_standard/src/main/js/default/pages/animateTransform/index.js rename to ace/ace_standard/src/main/js/default/pages/animateTransform/router/index.js index 7326f4bafb3dc62a81b1d676ec84535353ee8f29..5f7728fdfc32729af96180ba1c3abab0e0894f94 100644 --- a/ace/ace_standard/src/main/js/default/pages/animateTransform/index.js +++ b/ace/ace_standard/src/main/js/default/pages/animateTransform/router/index.js @@ -14,7 +14,4 @@ */ export default { - data: { - title: 'World' - } }