Skip to content

X
Xts Acts

OpenHarmony / Xts Acts
1 年多 前同步成功

通知 9
Star 22
Fork 0
X
Xts Acts
提交 326c240e 编写于 作者: D dongwei
浏览文件
操作

add test cases 

Signed-off-by: Ndongwei <dongwei@kaihongdigi.com>
上级 8c223edc
隐藏空白更改
内联 并排
Showing with 587 addition and 48 deletion
ace/ace_standard/src/main/js/default/pages/animateTransform/index.css 已删除 100644 → 0
浏览文件 @ 8c223edc
/* 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
ace/ace_standard/src/main/js/default/pages/animateTransform/index.hml 已删除 100644 → 0
浏览文件 @ 8c223edc
<!-- xxx.hml -->
<div class="container">
<div class="back_container">
<svg>
<polygon points="60,30 90,90 30,90" fill="black">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0;
600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="green">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0;
600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0; 5; 0; 10" keyTimes="0;
0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="blue">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0;
600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="scale" values="1; 1.2; 1; 1.2"
keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="red">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0;
600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="scale" values="1; 1.2; 1; 1.2"
keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="skewX" values="0; 10; 0; 10"
keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
</svg>
</div>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/animateTransform/prop/index.css 0 → 100644
浏览文件 @ 326c240e
/**
* 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/animateTransform/prop/index.hml 0 → 100644
浏览文件 @ 326c240e
<!--/**
* 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">
animateTransform特有属性
</text>
<text class="sub-title">
标识属性 -- id
</text>
<svg class="svg-style">
<text y="10">
text
<animateTransform id="idProp"></animateTransform>
</text>
</svg>
<text class="sub-title">
动效的属性名的属性 -- attributeName
</text>
<svg class="svg-style">
<text y="10">
text
<animateTransform id="attributeNameProp" attributeName="x"></animateTransform>
<animateTransform id="attributeNamePropNone" attributeName=""></animateTransform>
</text>
</svg>
<text class="sub-title">
延迟时间属性 -- begin
</text>
<svg class="svg-style">
<text y="10">
text
<animateTransform id="beginProp" begin="1000"></animateTransform>
<animateTransform id="beginPropNone" begin=""></animateTransform>
</text>
</svg>
<text class="sub-title">
持续时间属性 -- dur
</text>
<svg class="svg-style">
<text y="10">
text
<animateTransform id="durProp" dur="1000"></animateTransform>
<animateTransform id="durPropNone" dur=""></animateTransform>
</text>
</svg>
<text class="sub-title">
结束时间属性 -- end
</text>
<svg class="svg-style">
<text y="10">
text
<animateTransform id="endProp" end="1000"></animateTransform>
<animateTransform id="endPropNone" end=""></animateTransform>
</text>
</svg>
<text class="sub-title">
动画播放次数属性 -- repeatCount
</text>
<svg class="svg-style">
<text y="10">
text
<animateTransform id="repeatCountProp" repeatCount="20"></animateTransform>
<animateTransform id="repeatCountPropNone" repeatCount=""></animateTransform>
</text>
</svg>
<text class="sub-title">
动画结束状态属性 -- fill
</text>
<svg class="svg-style">
<text y="10">
text
<animateTransform id="fillPropFreeze" fill="freeze"></animateTransform>
<animateTransform id="fillPropRemove" fill="remove"></animateTransform>
</text>
</svg>
<text class="sub-title">
动画插值模式属性 -- calcMode
</text>
<svg class="svg-style">
<text y="10">
text
<animateTransform id="calcModePropDiscrete" calcMode="discrete"></animateTransform>
<animateTransform id="calcModePropLinear" calcMode="linear"></animateTransform>
<animateTransform id="calcModePropPaced" calcMode="paced"></animateTransform>
<animateTransform id="calcModePropSpline" calcMode="spline"></animateTransform>
</text>
</svg>
<text class="sub-title">
关键帧时间属性 -- keyTimes
</text>
<svg class="svg-style">
<text y="10">
text
<animateTransform id="keyTimesProp" keyTimes="0.3;0.6;0,9"></animateTransform>
<animateTransform id="keyTimesPropNone" keyTimes=""></animateTransform>
</text>
</svg>
<text class="sub-title">
贝塞尔控制点属性 -- keySplines
</text>
<svg class="svg-style">
<text y="10">
text
<animateTransform id="keySplinesProp" keySplines="0.5 0 0.5 1"></animateTransform>
<animateTransform id="keySplinesPropNone" keySplines=""></animateTransform>
</text>
</svg>
<text class="sub-title">
动画偏移值属性 -- by
</text>
<svg class="svg-style">
<text y="10">
text
<animateTransform id="byProp" by="1"></animateTransform>
<animateTransform id="byPropNone" by=""></animateTransform>
</text>
</svg>
<text class="sub-title">
开始值属性 -- from
</text>
<svg class="svg-style">
<text y="10">
text
<animateTransform id="fromProp" from="10"></animateTransform>
<animateTransform id="fromPropNone" from=""></animateTransform>
</text>
</svg>
<text class="sub-title">
结束值属性 -- to
</text>
<svg class="svg-style">
<text y="10">
text
<animateTransform id="toProp" to="10"></animateTransform>
<animateTransform id="toPropNone" to=""></animateTransform>
</text>
</svg>
<text class="sub-title">
变化值属性 -- values
</text>
<svg class="svg-style">
<text y="10">
text
<animateTransform id="valuesProp" values="10;30"></animateTransform>
<animateTransform id="valuesPropNone" values=""></animateTransform>
</text>
</svg>
<text class="sub-title">
动画类型属性 -- type
</text>
<svg class="svg-style">
<text y="10">
text
<animateTransform id="typePropTranslate" type="translate"></animateTransform>
<animateTransform id="typePropScale" type="scale"></animateTransform>
<animateTransform id="typePropRotate" type="rotate"></animateTransform>
<animateTransform id="typePropSkewX" type="skewX"></animateTransform>
<animateTransform id="typePropSkewY" type="skewY"></animateTransform>
</text>
</svg>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/animateTransform/prop/index.js 0 → 100644
浏览文件 @ 326c240e
/**
* 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
},
}
ace/ace_standard/src/main/js/default/pages/animateTransform/router/index.css 0 → 100644
浏览文件 @ 326c240e
.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;
}
ace/ace_standard/src/main/js/default/pages/animateTransform/router/index.hml 0 → 100644
浏览文件 @ 326c240e
<div class="container">
<text class="container-title">
animateMotion动画效果
</text>
<div>
<div class="outerBox">
<text class="title">
动画效果1
</text>
<svg width="80" height="80" class="svg-style">
<circle cx="40" cy="40" r="20" stroke-width="4" fill="white" stroke="blue">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 100 120"
to="150 60 90" dur="3s" repeatCount="indefinite">
</animateTransform>
</circle>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果2
</text>
<svg width="80" height="80" class="svg-style">
<circle cx="30" cy="100" r="20" stroke-width="4" fill="white" stroke="blue">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0"
to="-100" dur="3s" repeatCount="1">
</animateTransform>
</circle>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果3
</text>
<svg width="80" height="80" class="svg-style">
<ellipse cx="50" cy="50" rx="30" ry="20" fill="blue">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="3s"
repeatCount="indefinite">
</animateTransform>
</ellipse>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果4
</text>
<svg width="80" height="80" class="svg-style">
<ellipse cx="50" cy="50" rx="30" ry="20" fill="blue">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="3s"
repeatCount="1" fill="freeze">
</animateTransform>
</ellipse>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果5
</text>
<svg width="80" height="80" class="svg-style">
<line x1="10" x2="90" y1="75" y2="75" stroke-width="10" stroke="black" stroke-linecap="square">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="100"
dur="3s" repeatCount="indefinite">
</animateTransform>
</line>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果6
</text>
<svg width="80" height="80" class="svg-style">
<line x1="10" x2="90" y1="35" y2="35" stroke-width="10" stroke="black" stroke-linecap="square">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 100"
dur="3s" repeatCount="indefinite">
</animateTransform>
</line>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果7
</text>
<svg width="80" height="80" class="svg-style">
<path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2"
d="M1,19 l17,-13 l7,23 m0,0 l13.5,33 l13.5 ,-43 m0,0 l32 ,-13 l42 ,13 m0,0 l10.75,93">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3"
dur="3s" repeatCount="indefinite">
</animateTransform>
</path>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果8
</text>
<svg width="80" height="80" class="svg-style">
<path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2"
d="M1,19 l17,-13 l7,23 m0,0 l13.5,33 l13.5 ,-43 m0,0 l32 ,-13 l42 ,13 m0,0 l10.75,93">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1 1" to="2 6"
dur="3s" repeatCount="indefinite">
</animateTransform>
</path>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果9
</text>
<svg width="80" height="80" class="svg-style">
<polygon points="10,20 40,40 30,60" fill="black">
<animateTransform attributeName="transform" attributeType="XML" type="skewX" from="10" to="80" dur="3s"
repeatCount="indefinite">
</animateTransform>
</polygon>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果10
</text>
<svg width="80" height="80" class="svg-style">
<polygon points="10,20 40,40 30,60" fill="black">
<animateTransform attributeName="transform" attributeType="XML" type="skewY" from="10" to="80" dur="3s"
repeatCount="indefinite">
</animateTransform>
</polygon>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果11
</text>
<svg width="80" height="80" class="svg-style">
<polyline points="10,80 50,80 50,80 60,80" fill="white" stroke="black">
<animateTransform attributeName="transform" attributeType="XML" type="skewX" from="0" to="80" dur="3s"
repeatCount="indefinite">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="skewY" from="150" to="90" dur="3s"
repeatCount="indefinite">
</animateTransform>
</polyline>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果12
</text>
<svg width="80" height="80" class="svg-style">
<rect width="100" height="100" x="25" y="25" stroke-width="10" stroke="red" rx="10" ry="10"
stroke-dasharray="5 3" stroke-dashoffset="3">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2"
dur="3s" repeatCount="indefinite">
</animateTransform>
<animate attributeName="stroke" from="red" to="#ff00ff" dur="3000" repeatCount="indefinite">
</animate>
</rect>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果13
</text>
<svg width="80" height="80" class="svg-style">
<text x="10" y="10" fill="#D2691E" font-size="12">
animateTransform
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="5"
dur="3s" repeatCount="indefinite">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 90"
dur="3s" repeatCount="indefinite">
</animateTransform>
</text>
</svg>
</div>
</div>
</div>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或