效果展示
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()
})
}
})