动画样式

快应用支持开发者制作动画，提供了transform类、animation类的动画样式属性，且参数格式与 CSS 对齐，更方便开发者上手适配动画

transform可参考此文档 (opens new window)入门

animation可参考此文档 (opens new window)入门

动画样式列表

名称	类型	默认值	描述
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	-
animation-direction	normal | reverse | alternate | alternate-reverse	normal	定义动画播放的方向，详情请看文档 (opens new window)

注：

• animation-timing-function 类型

cubic-bezier(<number>, <number>, <number>, <number>) | step-start | step-end | steps(number_of_steps[, step-direction]?) 后支持 。其中：

steps(number_of_steps，step-direction)

名称	类型	默认值	必填	描述
number_of_steps	<integer>	-	是	表示等间隔步数的正整数
step-direction	jump-start | jump-end | jump-none | jump-both | start | end	end	否	指示函数左连续或右连续的关键字

• cubic-bezier(x1, y1, x2, y2)

参数 x1, y1, x2, y2 是 <number> 类型的值，代表当前定义的立方贝塞尔曲线中的 P1 和 P2 点的横坐标和纵坐标，x1 和 x2 必须在 [0，1] 范围内，否则当前值无效。

transform

名称	类型
translate	<length> | <percent>
translateX	<length> | <percent>
translateY	<length> | <percent>
scale	<number>
scaleX	<number>
scaleY	<number>
rotate	<deg>

animation-name

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

示例代码：

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

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

@keyframes

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

注：

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

animation

支持动画事件监听。

名称	参数	描述
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 => {
  console.log(`
    type: ${event.type},
    animationName: ${event.animationName},
    elapsedTime: ${event.elapsedTime}
  `)
})
element.addEventListener('animationend', event => {
  console.log(`
    type: ${event.type},
    animationName: ${event.animationName},
    elapsedTime: ${event.elapsedTime}
  `)
})
element.addEventListener('animationiteration', event => {
  console.log(`
    type: ${event.type},
    animationName: ${event.animationName},
    elapsedTime: ${event.elapsedTime}
  `)
})