文档

# 动画

# qq.createAnimation

QQ mac版本：支持

QQ windows版本：支持

# Animation qq.createAnimation(Object object)

创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

# 参数

# Object object
属性 类型 默认值 必填 说明
duration number 400 否 动画持续时间，单位 ms
timingFunction string 'linear' 否 动画的效果
delay number 0 否 动画延迟时间，单位 ms
transformOrigin string '50% 50% 0' 否

timingFunction 的合法值

值 说明
'linear' 动画从头到尾的速度是相同的
'ease' 动画以低速开始，然后加快，在结束前变慢
'ease-in' 动画以低速开始
'ease-in-out' 动画以低速开始和结束
'ease-out' 动画以低速结束
'step-start' 动画第一帧就跳至结束状态直到结束
'step-end' 动画一直保持开始状态，最后一帧跳到结束状态

# 返回值

# Animation

# Animation

动画对象

QQ mac版本：支持

QQ windows版本：支持

# 方法

# Array.<Object> Animation.export()

导出动画队列。export 方法每次调用后会清掉之前的动画操作。

# Animation Animation.step(Object object)

表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。

# Animation Animation.matrix()

同 transform-function matrix

# Animation Animation.matrix3d()

同 transform-function matrix3d

# Animation Animation.rotate(number angle)

从原点顺时针旋转一个角度

# Animation Animation.rotate3d(number x, number y, number z, number angle)

从 X 轴顺时针旋转一个角度

# Animation Animation.rotateX(number angle)

从 X 轴顺时针旋转一个角度

# Animation Animation.rotateY(number angle)

从 Y 轴顺时针旋转一个角度

# Animation Animation.rotateZ(number angle)

从 Z 轴顺时针旋转一个角度

# Animation Animation.scale(number sx, number sy)

缩放

# Animation Animation.scale3d(number sx, number sy, number sz)

缩放

# Animation Animation.scaleX(number scale)

缩放 X 轴

# Animation Animation.scaleY(number scale)

缩放 Y 轴

# Animation Animation.scaleZ(number scale)

缩放 Z 轴

# Animation Animation.skew(number ax, number ay)

对 X、Y 轴坐标进行倾斜

# Animation Animation.skewX(number angle)

对 X 轴坐标进行倾斜

# Animation Animation.skewY(number angle)

对 Y 轴坐标进行倾斜

# Animation Animation.translate(number tx, number ty)

平移变换

# Animation Animation.translate3d(number tx, number ty, number tz)

对 xyz 坐标进行平移变换

# Animation Animation.translateX(number translation)

对 X 轴平移

# Animation Animation.translateY(number translation)

对 Y 轴平移

# Animation Animation.translateZ(number translation)

对 Z 轴平移

# Animation Animation.opacity(number value)

设置透明度

# Animation Animation.backgroundColor(string value)

设置背景色

# Animation Animation.width(number|string value)

设置宽度

# Animation Animation.height(number|string value)

设置高度

# Animation Animation.left(number|string value)

设置 left 值

# Animation Animation.right(number|string value)

设置 right 值

# Animation Animation.top(number|string value)

设置 top 值

# Animation Animation.bottom(number|string value)

设置 bottom 值

<view
  animation="{{animationData}}"
  style="background:red;height:100rpx;width:100rpx"
></view>
1
2
3
4
Page({
  data: {
    animationData: {}
  },
  onShow() {
    const animation = qq.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })

    this.animation = animation

    animation.scale(2, 2).rotate(45).step()

    this.setData({
      animationData: animation.export()
    })

    setTimeout(function () {
      animation.translate(30).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 1000)
  },
  rotateAndScale() {
    // 旋转同时放大
    this.animation.rotate(45).scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateThenScale() {
    // 先旋转后放大
    this.animation.rotate(45).step()
    this.animation.scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateAndScaleThenTranslate() {
    // 先旋转同时放大，然后平移
    this.animation.rotate(45).scale(2, 2).step()
    this.animation.translate(100, 100).step({duration: 1000})
    this.setData({
      animationData: this.animation.export()
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

# Animation Animation.backgroundColor(string value)

设置背景色

# 参数

# string value

颜色值

# 返回值

# Animation

# Animation Animation.bottom(number|string value)

设置 bottom 值

# 参数

# number|string value

长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

# 返回值

# Animation

# Array.<Object> Animation.export()

导出动画队列。export 方法每次调用后会清掉之前的动画操作。

# 返回值

# Array.<Object>

animationData

# Animation Animation.height(number|string value)

设置高度

# 参数

# number|string value

长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

# 返回值

# Animation

# Animation Animation.left(number|string value)

设置 left 值

# 参数

# number|string value

长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

# 返回值

# Animation

# Animation Animation.matrix()

同 transform-function matrix

# 返回值

# Animation

# .matrix3d

# Animation Animation.matrix3d()

同 transform-function matrix3d

# 返回值

# Animation

# .opacity

# Animation Animation.opacity(number value)

设置透明度

# 参数

# number value

透明度，范围 0-1

# 返回值

# Animation

# Animation Animation.right(number|string value)

设置 right 值

# 参数

# number|string value

长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

# 返回值

# Animation

# .rotate

# Animation Animation.rotate(number angle)

从原点顺时针旋转一个角度

# 参数

# number angle

旋转的角度。范围 [-180, 180]

# 返回值

# Animation

# .rotate3d

# Animation Animation.rotate3d(number x, number y, number z, number angle)

从 X 轴顺时针旋转一个角度

# 参数

# number x

旋转轴的 x 坐标

# number y

旋转轴的 y 坐标

# number z

旋转轴的 z 坐标

# number angle

旋转的角度。范围 [-180, 180]

# 返回值

# Animation

# .rotateX

# Animation Animation.rotateX(number angle)

从 X 轴顺时针旋转一个角度

# 参数

# number angle

旋转的角度。范围 [-180, 180]

# 返回值

# Animation

# .rotateY

# Animation Animation.rotateY(number angle)

从 Y 轴顺时针旋转一个角度

# 参数

# number angle

旋转的角度。范围 [-180, 180]

# 返回值

# Animation

# .rotateZ

# Animation Animation.rotateZ(number angle)

从 Z 轴顺时针旋转一个角度

# 参数

# number angle

旋转的角度。范围 [-180, 180]

# 返回值

# Animation

# .scale

# Animation Animation.scale(number sx, number sy)

缩放

# 参数

# number sx

当仅有 sx 参数时，表示在 X 轴、Y 轴同时缩放sx倍数

# number sy

在 Y 轴缩放 sy 倍数

# 返回值

# Animation

# .scale3d

# Animation Animation.scale3d(number sx, number sy, number sz)

缩放

# 参数

# number sx

x 轴的缩放倍数

# number sy

y 轴的缩放倍数

# number sz

z 轴的缩放倍数

# 返回值

# Animation

# .scaleX

# Animation Animation.scaleX(number scale)

缩放 X 轴

# 参数

# number scale

X 轴的缩放倍数

# 返回值

# Animation

# .scaleY

# Animation Animation.scaleY(number scale)

缩放 Y 轴

# 参数

# number scale

Y 轴的缩放倍数

# 返回值

# Animation

# .scaleZ

# Animation Animation.scaleZ(number scale)

缩放 Z 轴

# 参数

# number scale

Z 轴的缩放倍数

# 返回值

# Animation

# .skew

# Animation Animation.skew(number ax, number ay)

对 X、Y 轴坐标进行倾斜

# 参数

# number ax

对 X 轴坐标倾斜的角度，范围 [-180, 180]

# number ay

对 Y 轴坐标倾斜的角度，范围 [-180, 180]

# 返回值

# Animation

# .skewX

# Animation Animation.skewX(number angle)

对 X 轴坐标进行倾斜

# 参数

# number angle

倾斜的角度，范围 [-180, 180]

# 返回值

# Animation

# .skewY

# Animation Animation.skewY(number angle)

对 Y 轴坐标进行倾斜

# 参数

# number angle

倾斜的角度，范围 [-180, 180]

# 返回值

# Animation

# .step

# Animation Animation.step(Object object)

表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。

# 参数

# Object object
属性 类型 默认值 必填 说明
duration number 400 否 动画持续时间，单位 ms
timingFunction string 'linear' 否 动画的效果
delay number 0 否 动画延迟时间，单位 ms
transformOrigin string '50% 50% 0' 否

timingFunction 的合法值

值 说明
'linear' 动画从头到尾的速度是相同的
'ease' 动画以低速开始，然后加快，在结束前变慢
'ease-in' 动画以低速开始
'ease-in-out' 动画以低速开始和结束
'ease-out' 动画以低速结束
'step-start' 动画第一帧就跳至结束状态直到结束
'step-end' 动画一直保持开始状态，最后一帧跳到结束状态

# 返回值

# Animation

animation

# .top

# Animation Animation.top(number|string value)

设置 top 值

# 参数

# number|string value

长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

# 返回值

# Animation

# .translate

# Animation Animation.translate(number tx, number ty)

平移变换

# 参数

# number tx

当仅有该参数时表示在 X 轴偏移 tx，单位 px

# number ty

在 Y 轴平移的距离，单位为 px

# 返回值

# Animation

# .translate3d

# Animation Animation.translate3d(number tx, number ty, number tz)

对 xyz 坐标进行平移变换

# 参数

# number tx

在 X 轴平移的距离，单位为 px

# number ty

在 Y 轴平移的距离，单位为 px

# number tz

在 Z 轴平移的距离，单位为 px

# 返回值

# Animation

# .translateX

# Animation Animation.translateX(number translation)

对 X 轴平移

# 参数

# number translation

在 X 轴平移的距离，单位为 px

# 返回值

# Animation

# .translateY

# Animation Animation.translateY(number translation)

对 Y 轴平移

# 参数

# number translation

在 Y 轴平移的距离，单位为 px

# 返回值

# Animation

# .translateZ

# Animation Animation.translateZ(number translation)

对 Z 轴平移

# 参数

# number translation

在 Z 轴平移的距离，单位为 px

# 返回值

# Animation

# .width

# Animation Animation.width(number|string value)

设置宽度

# 参数

# number|string value

长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

# 返回值

# Animation

# .backgroundColor

# Animation Animation.backgroundColor(string value)

设置背景色

# 参数

# string value

颜色值

# 返回值

# Animation

# .bottom

# Animation Animation.bottom(number|string value)

设置 bottom 值

# 参数

# number|string value

长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

# 返回值

# Animation

# .export

# Array.<Object> Animation.export()

导出动画队列。export 方法每次调用后会清掉之前的动画操作。

# 返回值

# Array.<Object>

animationData

# .height

# Animation Animation.height(number|string value)

设置高度

# 参数

# number|string value

长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

# 返回值

# Animation

# .left

# Animation Animation.left(number|string value)

设置 left 值

# 参数

# number|string value

长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

# 返回值

# Animation

# .matrix

# Animation Animation.matrix()

同 transform-function matrix

# 返回值

# Animation

← 菜单 →