diff --git a/ace/ace_standard/src/main/js/default/pages/animateMotion/index.css b/ace/ace_standard/src/main/js/default/pages/animateMotion/index.css deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/ace/ace_standard/src/main/js/default/pages/animateMotion/index.hml b/ace/ace_standard/src/main/js/default/pages/animateMotion/index.hml deleted file mode 100644 index 0d9ddc7fbcbc4e2e9f390b69ca08429d4745505e..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/animateMotion/index.hml +++ /dev/null @@ -1,19 +0,0 @@ - -
- - - - - - - - - - - - - - - - -
\ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/animateMotion/prop/index.css b/ace/ace_standard/src/main/js/default/pages/animateMotion/prop/index.css new file mode 100644 index 0000000000000000000000000000000000000000..89dc0400e967edd60d21ba8d70c761419dcda1f3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateMotion/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/animateMotion/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/animateMotion/prop/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..1a04615d28a76a91a5284a30ce02741a750a892e --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateMotion/prop/index.hml @@ -0,0 +1,184 @@ + + +
+
+ + animateMotion特有属性 + + + 标识属性 -- id + + + + + + + + + + 动效的属性名的属性 -- attributeName + + + + + + + + + + 延迟时间属性 -- begin + + + + + + + + + + 持续时间属性 -- dur + + + + + + + + + + 结束时间属性 -- end + + + + + + + + + + 动画播放次数属性 -- repeatCount + + + + + + + + + + 动画结束状态属性 -- fill + + + + + + + + + + 动画插值模式属性 -- calcMode + + + + + + + + + + + + 关键帧时间属性 -- keyTimes + + + + + + + + + + 贝塞尔控制点属性 -- keySplines + + + + + + + + + + 动画偏移值属性 -- by + + + + + + + + + + 开始值属性 -- from + + + + + + + + + + 结束值属性 -- to + + + + + + + + + + 关键帧点距离属性 -- keyPoints + + + + + + + + + + 运动路径属性 -- path + + + + + + + + + + 动画对象旋转方向属性 -- rotate + + + + + + + + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/animateMotion/prop/index.js b/ace/ace_standard/src/main/js/default/pages/animateMotion/prop/index.js new file mode 100644 index 0000000000000000000000000000000000000000..55fdc258ac93eda444418d1d9280444be193d811 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateMotion/prop/index.js @@ -0,0 +1,136 @@ +/** + * 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, + keyPointsProp : null, + keyPointsPropNone : null, + pathProp : null, + pathPropNone : null, + rotatePropRotate : null, + rotatePropAutoReverse : null, + rotatePropNumber : 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, + keyPointsProp : this.keyPointsProp, + keyPointsPropNone : this.keyPointsPropNone, + pathProp : this.pathProp, + pathPropNone : this.pathPropNone, + + rotatePropRotate : this.rotatePropRotate, + rotatePropAutoReverse : this.rotatePropAutoReverse, + rotatePropNumber : this.rotatePropNumber, + } + }, + + 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.keyPointsProp = this.$element("keyPointsProp").getInspector() + this.keyPointsPropNone = this.$element("keyPointsPropNone").getInspector() + this.pathProp = this.$element("pathProp").getInspector() + this.pathPropNone = this.$element("pathPropNone").getInspector() + this.rotatePropRotate = this.$element("rotatePropRotate").getInspector() + this.rotatePropAutoReverse = this.$element("rotatePropAutoReverse").getInspector() + this.rotatePropNumber = this.$element("rotatePropNumber").getInspector() + return + }, +} diff --git a/ace/ace_standard/src/main/js/default/pages/animateMotion/router/index.css b/ace/ace_standard/src/main/js/default/pages/animateMotion/router/index.css new file mode 100644 index 0000000000000000000000000000000000000000..44501c2c90169ebdaaadb5e63c9267abda126cb9 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateMotion/router/index.css @@ -0,0 +1,22 @@ +.container { + width: 100%; + flex-direction: column; + align-items: center; +} +.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; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/animateMotion/router/index.hml b/ace/ace_standard/src/main/js/default/pages/animateMotion/router/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..c1376e044cd67696fc5e5720e9647a17b4b74758 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateMotion/router/index.hml @@ -0,0 +1,57 @@ +
+ + animateMotion动画效果 + +
+
+ + 动画效果1 + + + + + + + > + +
+
+ + 动画效果2 + + + + + + + + +
+
+
+
+ + 动画效果3 + + + + + + + + +
+
+ + 动画效果4 + + + + + + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/animateMotion/index.js b/ace/ace_standard/src/main/js/default/pages/animateMotion/router/index.js similarity index 94% rename from ace/ace_standard/src/main/js/default/pages/animateMotion/index.js rename to ace/ace_standard/src/main/js/default/pages/animateMotion/router/index.js index 7326f4bafb3dc62a81b1d676ec84535353ee8f29..5f7728fdfc32729af96180ba1c3abab0e0894f94 100644 --- a/ace/ace_standard/src/main/js/default/pages/animateMotion/index.js +++ b/ace/ace_standard/src/main/js/default/pages/animateMotion/router/index.js @@ -14,7 +14,4 @@ */ export default { - data: { - title: 'World' - } }