教程 框架 组件 接口 其他

动画样式

名称类型默认值描述
transform-origin<position>0px 0px变换原点位置,单位目前仅支持 px,格式为:50px 100px
transform<string>-见下面 transform 操作
animation-name<string>-与@keyframes 的 name 相呼应,见下面@keyframes 属性
animation-delay<time>0目前支持的单位为[ s(秒) | ms(毫秒) ]
animation-duration<time>0目前支持的单位为[ s(秒) | ms(毫秒) ]
animation-iteration-count<integer> | infinite1定义动画播放的次数,可设置为infinite无限次播放
animation-timing-functionlinear | ease | ease-in | ease-out | ease-in-outease-
animation-fill-modenone | forwardsnone-

animation-name 属性

指定所采用的一系列动画,属性值的每个名称代表一个由@keyframes属性定义的关键帧序列。该属性支持在组件中应用单个动画或多个动画1070+,应用多个动画时动画同时开始执行。

示例代码:

/* 单个动画 */
animation-name: Color;
animation-name: translate;
animation-name: rotate;

/* 多个动画 1070+ */
animation-name: Color, Opacity;
animation-name: Width, translate, rotate;

@keyframes 属性

名称类型默认值描述
background-color<color>--
opacity<number>--
width/height<length>-暂不支持百分比
transform<string>--

暂时不支持起始值(0%)或终止值(100%)缺省的情况,都需显式指定

transform 操作

名称类型
translate<length> | <percent> 1010+
translateX<length> | <percent> 1010+
translateY<length> | <percent> 1010+
scale<number>
scaleX<number>
scaleY<number>
rotate<deg> | <rad>
rotateX<deg> | <rad>
rotateY<deg> | <rad>

transform   示例代码

查看示例代码

动画事件 1070+

支持动画事件监听。

名称参数描述
animationstartAnimationEvent动画开始执行时的回调
animationiterationAnimationEvent动画重复开始执行时回调
animationendAnimationEvent动画结束执行时的回调

AnimationEvent对象说明:

属性类型描述
type<String>事件类型。可选值为animationstart、animationiteration 和 animationend。
animationName<String>动画的名称。
elapsedTime<float>事件发生时动画的执行时长。单位:秒

示例代码:

script动态添加事件监听器

var element = $element("id");
element.addEventListener("animationstart", (event) => {
    prompt.showToast({
        message: 'type: ' + event.type + ', animationName: ' + event.animationName + ', elapsedTime: ' + event.elapsedTime
    });
})
element.addEventListener("animationend", (event) => {
    prompt.showToast({
        message: 'type: ' + event.type + ', animationName: ' + event.animationName + ', elapsedTime: ' + event.elapsedTime
    });
})
element.addEventListener("animationiteration", (event) => {
    prompt.showToast({
        message: 'type: ' + event.type + ', animationName: ' + event.animationName + ', elapsedTime: ' + event.elapsedTime
    });
})

animation   示例代码

查看示例代码

translate动画   示例代码

查看示例代码

条匹配 "" 的结果

    没有搜索到与 "" 相关的内容