效果展示

wx.createAnimation(Object object)

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

wx.createAnimation参数

timingFunction 的合法值### transform-origin

属性允许您改变被转换元素的位置。
transform-origin: x-axis y-axis z-axis;
其中

• x-axis  定义视图被置于 X 轴的何处。可能的值：left、center、 right、length、%
• y-axis       定义视图被置于 Y 轴的何处。可能的值： top、center、bottom、 length、%
• z-axis  定义视图被置于 Z 轴的何处。可能的值：length

返回值

Animation

Animation

动画对象

Animation方法

动画方法
样式：

旋转：

缩放：

偏移：

倾斜：

矩阵变形：

Array.<Object> Animation.export()
导出动画队列。export 方法每次调用后会清掉之前的动画操作。
返回值
Array.
animationData

Animation.step(Object object)
表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。
参数

** timingFunction 的合法值 **

返回值
animation

Animation.backgroundColor(string value)
设置背景色
参数
string value    颜色值
返回值
Animation

Animation.bottom(number|string value)
设置 bottom 值
参数
string value 长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值
返回值
Animation

Animation.height(number|string value)
设置高度
参数
string value  长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值
返回值
Animation

Animation.left(number|string value)
设置 left 值
参数
string value  长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值
返回值
Animation

Animation.opacity(number value)
设置透明度
参数
number value    透明度，范围 0-1
返回值
Animation

Animation.right(number|string value)
设置 right 值
参数
string value   长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值
返回值
Animation

Animation.rotate(number angle)
从原点顺时针旋转一个角度
参数
number angle 旋转的角度。范围 [-180, 180]
返回值
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

Animation.rotateX(number angle)
从 X 轴顺时针旋转一个角度
参数
number angle  旋转的角度。范围 [-180, 180]
返回值
Animation

Animation.rotateY(number angle)
从 Y 轴顺时针旋转一个角度
参数
number angle  旋转的角度。范围 [-180, 180]
返回值
Animation

Animation.rotateZ(number angle)
从 Z 轴顺时针旋转一个角度
参数
number angle  旋转的角度。范围 [-180, 180]
返回值
Animation

Animation.scale(number sx, number sy)
缩放
参数
number sx   当仅有 sx 参数时，表示在 X 轴、Y 轴同时缩放sx倍数
number sy   在 Y 轴缩放 sy 倍数
返回值
Animation

Animation.scale3d(number sx, number sy, number sz)
缩放
参数
number sx   x 轴的缩放倍数
number sy   y 轴的缩放倍数
number sz   z 轴的缩放倍数
返回值
Animation

Animation.scaleX(number scale)
缩放 X 轴
参数
number scale  X 轴的缩放倍数
返回值
Animation

Animation.scaleY(number scale)
缩放 Y 轴
参数
number scale   Y 轴的缩放倍数
返回值
Animation

Animation.scaleZ(number scale)
缩放 Z 轴
参数
number scale   Z 轴的缩放倍数
返回值
Animation

Animation.skew(number ax, number ay)
对 X、Y 轴坐标进行倾斜
参数
number ax   对 X 轴坐标倾斜的角度，范围 [-180, 180]
number ay  对 Y 轴坐标倾斜的角度，范围 [-180, 180]
返回值
Animation

Animation.skewX(number angle)
对 X 轴坐标进行倾斜
参数
number angle  倾斜的角度，范围 [-180, 180]
返回值
Animation

Animation.skewY(number angle)
对 Y 轴坐标进行倾斜
参数
number angle  倾斜的角度，范围 [-180, 180]
返回值
Animation

Animation.top(number|string value)
设置 top 值
参数
number|string value   长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值
返回值
Animation

Animation.translate(number tx, number ty)
平移变换
参数
number tx   当仅有该参数时表示在 X 轴偏移 tx，单位 px
number ty   在 Y 轴平移的距离，单位为 px
返回值
Animation

Animation.translate3d(number tx, number ty, number tz)
对 xyz 坐标进行平移变换
参数
number tx  在 X 轴平移的距离，单位为 px
number ty  在 Y 轴平移的距离，单位为 px
number tz  在 Z 轴平移的距离，单位为 px
返回值
Animation

Animation.translateX(number translation)
对 X 轴平移
参数
number translation   在 X 轴平移的距离，单位为 px
返回值
Animation

Animation.translateY(number translation)
对 Y 轴平移
参数
number translation   在 Y 轴平移的距离，单位为 px
返回值
Animation

Animation.translateZ(number translation)
对 Z 轴平移
参数
number translation   在 Z 轴平移的距离，单位为 px
返回值
Animation

Animation.width(number|string value)
设置宽度
参数
number|string value   长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值
返回值
Animation

Animation.matrix()
同 transform-function matrix
返回值
Animation
注：
CSS数据类型用于对元素的显示做变换。通常，这种变换可以由矩阵表示，并且可以使用每个点上的矩阵乘法来确定所得到的图像。
CSS 函数 matrix() 用六个指定的值来指定一个均匀的二维（2D）变换矩阵。这个矩形中的常量值是不作为参数进行传递的，其他的参数则在主要列的顺序中描述。
matrix(a, b, c, d, tx, ty)
其中
a b c d  以  的格式来描述线性变换
tx ty  以  的格式来描述变换的量

Animation.matrix3d()
同 transform-function matrix3d
CSS 函数 matrix3d() 用一个 4 × 4 的齐次矩阵来描述一个三维（3D）变换。16个参数都在主要列的顺序中描述。
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
其中
a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4 以  的格式来描述线性变换
a4 b4 c4  以  的格式来描述变换的量

示例：
效果展示

代码
index.wxml

<view class="container">  <view animation="{{animation}}" class="view">----------</view></view><button bindtap='btnClick1' type="primary">动画</button>

index.wxss

button{  margin: 20rpx}

index.js

/*  duration：400  动画持续时间，单位 ms  timingFunction：'linear'  动画的效果  delay：0    动画延迟时间，单位 ms  transformOrigin：'50% 50% 0' 属性允许您改变被转换元素的位置。  transform-origin: x-axis y-axis z-axis;    x-axis   定义视图被置于 X 轴的何处。可能的值：left、center、 right、length、%    y-axis       定义视图被置于 Y 轴的何处。可能的值： top、center、bottom、 length、%    z-axis   定义视图被置于 Z 轴的何处。可能的值：length*/Page({  data: {    animation:''  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {      },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {    //实例化一个动画     this.animation = wx.createAnimation({      duration:1500,                 //动画持续时间，单位 ms      timingFunction: 'linear',     //动画的效果      delay: 100,                   //动画延迟时间      transformOrigin: 'center center 0',//属性允许您改变被转换元素的位置。    })   },  btnClick1: function (options) {    //设置背景色为红色,透明度为0.1    this.animation.backgroundColor('red').step({      duration: 5000,                 //动画持续时间，单位 ms      timingFunction: 'linear',     //动画的效果      delay: 100,                   //动画延迟时间      transformOrigin: 'center center 0',//属性允许您改变被转换元素的位置。    })    this.animation.opacity(0.5).step({})    //旋转180    this.animation.rotate(180).step({})    //从 X 轴顺时针旋转一个角度    this.animation.rotateX(180).step({})    //从 Y 轴顺时针旋转一个角度    this.animation.rotateY(180).step({})    //从 Z 轴顺时针旋转一个角度    this.animation.rotateZ(180).step({})    //缩放    this.animation.scale(1.5,1.5).step({})    //对 xyz 坐标进行平移变换    this.animation.translate3d(0, -200, 0).step({      duration: 5000,                 //动画持续时间，单位 ms      timingFunction: 'linear',     //动画的效果      delay: 100,                   //动画延迟时间      transformOrigin: 'center center 0',//属性允许您改变被转换元素的位置。    })    this.animation.translate3d(50, 50, 0).step({})    this.setData({      //输出动画      animation: this.animation.export()    })  }})