Animation¶
- class Animation()¶
动画对象 由
wx.createAnimation()
创建
方法¶
- Animation.export()¶
导出动画队列。export 方法每次调用后会清掉之前的动画操作。
- 返回类型
Array.<Object>
- 返回
animationData
- Animation.step(Object object)¶
表示一组动画完成。可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。
- 参数
duration (
number()
) – 400 否 动画持续时间,单位 mstimingFunction (
string()
) –‘linear’ 否 动画的效果
’linear’ 动画从头到尾的速度是相同的
’ease’ 动画以低速开始,然后加快,在结束前变慢
’ease-in’ 动画以低速开始
’ease-in-out’ 动画以低速开始和结束
’ease-out’ 动画以低速结束
’step-start’ 动画第一帧就跳至结束状态直到结束
’step-end’ 动画一直保持开始状态,最后一帧跳到结束状态
delay (
number()
) – 0 否 动画延迟时间,单位 mstransformOrigin (
string()
) – ‘50% 50% 0’ 否
- 返回类型
Animation
- 返回
animation
- Animation.matrix()¶
-
- 返回类型
Animation
- 返回
animation
- Animation.matrix3d()¶
-
- 返回类型
Animation
- 返回
animation
- Animation.rotate(number angle)¶
从原点顺时针旋转一个角度
- 参数
angle (
number()
) – 旋转的角度。范围 [-180, 180]
- 返回类型
Animation
- 返回
animation
- Animation.rotate3d(number x, number y, number z, number angle)¶
从 X 轴顺时针旋转一个角度
- 参数
x (
number()
) – 旋转轴的 x 坐标y (
number()
) – 旋转轴的 y 坐标z (
number()
) – 旋转轴的 z 坐标angle (
number()
) – 旋转的角度。范围 [-180, 180]
- 返回类型
Animation
- 返回
animation
- Animation.rotateX(number angle)¶
从 X 轴顺时针旋转一个角度
- 参数
angle (
number()
) – 旋转的角度。范围 [-180, 180]
- Animation.rotateY(number angle)¶
从 Y 轴顺时针旋转一个角度
- 参数
angle (
number()
) – 旋转的角度。范围 [-180, 180]
- Animation.rotateZ(number angle)¶
从 Z 轴顺时针旋转一个角度
- 参数
angle (
number()
) – 旋转的角度。范围 [-180, 180]
- Animation.scale(number sx, number sy)¶
缩放
- 参数
sx (
number()
) – 当仅有 sx 参数时,表示在 X 轴、Y 轴同时缩放sx倍数sy (
number()
) – 在 Y 轴缩放 sy 倍数
- Animation.scale3d(number sx, number sy, number sz)¶
缩放
- 参数
sx (
number()
) – x 轴的缩放倍数sy (
number()
) – y 轴的缩放倍数sz (
number()
) – z 轴的缩放倍数
- Animation.scaleX(number scale)¶
缩放 X 轴
- 参数
scale (
number()
) – X 轴的缩放倍数
- Animation.scaleY(number scale)¶
缩放 Y 轴
- 参数
scale (
number()
) – Y 轴的缩放倍数
- Animation.scaleZ(number scale)¶
缩放 Z 轴
- 参数
scale (
number()
) – Z 轴的缩放倍数
- Animation.skew(number ax, number ay)¶
对 X、Y 轴坐标进行倾斜
- 参数
ax (
number()
) – 对 X 轴坐标倾斜的角度,范围 [-180, 180]ay (
number()
) – 对 Y 轴坐标倾斜的角度,范围 [-180, 180]
- Animation.skewX(number angle)¶
对 X 轴坐标进行倾斜
- 参数
angle (
number()
) – 倾斜的角度,范围 [-180, 180]
- Animation.skewY(number angle)¶
对 Y 轴坐标进行倾斜
- 参数
angle (
number()
) – 倾斜的角度,范围 [-180, 180]
- Animation.translate(number tx, number ty)¶
平移变换
- 参数
tx (
number()
) – 当仅有该参数时表示在 X 轴偏移 tx,单位 pxty (
number()
) – 在 Y 轴平移的距离,单位为 px
- Animation.translate3d(number tx, number ty, number tz)¶
对 xyz 坐标进行平移变换
- 参数
tx (
number()
) – 在 X 轴平移的距离,单位为 pxty (
number()
) – 在 Y 轴平移的距离,单位为 pxtz (
number()
) – 在 Z 轴平移的距离,单位为 px
- Animation.translateX(number translation)¶
对 X 轴平移
- 参数
translation (
number()
) – 在 X 轴平移的距离,单位为 px
- Animation.translateY(number translation)¶
对 Y 轴平移
- 参数
translation (
number()
) – 在 Y 轴平移的距离,单位为 px
- Animation.translateZ(number translation)¶
对 Z 轴平移
- 参数
translation (
number()
) – 在 Z 轴平移的距离,单位为 px
- Animation.opacity(number value)¶
设置透明度
- 参数
value (
number()
) – 透明度,范围 0-1
- Animation.backgroundColor(string value)¶
设置背景色
- 参数
value (
string()
) – 颜色值
- Animation.width(number|string value)¶
设置宽度
- 参数
value (
number|string()
) – 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值
- Animation.height(number|string value)¶
设置高度
- 参数
value (
number|string()
) – 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值
- Animation.left(number|string value)¶
设置 left 值
- 参数
value (
number|string()
) – 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值
- Animation.right(number|string value)¶
设置 right 值
- 参数
value (
number|string()
) – 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值
- Animation.top(number|string value)¶
设置 top 值
- 参数
value (
number|string()
) – 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值
- Animation.bottom(number|string value)¶
设置 bottom 值
- 参数
value (
number|string()
) – 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值
示例代码¶
<view
animation="{{animationData}}"
style="background:red;height:100rpx;width:100rpx"
></view>
Page({
data: {
animationData: {}
},
onShow() {
const animation = wx.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()
})
}
})