效果展示

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  动画持续时间，单位 mstimingFunction：'linear'  动画的效果delay：0    动画延迟时间，单位 mstransformOrigin：'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,                 //动画持续时间，单位 mstimingFunction: 'linear',     //动画的效果delay: 100,                   //动画延迟时间transformOrigin: 'center center 0',//属性允许您改变被转换元素的位置。}) },btnClick1: function (options) {//设置背景色为红色,透明度为0.1this.animation.backgroundColor('red').step({duration: 5000,                 //动画持续时间，单位 mstimingFunction: 'linear',     //动画的效果delay: 100,                   //动画延迟时间transformOrigin: 'center center 0',//属性允许您改变被转换元素的位置。})this.animation.opacity(0.5).step({})//旋转180this.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,                 //动画持续时间，单位 mstimingFunction: 'linear',     //动画的效果delay: 100,                   //动画延迟时间transformOrigin: 'center center 0',//属性允许您改变被转换元素的位置。})this.animation.translate3d(50, 50, 0).step({})this.setData({//输出动画animation: this.animation.export()})}
})