| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| 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> | infinite | 1 | 定义动画播放的次数，可设置为infinite无限次播放 |
| animation-timing-function | linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) | step-start | step-end | steps(number_of_steps[, step-direction]?) | ease | - |
| animation-fill-mode | none | forwards | none | - |
注：
cubic-bezier(<number>, <number>, <number>, <number>) | step-start | step-end | steps(number_of_steps[, step-direction]?) 1080+后支持。
cubic-bezier(x1, y1, x2, y2) 1080+ 参数 x1, y1, x2, y2 是 <number> 类型的值，代表当前定义的立方贝塞尔曲线中的 P1 和 P2 点的横坐标和纵坐标，x1 和 x2 必须在 [0，1] 范围内，否则当前值无效。
steps(number_of_steps，step-direction) 1080+ | 名称 | 类型 | 默认值| 必填 | 描述 | | -- | -- | -- | -- | -- | | number_of_steps | <integer> | - | 是 | 表示等间隔步数的正整数 | | step-direction | jump-start | jump-end | jump-none | jump-both | start | end | end | 否 | 指示函数左连续或右连续的关键字 |
指定所采用的一系列动画，属性值的每个名称代表一个由 @keyframes 属性定义的关键帧序列。该属性支持在组件中应用单个动画或多个动画 1070+ ，应用多个动画时动画同时开始执行。
示例代码：
/* 单个动画 */
animation-name: Color;
animation-name: translate;
animation-name: rotate;
/* 多个动画 1070+ */
animation-name: Color, Opacity;
animation-name: Width, translate, rotate;
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| background-color | <color> | - | - |
background-position 1080+ | <length> |<percentage>| left | right | top | bottom | center | 0px 0px | 描述了背景图片在容器中绘制的位置，支持 1-4 个参数，详情见背景图样式 |
| opacity | <number> | - | - |
| width/height | <length> | - | 暂不支持百分比 |
| transform | <string> | - | - |
注：
暂时不支持起始值(0%)或终止值(100%)缺省的情况，都需显式指定。
background-position 作为 @keyframes 属性 1080+ 后支持。
| 名称 | 类型 |
|---|---|
| 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> |
查看示例代码
1070+支持动画事件监听。
| 名称 | 参数 | 描述 |
|---|---|---|
| animationstart | AnimationEvent | 动画开始执行时的回调 |
| animationiteration | AnimationEvent | 动画重复开始执行时回调 |
| animationend | AnimationEvent | 动画结束执行时的回调 |
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
});
})
查看示例代码
查看示例代码