diff --git a/ace/ace_standard/src/main/js/default/pages/animate/index.hml b/ace/ace_standard/src/main/js/default/pages/animate/index.hml deleted file mode 100644 index 590a28a1fc50a39bfc1f57783e659cc53741542d..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/animate/index.hml +++ /dev/null @@ -1,27 +0,0 @@ - -
- - - - - - - - - - - - - - - - - - - - - - - - -
\ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/animate/prop/index.css b/ace/ace_standard/src/main/js/default/pages/animate/prop/index.css new file mode 100644 index 0000000000000000000000000000000000000000..89dc0400e967edd60d21ba8d70c761419dcda1f3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animate/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/animate/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/animate/prop/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..65fb15cd4c67bd5ff28cdc41f6627eb4a6cf1d30 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animate/prop/index.hml @@ -0,0 +1,189 @@ + + +
+
+ + animate特有属性 + + + 标识属性 -- 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 + + + + + + + 特有属性 -- animate + + + + text + + + + + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/animate/prop/index.js b/ace/ace_standard/src/main/js/default/pages/animate/prop/index.js new file mode 100644 index 0000000000000000000000000000000000000000..fdcc1d20144b7bcf474cb23f98e9fa1e6e139a83 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animate/prop/index.js @@ -0,0 +1,120 @@ +/** + * 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, + }, + + 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, + } + }, + + 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() + return + }, +} diff --git a/ace/ace_standard/src/main/js/default/pages/animate/index.css b/ace/ace_standard/src/main/js/default/pages/animate/router/index.css similarity index 76% rename from ace/ace_standard/src/main/js/default/pages/animate/index.css rename to ace/ace_standard/src/main/js/default/pages/animate/router/index.css index ffdc1d5b9cb8ad5ed3bdb3d44e57389b07de6cf0..cb60c91888dca0262e8f97ba2148235500d587d3 100644 --- a/ace/ace_standard/src/main/js/default/pages/animate/index.css +++ b/ace/ace_standard/src/main/js/default/pages/animate/router/index.css @@ -3,6 +3,11 @@ flex-direction: column; align-items: center; } +.container-title{ + font-size: 26px; + font-weight: 600; + padding: 16px; +} .title{ font-size: 18px; color: grey; diff --git a/ace/ace_standard/src/main/js/default/pages/animate/router/index.hml b/ace/ace_standard/src/main/js/default/pages/animate/router/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..e04f7d5f88915d0662b8035f4d3c8168c8c7cf31 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animate/router/index.hml @@ -0,0 +1,95 @@ +
+ + animate动画效果 + +
+
+ + 动画效果1 + + + + + + + + + +
+
+ + 动画效果2 + + + + + + + +
+
+
+
+ + 动画效果3 + + + + animate + + + + + + + + +
+
+ + 动画效果4 + + + + + + animate + + + + + +
+
+
+
+ + 动画效果5 + + + + + + + +
+
+ + 动画效果6 + + + + + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/animate/index.js b/ace/ace_standard/src/main/js/default/pages/animate/router/index.js similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/animate/index.js rename to ace/ace_standard/src/main/js/default/pages/animate/router/index.js