add test cases

Signed-off-by: Ndongwei <dongwei@kaihongdigi.com>

ace/ace_standard/src/main/js/default/pages/animateMotion/index.hml

-<!-- xxx.hml -->
-<div class="container">
-    <svg fill="white" width="400" height="400">
-        <path fill="none" stroke="blue" stroke-width="3" d="m40,60 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
-        <path fill="none" stroke="blue" stroke-width="3" d="m40,130 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
-        <path fill="none" stroke="blue" stroke-width="3" d="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
-        <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
-            <animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m40,60 c0,-100 160,160,100 160,0 c0,-100,-160,100 -160,0 z">
-            </animateMotion>
-        </path>
-        <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
-            <animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse"path="m40,130 c0,-100 160,100 160,0 c0,-100,-160,100 -160,0 z">
-            </animateMotion>
-        </path>
-        <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
-            <animateMotion dur="2000" repeatCount="indefinite" rotate="45"path="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></animateMotion>
-        </path>
-    </svg>
-</div>
\ No newline at end of file

ace/ace_standard/src/main/js/default/pages/animateMotion/prop/index.css

+/**
+ * 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

ace/ace_standard/src/main/js/default/pages/animateMotion/prop/index.hml

+<!--/**
+ * 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.
+ */-->
+
+<div class="container">
+    <div class="specific-container">
+        <text class="title">
+            animateMotion特有属性
+        </text>
+        <text class="sub-title">
+            标识属性 -- id
+        </text>
+        <svg class="svg-style">
+            <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                <animateMotion id="idProp">
+                </animateMotion>
+            </path>
+        </svg>
+
+        <text class="sub-title">
+            动效的属性名的属性 -- attributeName
+        </text>
+        <svg class="svg-style">
+            <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                <animateMotion id="attributeNameProp" attributeName="x"></animateMotion>
+                <animateMotion id="attributeNamePropNone" attributeName=""></animateMotion>
+            </path>
+        </svg>
+
+        <text class="sub-title">
+            延迟时间属性 -- begin
+        </text>
+        <svg class="svg-style">
+            <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                <animateMotion id="beginProp" begin="1000"></animateMotion>
+                <animateMotion id="beginPropNone" begin=""></animateMotion>
+            </path>
+        </svg>
+
+        <text class="sub-title">
+            持续时间属性 -- dur
+        </text>
+        <svg class="svg-style">
+            <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                <animateMotion id="durProp" dur="1000"></animateMotion>
+                <animateMotion id="durPropNone" dur=""></animateMotion>
+            </path>
+        </svg>
+
+        <text class="sub-title">
+            结束时间属性 -- end
+        </text>
+        <svg class="svg-style">
+            <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                <animateMotion id="endProp" end="1000"></animateMotion>
+                <animateMotion id="endPropNone" end=""></animateMotion>
+            </path>
+        </svg>
+
+        <text class="sub-title">
+            动画播放次数属性 -- repeatCount
+        </text>
+        <svg class="svg-style">
+            <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                <animateMotion id="repeatCountProp" repeatCount="20"></animateMotion>
+                <animateMotion id="repeatCountPropNone" repeatCount=""></animateMotion>
+            </path>
+        </svg>
+
+        <text class="sub-title">
+            动画结束状态属性 -- fill
+        </text>
+        <svg class="svg-style">
+            <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                <animateMotion id="fillPropFreeze" fill="freeze"></animateMotion>
+                <animateMotion id="fillPropRemove" fill="remove"></animateMotion>
+            </path>
+        </svg>
+
+        <text class="sub-title">
+            动画插值模式属性 -- calcMode
+        </text>
+        <svg class="svg-style">
+            <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                <animateMotion id="calcModePropDiscrete" calcMode="discrete"></animateMotion>
+                <animateMotion id="calcModePropLinear" calcMode="linear"></animateMotion>
+                <animateMotion id="calcModePropPaced" calcMode="paced"></animateMotion>
+                <animateMotion id="calcModePropSpline" calcMode="spline"></animateMotion>
+            </path>
+        </svg>
+
+        <text class="sub-title">
+            关键帧时间属性 -- keyTimes
+        </text>
+        <svg class="svg-style">
+            <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                <animateMotion id="keyTimesProp" keyTimes="0.3;0.6;0,9"></animateMotion>
+                <animateMotion id="keyTimesPropNone" keyTimes=""></animateMotion>
+            </path>
+        </svg>
+
+        <text class="sub-title">
+            贝塞尔控制点属性 -- keySplines
+        </text>
+        <svg class="svg-style">
+            <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                <animateMotion id="keySplinesProp" keySplines="0.5 0 0.5 1"></animateMotion>
+                <animateMotion id="keySplinesPropNone" keySplines=""></animateMotion>
+            </path>
+        </svg>
+
+        <text class="sub-title">
+            动画偏移值属性 -- by
+        </text>
+        <svg class="svg-style">
+            <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                <animateMotion id="byProp" by="1"></animateMotion>
+                <animateMotion id="byPropNone" by=""></animateMotion>
+            </path>
+        </svg>
+
+        <text class="sub-title">
+            开始值属性 -- from
+        </text>
+        <svg class="svg-style">
+            <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                <animateMotion id="fromProp" from="10"></animateMotion>
+                <animateMotion id="fromPropNone" from=""></animateMotion>
+            </path>
+        </svg>
+
+        <text class="sub-title">
+            结束值属性 -- to
+        </text>
+        <svg class="svg-style">
+            <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                <animateMotion id="toProp" to="10"></animateMotion>
+                <animateMotion id="toPropNone" to=""></animateMotion>
+            </path>
+        </svg>
+
+        <text class="sub-title">
+            关键帧点距离属性 -- keyPoints
+        </text>
+        <svg class="svg-style">
+            <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                <animateMotion id="keyPointsProp" keyPoints="0;0.2;0.4;0.6;0.8;1"></animateMotion>
+                <animateMotion id="keyPointsPropNone" keyPoints=""></animateMotion>
+            </path>
+        </svg>
+
+        <text class="sub-title">
+            运动路径属性 -- path
+        </text>
+        <svg class="svg-style">
+            <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                <animateMotion id="pathProp" path="m40,130 c0,-100 160,100 160,0 c0,-100,-160,100 -160,0 z"></animateMotion>
+                <animateMotion id="pathPropNone" path=""></animateMotion>
+            </path>
+        </svg>
+
+        <text class="sub-title">
+            动画对象旋转方向属性 -- rotate
+        </text>
+        <svg class="svg-style">
+            <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                <animateMotion id="rotatePropRotate" rotate="rotate"></animateMotion>
+                <animateMotion id="rotatePropAutoReverse" rotate="auto-reverse"></animateMotion>
+                <animateMotion id="rotatePropNumber" rotate="45"></animateMotion>
+            </path>
+        </svg>
+    </div>
+</div>

ace/ace_standard/src/main/js/default/pages/animateMotion/prop/index.js

+/**
+ * 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
+    },
+}

ace/ace_standard/src/main/js/default/pages/animateMotion/router/index.css

+.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

ace/ace_standard/src/main/js/default/pages/animateMotion/router/index.hml

+<div class="container">
+    <text class="container-title">
+        animateMotion动画效果
+    </text>
+    <div>
+        <div class="outerBox">
+            <text class="title">
+                动画效果1
+            </text>
+            <svg width="150" height="120" class="svg-style">
+                <path fill="none" stroke="blue" stroke-width="3" d="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z"></path>
+                <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                    <animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z">
+                    </animateMotion>
+                </path>>
+            </svg>
+        </div>
+        <div class="outerBox">
+            <text class="title">
+                动画效果2
+            </text>
+            <svg width="150" height="120" class="svg-style">
+                <path fill="none" stroke="blue" stroke-width="3" d="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z"></path>
+                <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                    <animateMotion dur="2000" repeatCount="1" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z">
+                    </animateMotion>
+                </path>
+            </svg>
+        </div>
+    </div>
+    <div>
+        <div class="outerBox">
+            <text class="title">
+                动画效果3
+            </text>
+            <svg width="150" height="120" class="svg-style">
+                <path fill="none" stroke="blue" stroke-width="3" d="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z"></path>
+                <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                    <animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse" path="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z">
+                    </animateMotion>
+                </path>
+            </svg>
+        </div>
+        <div class="outerBox">
+            <text class="title">
+                动画效果4
+            </text>
+            <svg width="150" height="120" class="svg-style">
+                <path fill="none" stroke="blue" stroke-width="3" d="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z"></path>
+                <path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
+                    <animateMotion dur="2000" repeatCount="1" fill="freeze" rotate="5" path="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120, 0 z">
+                    </animateMotion>
+                </path>
+            </svg>
+        </div>
+    </div>
+</div>

ace/ace_standard/src/main/js/default/pages/animateMotion/index.js → ace/ace_standard/src/main/js/default/pages/animateMotion/router/index.js

@@ -14,7 +14,4 @@
  */
 
 export default {
-    data: {
-        title: 'World'
-    }
 }