Skip to content

X
Xts Acts

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

通知 9
Star 22
Fork 0
X
Xts Acts
未验证 提交 0e226f17 编写于 作者: B bayanxing 提交者： Gitee
浏览文件
操作

!21 add test cases 

Merge pull request !21 from zhaojunxia/xts_acts_dev
上级 27554659 b7cafd58
展开全部 隐藏空白更改
内联 并排
Showing with 2047 addition and 196 deletion
ace/ace_standard/src/main/js/default/pages/imageAnimator/prop/index.css 0 → 100644
浏览文件 @ 0e226f17
/**
* 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: left;
margin: 2px;
padding: 2px;
}
.prop-container{
flex-direction: column;
flex-weight: 1;
}
#idProp {
flex-weight: 1;
background-color:#f00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
.classProp {
flex-weight: 1;
background-color:#0f0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#classPropNone {
flex-weight: 1;
background-color:#0000e0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#refProp {
flex-weight: 1;
background-color:#00f000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#refPropNone {
flex-weight: 1;
background-color:#00000e;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#disabledPropTrue {
flex-weight: 1;
background-color:#000f00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#disabledPropFalse {
flex-weight: 1;
background-color:#0000f0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#disabledPropNone {
flex-weight: 1;
background-color:#d00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#focusablePropTrue {
flex-weight: 1;
background-color:#00000f;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#focusablePropFalse {
flex-weight: 1;
background-color:#ff0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#focusablePropNone {
flex-weight: 1;
background-color:#0d0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dataProp {
flex-weight: 1;
background-color:#0ff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dataPropNone {
flex-weight: 1;
background-color:#00d000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropSmall {
height: 15px;
background-color:#00ff00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropMedium {
height: 15px;
background-color:#000ff0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropLarge {
height: 15px;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropNone{
height: 15px;
background-color:#000d00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropRtl {
flex-weight: 1;
background-color:#0fff00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropAuto {
flex-weight: 1;
background-color:#00fff0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropLtr {
flex-weight: 1;
background-color:#000fff;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropNone {
flex-weight: 1;
background-color:#0000d0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#forPropNull {
flex-weight: 1;
background-color:#ffff00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#forPropOne {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#forPropThree {
flex-weight: 1;
background-color:#000e00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#ifPropTrue {
flex-weight: 1;
background-color:#0ffff0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#ifPropFalse {
flex-weight: 1;
background-color:#00ffff;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#ifPropNone {
flex-weight: 1;
background-color:#00000d;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showPropTrue {
flex-weight: 1;
background-color:#e00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showPropFalse {
flex-weight: 1;
background-color:#0e0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showPropNone {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
.specific-container{
flex-direction: column;
flex-weight: 1;
}
#typePredecode0{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeImage{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
margin-bottom: 4px;
padding-end: 10px;
}
#typeImage{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeDuration3{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeDuration6{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeIterationInfi{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeIteration3{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeReverseTrue{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeReverseFalse{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeFixedsizeTrue{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeFixedsizeFalse{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeFillmodeForwards{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeFillmodeNone{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
ace/ace_standard/src/main/js/default/pages/imageAnimator/prop/index.hml 0 → 100644
浏览文件 @ 0e226f17
<!--/**
* 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="prop-container">
<text class="title">
img-animator通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<image-animator images="" duration="" id="idProp">
</image-animator>
<text class="sub-title">
通用属性 -- class
</text>
<image-animator images="" duration="" id="classProp"
class="classProp">
</image-animator>
<image-animator images="" duration="" id="classPropNone"
class="">
</image-animator>
<text class="sub-title">
通用属性 -- style
</text>
<image-animator images="" duration="" id="styleProp"
style="width:10%;height:20px;background-color:red">
</image-animator>
<text class="sub-title">
通用属性 -- ref
</text>
<image-animator images="" duration="" id="refProp"
ref="refProp">
</image-animator>
<image-animator images="" duration="" id="refPropNone"
ref="">
</image-animator>
<text class="sub-title">
通用属性 -- disabled
</text>
<image-animator images="" duration="" id="disabledPropTrue"
disabled="true">
</image-animator>
<image-animator images="" duration="" id="disabledPropFalse"
disabled="false">
</image-animator>
<image-animator images="" duration="" id="disabledPropNone"
disabled="">
</image-animator>
<text class="sub-title">
通用属性 -- focusable
</text>
<image-animator images="" duration="" id="focusablePropTrue"
focusable="true">
</image-animator>
<image-animator images="" duration="" id="focusablePropFalse"
focusable="false">
</image-animator>
<image-animator images="" duration="" id="focusablePropNone"
focusable="">
</image-animator>
<text class="sub-title">
通用属性 -- data-*
</text>
<image-animator images="" duration="" id="dataProp"
data-imageAnimator="通用属性 -- data-*">
</image-animator>
<image-animator images="" duration="" id="dataPropNone"
data-imageAnimator="">
</image-animator>
<text class="sub-title">
通用属性 -- click-effect
</text>
<image-animator images="" duration="" id="clickEffectPropSmall"
click-effect="spring-small">
</image-animator>
<image-animator images="" duration="" id="clickEffectPropMedium"
click-effect="spring-medium">
</image-animator>
<image-animator images="" duration="" id="clickEffectPropLarge"
click-effect="spring-large">
</image-animator>
<image-animator images="" duration="" id="clickEffectPropNone"
click-effect="">
</image-animator>
<text class="sub-title">
通用属性 -- dir
</text>
<image-animator images="" duration="" id="dirPropRtl"
dir="rtl">
</image-animator>
<image-animator images="" duration="" id="dirPropAuto"
dir="auto">
</image-animator>
<image-animator images="" duration="" id="dirPropLtr"
dir="ltr">
</image-animator>
<image-animator images="" duration="" id="dirPropNone"
dir="">
</image-animator>
<text class="sub-title">
渲染属性 -- for
</text>
<image-animator images="" duration="" id="forPropNull"
for="">
</image-animator>
<image-animator images="" duration="" id="forPropOne"
for="{{listOne}}">
</image-animator>
<image-animator images="" duration="" id="forPropThree"
for="{{listThree}}">
</image-animator>
<text class="sub-title">
渲染属性 -- if
</text>
<image-animator images="" duration="" id="ifPropTrue"
if="true">
</image-animator>
<image-animator images="" duration="" id="ifPropFalse"
if="false">
</image-animator>
<image-animator images="" duration="" id="ifPropNone"
if="">
</image-animator>
<text class="sub-title">
渲染属性 -- show
</text>
<image-animator images="" duration="" id="showPropTrue"
show="true">
</image-animator>
<image-animator images="" duration="" id="showPropFalse"
show="false">
</image-animator>
<image-animator images="" duration="" id="showPropNone"
show="false">
</image-animator>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
imageAnimator特有属性-image
</text>
<image-animator images="" duration="" id="typeImageNull"
>
</image-animator>
<image-animator images="{{images}}" duration="3s" id="typeImage"
>
</image-animator>
<text class="title">
imageAnimator特有属性-duration
</text>
<image-animator images="" duration="" id="typeDurationNull"
>
</image-animator>
<image-animator images="" duration="3s" id="typeDuration3"
>
</image-animator>
<image-animator images="" duration="6s" id="typeDuration6"
>
</image-animator>
<text class="title">
imageAnimator特有属性-predecode
</text>
<image-animator images="" predecode="2" duration="" id="typePredecode2"
>
</image-animator>
<text class="title">
imageAnimator特有属性-iteration
</text>
<image-animator images="" duration="" iteration="infinite" id="typeIterationInfi"
>
</image-animator>
<image-animator images="" duration="" iteration="3" id="typeIteration3"
>
</image-animator>
<text class="title">
imageAnimator特有属性-reverse
</text>
<image-animator images="" duration="" reverse="" id="typeReverseNull"
>
</image-animator>
<image-animator images="" duration="" reverse="true" id="typeReverseTrue"
>
</image-animator>
<image-animator images="" duration="" reverse="false" id="typeReverseFalse"
>
</image-animator>
<text class="title">
imageAnimator特有属性-fixedsize
</text>
<image-animator images="" duration="" fixedsize="" id="typeFixedsizeNull"
>
</image-animator>
<image-animator images="" duration="" fixedsize="true" id="typeFixedsizeTrue"
>
</image-animator>
<image-animator images="" duration="" fixedsize="false" id="typeFixedsizeFalse"
>
</image-animator>
<text class="title">
imageAnimator特有属性-fillmode
</text>
<image-animator images="" duration="" fillmode="forwards" id="typeFillmodeNull"
>
</image-animator>
<image-animator images="" duration="" fillmode="forwards" id="typeFillmodeForwards"
>
</image-animator>
<image-animator images="" duration="" fillmode="none" id="typeFillmodeNone"
>
</image-animator>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/imageAnimator/prop/index.js 0 → 100644
浏览文件 @ 0e226f17
/**
* 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:{
images: [
{src: "/common/images/im-ani1.jpg"},
{src: "/common/images/im-ani2.jpg"},
{src: "/common/images/im-ani3.jpg"}
],
listOne:[{}],
listThree:[{},{},{}],
idProp : null,
classProp : null,
classPropNone : null,
styleProp : null,
refProp : null,
refPropNone : null,
disabledPropTrue : null,
disabledPropFalse : null,
disabledPropNone : null,
focusablePropTrue : null,
focusablePropFalse : null,
focusablePropNone : null,
dataProp : null,
dataPropNone : null,
clickEffectPropSmall : null,
clickEffectPropMedium : null,
clickEffectPropLarge : null,
clickEffectPropNone : null,
dirPropRtl : null,
dirPropAuto : null,
dirPropLtr : null,
dirPropNone : null,
forPropNull : null,
forPropOne : null,
forPropThree : null,
ifPropTrue : null,
showPropTrue : null,
showPropFalse : null,
showPropNone : null,
typeImage : null,
typeImageNull : null,
typePredecode2 : null,
typeIterationInfi : null,
typeIteration3 : null,
typeReverseNull : null,
typeReverseTrue : null,
typeReverseFalse : null,
typeFixedsizeNull : null,
typeFixedsizeTrue : null,
typeFixedsizeFalse : null,
typeDurationNull : null,
typeDuration3 : null,
typeDuration6 : null,
typeFillmodeNull : null,
typeFillmodeForwards : null,
typeFillmodeNone : null,
},
onShow(){
this.getCommonPropValues();
this.getSpecialPropValues();
globalThis.value = {
idProp : this.idProp,
classProp : this.classProp,
classPropNone : this.classPropNone,
styleProp : this.styleProp,
refProp : this.refProp,
refPropNone : this.refPropNone,
disabledPropTrue : this.disabledPropTrue,
disabledPropFalse : this.disabledPropFalse,
disabledPropNone : this.disabledPropNone,
focusablePropTrue : this.focusablePropTrue,
focusablePropFalse : this.focusablePropFalse,
focusablePropNone : this.focusablePropNone,
dataProp : this.dataProp,
dataPropNone : this.dataPropNone,
clickEffectPropSmall : this.clickEffectPropSmall,
clickEffectPropMedium : this.clickEffectPropMedium,
clickEffectPropLarge : this.clickEffectPropLarge,
clickEffectPropNone : this.clickEffectPropNone,
dirPropRtl : this.dirPropRtl,
dirPropAuto : this.dirPropAuto,
dirPropLtr : this.dirPropLtr,
dirPropNone : this.dirPropNone,
forPropNull : this.forPropNull,
forPropOne : this.forPropOne,
forPropThree : this.forPropThree,
ifPropTrue : this.ifPropTrue,
showPropTrue : this.showPropTrue,
showPropFalse : this.showPropFalse,
showPropNone : this.showPropNone,
typeImage : this.typeImage,
typeImageNull : this.typeImageNull,
typePredecode2 : this.typePredecode2,
typeIterationInfi : this.typeIterationInfi,
typeIteration3 : this.typeIteration3,
typeReverseNull : this.typeReverseNull,
typeReverseTrue : this.typeReverseTrue,
typeReverseFalse : this.typeReverseFalse,
typeFixedsizeNull : this.typeFixedsizeNull,
typeFixedsizeTrue : this.typeFixedsizeTrue,
typeFixedsizeFalse : this.typeFixedsizeFalse,
typeDurationNull : this.typeDurationNull,
typeDuration3 : this.typeDuration3,
typeDuration6 : this.typeDuration6,
typeFillmodeNull : this.typeFillmodeNull,
typeFillmodeForwards : this.typeFillmodeForwards,
typeFillmodeNone : this.typeFillmodeNone,
}
},
getCommonPropValues(){
this.idProp = this.$element("idProp").getInspector()
this.classProp = this.$element("classProp").getInspector()
this.classPropNone = this.$element("classPropNone").getInspector()
this.styleProp = this.$element("styleProp").getInspector()
this.refProp = this.$element("refProp").getInspector()
this.refPropNone = this.$element("refPropNone").getInspector()
this.disabledPropTrue = this.$element("disabledPropTrue").getInspector()
this.disabledPropFalse = this.$element("disabledPropFalse").getInspector()
this.disabledPropNone = this.$element("disabledPropNone").getInspector()
this.focusablePropTrue = this.$element("focusablePropTrue").getInspector()
this.focusablePropFalse = this.$element("focusablePropFalse").getInspector()
this.focusablePropNone = this.$element("focusablePropNone").getInspector()
this.dataProp = this.$element("dataProp").getInspector()
this.dataPropNone = this.$element("dataPropNone").getInspector()
this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector()
this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector()
this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector()
this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector()
this.dirPropRtl = this.$element("dirPropRtl").getInspector()
this.dirPropAuto = this.$element("dirPropAuto").getInspector()
this.dirPropLtr = this.$element("dirPropLtr").getInspector()
this.dirPropNone = this.$element("dirPropNone").getInspector()
this.forPropNull = this.$element("forPropNull").getInspector()
this.forPropOne = this.$element("forPropOne").getInspector()
this.forPropThree = this.$element("forPropThree").getInspector()
this.ifPropTrue = this.$element("ifPropTrue").getInspector()
this.showPropTrue = this.$element("showPropTrue").getInspector()
this.showPropFalse = this.$element("showPropFalse").getInspector()
this.showPropNone = this.$element("showPropNone").getInspector()
},
getSpecialPropValues(){
this.typeImageNull = this.$element("typeImageNull").getInspector()
this.typeImage = this.$element("typeImage").getInspector()
this.typePredecode2 = this.$element("typePredecode2").getInspector()
this.typeIterationInfi = this.$element("typeIterationInfi").getInspector()
this.typeIteration3 = this.$element("typeIteration3").getInspector()
this.typeReverseNull = this.$element("typeReverseNull").getInspector()
this.typeReverseTrue = this.$element("typeReverseTrue").getInspector()
this.typeReverseFalse = this.$element("typeReverseFalse").getInspector()
this.typeFixedsizeNull = this.$element("typeFixedsizeNull").getInspector()
this.typeFixedsizeTrue = this.$element("typeFixedsizeTrue").getInspector()
this.typeFixedsizeFalse = this.$element("typeFixedsizeFalse").getInspector()
this.typeDurationNull = this.$element("typeDurationNull").getInspector()
this.typeDuration3 = this.$element("typeDuration3").getInspector()
this.typeDuration6 = this.$element("typeDuration6").getInspector()
this.typeFillmodeNull = this.$element("typeFillmodeNull").getInspector()
this.typeFillmodeForwards = this.$element("typeFillmodeForwards").getInspector()
this.typeFillmodeNone = this.$element("typeFillmodeNone").getInspector()
}
}
/*
* typeImage : null,
typePredecode0 : null,
typePredecode2 : null,
typeIterationInfi : null,
typeIteration3 : null,
typeReverseTrue : null,
typeReverseFalse : null,
typeFixedsizeTrue : null,
typeFixedsizeFalse : null,
typeDuration3 : null,
typeDuration6 : null,
typeFillmodeForwards : null,
typeFillmodeNone : null,
*/
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/imageAnimator/index.css → ace/ace_standard/src/main/js/default/pages/imageAnimator/router/index.css
浏览文件 @ 0e226f17
......@@ -52,7 +52,7 @@
.style1{
width: 100%;
height: 100%;
height: 30px;
min-width: 25px;
min-height: 10px;
max-width: 300px;
......@@ -168,8 +168,6 @@
height:120px;
margin-top: 10px;
color: green;
stroke-width: 30px;
line-cap: round;
}
.flex-item {
......@@ -309,33 +307,29 @@
}
#prop1 {
width: 80%;
height:30px;
color: #ad4e2a;
stroke-width: 10px;
line-cap: square;
background-color: #ad4e2a;
margin: 5px;
}
.prop2 {
width: 80%;
height:30px;
color: #343524;
stroke-width: 15px;
line-cap: round;
background-color: #343524;
margin: 5px;
}
.prop4 {
width: 80%;
height:30px;
color: #456345;
stroke-width: 25px;
line-cap: round;
background-color: #456345;
margin: 5px;
}
.prop5 {
color: #831834;
stroke-width: 40px;
line-cap: square;
width: 80%;
background-color: #831834;
margin: 5px;
height: 70px;
}
......@@ -348,8 +342,6 @@
.ani1{
color: #72ac33;
stroke-width: 55px;
line-cap: square;
margin: 5px;
transform-origin: 0% 0%;
animation: ani1Go 3s infinite;
......@@ -397,48 +389,35 @@
.gradient1{
height:20px;
stroke-width: 30px;
line-cap: square;
margin: 5px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
height:20px;
stroke-width: 30px;
line-cap: square;
margin: 5px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
height:20px;
stroke-width: 30px;
line-cap: square;
margin: 5px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
height:20px;
stroke-width: 30px;
line-cap: square;
margin: 5px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}
.access-container{
.accessibility-container{
flex-direction: column;
}
.access1{
.accessibility1{
height:20px;
background-color: #321124;
stroke-width: 30px;
line-cap: square;
margin: 5px;
}
......@@ -452,8 +431,6 @@
.multimode1{
color: #978666;
stroke-width: 30px;
line-cap: square;
margin: 5px;
}
.function-container{
......@@ -489,7 +466,6 @@
width: 100%;
height: 30px;
display: flex;
/* background-color: #ee6363;*/
justify-content: center;
align-items: center;
......
ace/ace_standard/src/main/js/default/pages/imageAnimator/index.hml → ace/ace_standard/src/main/js/default/pages/imageAnimator/router/index.hml
浏览文件 @ 0e226f17
......@@ -20,77 +20,34 @@
通用样式
</text>
<text class="sub-title">
image-animator通用样式1
通用样式1
</text>
<image-animator images="{{images}}" duration="6s" class="style1">
<image-animator images="" duration="" class="style1">
</image-animator>
<text class="sub-title">
image-animator通用样式2
通用样式2
</text>
<image-animator images="{{images}}" duration="6s" class="style2">
<image-animator images="" duration="" class="style2">
</image-animator>
<text class="sub-title">
image-animator通用样式3
通用样式3
</text>
<image-animator images="{{images}}" duration="6s" class="style3">
<image-animator images="" duration="" class="style3">
</image-animator>
<text class="sub-title">
image-animator通用样式4
通用样式4
</text>
<image-animator images="{{images}}" duration="6s" class="style4">
<image-animator images="" duration="" class="style4">
</image-animator>
<text class="sub-title">
image-animator通用样式5
通用样式5
</text>
<div class="contain1">
<image-animator images="{{images}}" duration="6s" class="style5">
<image-animator images="" duration="" class="style5">
</image-animator>
<image-animator images="{{images}}" duration="6s" class="style6">
<image-animator images="" duration="" class="style6">
</image-animator>
</div>
<text class="sub-title">
image-animator特有样式
</text>
<div class="style7">
<image-animator images="" duration="" class="flex-item color-primary">
</image-animator>
<image-animator images="" duration="" class="flex-item color-warning">
</image-animator>
<image-animator images="" duration="" class="flex-item color-success">
</image-animator>
</div>
<text class="sub-title">
image-animator特有样式1
</text>
<div class="style8">
<image-animator images="" duration="" class="flex-item color-primary">
</image-animator>
<image-animator images="" duration="" class="flex-item color-warning">
</image-animator>
<image-animator images="" duration="" class="flex-item color-success">
</image-animator>
<image-animator images="" duration="" class="flex-item color-primary">
</image-animator>
<image-animator images="" duration="" class="flex-item color-warning">
</image-animator>
<image-animator images="" duration="" class="flex-item color-success">
</image-animator>
<image-animator images="" duration="" class="flex-item color-primary">
</image-animator>
<image-animator images="" duration="" class="flex-item color-warning">
</image-animator>
<image-animator images="" duration="" class="flex-item color-success">
</image-animator>
</div>
<text class="sub-title">
image-animator 特有样式2
</text>
<div class="style9">
<image-animator images="" duration="" class="grid-child grid-left-top"></image-animator>
<image-animator images="" duration="" class="grid-child grid-left-bottom"></image-animator>
<image-animator images="" duration="" class="grid-child grid-right-top"></image-animator>
<image-animator images="" duration="" class="grid-child grid-right-bottom"></image-animator>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
......@@ -99,12 +56,12 @@
动画样式
</text>
<text class="sub-title">
image-animator动画样式1
动画样式1
</text>
<image-animator images="" duration="" class="ani1" >
</image-animator>
<text class="sub-title">
image-animator动画样式2
动画样式2
</text>
<image-animator images="" duration="" class="ani2" >
</image-animator>
......@@ -120,32 +77,32 @@
通用属性
</text>
<text class="sub-title">
image-animator通用属性1
通用属性1
</text>
<image-animator images="{{images}}" duration="6s" id="prop1" class="prop1"
<image-animator images="" duration="" id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
</image-animator>
<text class="sub-title">
image-animator通用属性2
通用属性2
</text>
<image-animator images="{{images}}" duration="6s" class="prop2" ref ="prop2"
<image-animator images="" duration="" class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
</image-animator>
<text class="sub-title">
image-animator通用属性3
通用属性3
</text>
<image-animator images="{{images}}" duration="6s" style="height:30px; color: #679855; margin: 5px;" class="prop3">
<image-animator images="" duration="" style="height:30px; background-color: #679855; margin: 5px;" class="prop3">
</image-animator>
<text class="sub-title">
image-animator特有属性
特有属性
</text>
<image-animator images="{{images}}" duration="8s" style="height:30px; color: #679855; margin: 5px;"
class="prop3" predecode="0" iteration="3"
reverse="true" fixedsize="false">
<image-animator images="{{images}}" duration="4s" style="height:30px; background-color: #679855; margin: 5px;"
class="prop3" predecode="0" iteration="3" predecode="2"
reverse="true" fixedsize="false" fillmode="forwards">
</image-animator>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
......@@ -155,22 +112,22 @@
通用事件
</text>
<text class="sub-title">
div通用事件1
通用事件1
</text>
<image-animator images="{{images}}" duration="8s" class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
<image-animator images="" duration="" class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
</image-animator>
<text class="sub-title">
div通用事件2
通用事件2
</text>
<image-animator images="{{images}}" duration="8s" class ="event2" onclick="click" ondoubleclick="doubleClick"
<image-animator images="" duration="" class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</image-animator>
<text class="sub-title">
div通用事件3
通用事件3
</text>
<image-animator images="{{images}}" duration="8s" class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
<image-animator images="" duration="" class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
......@@ -178,9 +135,9 @@
ondrop="drop">
</image-animator>
<text class="sub-title">
div特有事件1
特有事件1
</text>
<image-animator ref="animator" fixedsize="true" images="{{images}}" duration="1s" @resume='resume' @start="start" @stop='stop' @pause='pause' class ="event5" >
<image-animator ref="animator" fixedsize="true" images="{{images}}" duration="2s" @resume='resume' @start="start" @stop='stop' @pause='pause' class ="event5" >
</image-animator>
</div>
......@@ -191,22 +148,22 @@
通用方法
</text>
<text class="sub-title">
div通用方法1
通用方法1
</text>
<image-animator images="{{images}}" duration="8s" id="function1" class="function1" ontouchstart="functionTest1">
<image-animator images="" duration="" id="function1" class="function1" ontouchstart="functionTest1">
</image-animator>
<text class="sub-title">
div通用方法2
通用方法2
</text>
<image-animator images="{{images}}" duration="8s" id="function2" class="function2" ontouchstart="functionTest2">
<image-animator images="" duration="" id="function2" class="function2" ontouchstart="functionTest2">
</image-animator>
<text class="sub-title">
div通用方法3
通用方法3
</text>
<image-animator images="{{images}}" duration="8s" id="function3" class="function3" ontouchstart="functionTest3">
<image-animator images="" duration="" id="function3" class="function3" ontouchstart="functionTest3">
</image-animator>
<text class="sub-title">
div特有方法
特有方法
</text>
<div class="flex-class">
<button onclick="handleStart">
......@@ -234,36 +191,36 @@
渐变样式
</text>
<text class="sub-title">
div渐变样式1
渐变样式1
</text>
<image-animator images="" duration="" class="gradient1">
</image-animator>
<text class="sub-title">
div渐变样式2
渐变样式2
</text>
<image-animator images="" duration="" class="gradient2">
</image-animator>
<text class="sub-title">
div渐变样式3
渐变样式3
</text>
<image-animator images="" duration="" class="gradient3">
</image-animator>
<text class="sub-title">
div渐变样式4
渐变样式4
</text>
<image-animator images="" duration="" class="gradient4">
</image-animator>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="access-container">
<div class="accessibility-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
div无障碍1
无障碍1
</text>
<image-animator images="" duration="" class="access1" accessibilitygroup ="true"
<image-animator images="" duration="" class="accessibility1" accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
......@@ -276,7 +233,7 @@
原子布局
</text>
<text class="sub-title">
div原子布局1
原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<image-animator images="" duration="" style="width:20px;height:20px;background-color: blue;display-index: 1;">
......@@ -293,7 +250,7 @@
</image-animator>
</div>
<text class="sub-title">
div原子布局2
原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<image-animator images="" duration="" style="height:20px;background-color: blue;flex-weight: 1;">
......@@ -310,7 +267,7 @@
</image-animator>
</div>
<text class="sub-title">
div原子布局3
原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<image-animator images="" duration="" style="width:30px;background-color: blue;aspect-ratio: 0.6;">
......@@ -333,7 +290,7 @@
多模输入
</text>
<text class="sub-title">
div多模输入1
多模输入1
</text>
<image-animator images="" duration="" class="multiMode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="div" scenelabel="common">
......
ace/ace_standard/src/main/js/default/pages/imageAnimator/index.js → ace/ace_standard/src/main/js/default/pages/imageAnimator/router/index.js
浏览文件 @ 0e226f17
......@@ -14,75 +14,6 @@
*/
import prompt from '@system.prompt';
var options = {
duration: 1500,
easing: 'friction',
delay: 100,
fill: 'forwards',
iterations: 2,
direction: 'normal',
};
var frames = [
{
transform: {
translate: '-120px',
rotate:'10deg',
scale:0.2,
skew:'40deg'
},
opacity: 0.1,
offset: 0.0,
width: '40%',
height:'20px',
backgroundColor:'#ff0000',
backgroundPosition:'10px 20px',
transformOrigin:'left top'
},
{
transform: {
translateX: '0px',
translateY: '5px',
rotateX:'10deg',
rotateY:'10deg',
scaleX:0.5,
scaleY:0.7,
skewX:'22deg',
skewY:'30deg'
},
opacity: 0.6,
offset: 2.0,
width: '60%',
height:'30px',
backgroundColor:'#ff00ff',
backgroundPosition:'15px 25px',
transformOrigin:'center top'
},
{
transform: {
translateX: '100px',
translateY: '0px',
translateZ: '20px',
rotateX:'0deg',
rotateY:'0deg',
rotateZ:'30deg',
scaleX:1,
scaleY:1,
scaleZ:2,
skewX:'0',
skewY:'0',
skewZ:'30deg'
},
opacity: 1,
offset: 0.0,
width: '100%',
height:'30px',
backgroundColor:'#ffff00',
backgroundPosition:'0px',
transformOrigin:'center center'
},
];
export default {
data: {
images: [
......@@ -452,6 +383,74 @@ export default {
functionTest3(event){
var function3 = this.$element('function3');
var options = {
duration: 1500,
easing: 'friction',
delay: 100,
fill: 'forwards',
iterations: 2,
direction: 'normal',
};
var frames = [
{
transform: {
translate: '-120px',
rotate:'10deg',
scale:0.2,
skew:'40deg'
},
opacity: 0.1,
offset: 0.0,
width: '40%',
height:'20px',
backgroundColor:'#ff0000',
backgroundPosition:'10px 20px',
transformOrigin:'left top'
},
{
transform: {
translateX: '0px',
translateY: '5px',
rotateX:'10deg',
rotateY:'10deg',
scaleX:0.5,
scaleY:0.7,
skewX:'22deg',
skewY:'30deg'
},
opacity: 0.6,
offset: 2.0,
width: '60%',
height:'30px',
backgroundColor:'#ff00ff',
backgroundPosition:'15px 25px',
transformOrigin:'center top'
},
{
transform: {
translateX: '100px',
translateY: '0px',
translateZ: '20px',
rotateX:'0deg',
rotateY:'0deg',
rotateZ:'30deg',
scaleX:1,
scaleY:1,
scaleZ:2,
skewX:'0',
skewY:'0',
skewZ:'30deg'
},
opacity: 1,
offset: 0.0,
width: '100%',
height:'30px',
backgroundColor:'#ffff00',
backgroundPosition:'0px',
transformOrigin:'center center'
},
];
var animation = function3.animate(frames, options);
animation.play()
animation.onfinish = function(){
......
ace/ace_standard/src/main/js/default/pages/imageAnimator/style/index.js 0 → 100644
浏览文件 @ 0e226f17
/**
* 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.
*/
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或