Animation
动画对象
方法
Object Animation.export()
导出动画队列。 注意:export 方法每次调用后会清掉之前的动画操作。
Animation Animation.step(Object object)
表示一组动画完成。可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。
Object object 参数
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
duration | Number | 400 | 否 | 动画持续时间,单位 ms |
timingFunction | String | 'linear' | 否 | 动画的效果 |
delay | Number | 0 | 否 | 动画延迟时间,单位 ms |
transformOrigin | String | '50% 50% 0' | 否 | 动画元素的位置,同 CSS transform-origin |
Animation Animation.matrix()
Animation Animation.matrix3d()
Animation Animation.rotate(Number angle)
从原点顺时针旋转一个角度
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
angle | Number | 0 | 是 | 旋转的角度。范围 [-180, 180] |
Animation Animation.rotate3d(Number x, Number y, Number z, Number angle)
从 固定 轴顺时针旋转一个角度
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
x | Number | 0 | 是 | 旋转轴的 x 坐标 |
y | Number | 0 | 是 | 旋转轴的 y 坐标 |
z | Number | 0 | 是 | 旋转轴的 z 坐标 |
angle | Number | 0 | 是 | 旋转的角度。范围 [-180, 180] |
Animation Animation.rotateX(Number angle)
从 X 轴顺时针旋转一个角度
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
angle | Number | 0 | 是 | 旋转的角度。范围 [-180, 180] |
Animation Animation.rotateY(Number angle)
从 Y 轴顺时针旋转一个角度
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
angle | Number | 0 | 是 | 旋转的角度。范围 [-180, 180] |
Animation Animation.rotateZ(Number angle)
从 Z 轴顺时针旋转一个角度
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
angle | Number | 0 | 是 | 旋转的角度。范围 [-180, 180] |
Animation Animation.scale(Number sx, Number sy)
缩放
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
sx | Number | 0 | 是 | 在 X 轴缩放 sx 倍数,当仅有 sx 参数时,表示在 X 轴、Y 轴同时缩放sx倍数 |
sy | Number | 0 | 否 | 在 Y 轴缩放 sy 倍数 |
Animation Animation.scale3d(Number sx, Number sy, Number sz)
缩放
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
sx | Number | 0 | 是 | 在 X 轴缩放 sx 倍数 |
sy | Number | 0 | 是 | 在 Y 轴缩放 sy 倍数 |
sz | Number | 0 | 是 | 在 Y 轴缩放 sy 倍数 |
Animation Animation.scaleX(Number scale)
缩放 X 轴
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
scale | Number | 0 | 是 | X 轴的缩放倍数 |
Animation Animation.scaleY(Number scale)
缩放 Y 轴
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
scale | Number | 0 | 是 | Y 轴的缩放倍数 |
Animation Animation.scaleZ(Number scale)
缩放 Z 轴
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
scale | Number | 0 | 是 | Z 轴的缩放倍数 |
Animation Animation.skew(Number ax, Number ay)
对 X、Y 轴坐标进行倾斜
参数
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
ax | Number | 0 | 是 | 对 X 轴坐标倾斜的角度,范围 [-180, 180] |
ay | Number | 0 | 是 | 对 Y 轴坐标倾斜的角度,范围 [-180, 180] |
Animation Animation.skewX(Number angle)
对 X 轴坐标进行倾斜
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
angle | Number | 0 | 是 | 倾斜的角度,范围 [-180, 180] |
Animation Animation.skewY(Number angle)
对 Y 轴坐标进行倾斜
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
angle | Number | 0 | 是 | 倾斜的角度,范围 [-180, 180] |
Animation Animation.translate(Number tx, Number ty)
平移变换
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
tx | Number | 0 | 是 | 在 X 轴平移的距离,单位为 px |
ty | Number | 0 | 是 | 在 Y 轴平移的距离,单位为 px |
Animation Animation.translate3d(Number tx, Number ty, Number tz)
对 xyz 坐标进行平移变换
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
tx | Number | 0 | 是 | 在 X 轴平移的距离,单位为 px |
ty | Number | 0 | 是 | 在 Y 轴平移的距离,单位为 px |
tz | Number | 0 | 是 | 在 Z 轴平移的距离,单位为 px |
Animation Animation.translateX(Number translation)
对 X 轴平移
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
translation | Number | 0 | 是 | 平移的距离,单位为 px |
Animation Animation.translateY(Number translation)
对 Y 轴平移
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
translation | Number | 0 | 是 | 平移的距离,单位为 px |
Animation Animation.translateZ(Number translation)
对 Z 轴平移
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
translation | Number | 0 | 是 | 平移的距离,单位为 px |
Animation Animation.opacity(Number value)
设置透明度
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
value | Number | 0 | 是 | 透明度,范围 0-1 |
Animation Animation.backgroundColor(String value)
设置背景色
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
value | String | 0 | 是 | 颜色值 |
Animation Animation.width(Number|String value)
设置宽度
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
value | Number/String | 0 | 是 | 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值 |
Animation Animation.height(Number|String value)
设置高度
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
value | Number/String | 0 | 是 | 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值 |
Animation Animation.left(Number|String value)
设置 left 值
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
value | Number/String | 0 | 是 | 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值 |
Animation Animation.right(Number|String value)
设置 right 值
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
value | Number/String | 0 | 是 | 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值 |
Animation Animation.top(Number|String value)
设置 top 值
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
value | Number/String | 0 | 是 | 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值 |
Animation Animation.bottom(Number|String value)
设置 bottom 值
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
value | Number/String | 0 | 是 | 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值 |