文章目录
微信小程序-动画
概述
通过调用 wx.createAnimation() 方法创建 Animation 实例。
let animation = wx.createAnimation(Object)
再通过调用 Animation 的各方法实现动画效果。
wx.createAnimation()方法:
选项 | 类型 | 说明 |
---|---|---|
duration | number | 动画持续事件,单位为毫秒,默认值为 400 |
timingFunction | string | 动画的效果,默认值为 linear |
delay | number | 动画延迟执行的事件,单位为毫秒,默认值为 0 |
transformOrigin | string | 设置旋转元素的基点位置,默认值为 50% 50% 0,这3个值分别表示 x轴、y轴、z轴 |
timingFunction合法值:
合法值 | 说明 |
---|---|
linear | 动画全程线性速度 |
ease | 动画先低速开始,然后加快,在结束前变慢 |
ease-in | 动画以低速开始 |
ease-in-out | 动画以低速开始和结束 |
ease-out | 动画以低速结束 |
step-start | 动画第一帧就跳至结束状态知道结束 |
step-end | 动画一直保持开始状态,最后一帧跳到结束状态 |
Animation方法:
方法 | 说明 |
---|---|
rotate(number angle) | 旋转。从原点顺时针旋转一个角度,角度取值范围为 [-180,180] |
export() | 导出动画队列。export() 方法每次调用后会清掉之前的动画操作 |
scale(number sx, number sy) | 缩放。当仅有 sx 参数时,表示在 X 轴、Y 轴同时缩放sx倍数,在 Y 轴缩放 sy 倍数 |
translate(number tx, number ty) | 平移。当仅有该参数时表示在 X 轴偏移 tx,单位 px,在 Y 轴平移的距离,单位为 px |
skew(number ax, number ay) | 倾斜。对 X 轴坐标倾斜的角度,范围 [-180, 180],对 Y 轴坐标倾斜的角度,范围 [-180, 180] |
step(Object object) | 表示一组动画完成。可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。 |
opacity(number value) | 设置透明度,范围为 0~1 |
backgroundColor(string value) | 设置背景色 |
width(number|string value) | 设置宽度 |
top(number|string value) | 设置 top 值 |
使用
xml
<view class="anim-pic">
<image src="/images/img.png" animation="{{animation}}" />
</view>
<view class="anim-btns">
<button bind:tap="rotate">旋转</button>
<button bind:tap="scale">缩放</button>
<button bind:tap="translate">移动</button>
<button bind:tap="skew">倾斜</button>
<button bind:tap="rotateAndScale">同时旋转和缩放</button>
<button bind:tap="rotateThenScale">先旋转后缩放</button>
<button bind:tap="all">同时展示全部</button>
<button bind:tap="allOrder">按顺序展示全部</button>
<button class="reset" bind:tap="reset">重置</button>
</view>
js
Page({
data: {
animation: {}
},
/** 旋转 */
rotate: function () {
this.animation.rotate(Math.random() * 720 - 360).step()
this.setData({
animation: this.animation.export()
})
},
/** 缩放 */
scale: function () {
this.animation.scale(Math.random() * 2).step()
this.setData({
animation: this.animation.export()
})
},
/** 平移 */
translate: function () {
this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
this.setData({
animation: this.animation.export()
})
},
/** 倾斜 */
skew: function () {
this.animation.skew(Math.random() * 90, Math.random() * 90).step()
this.setData({
animation: this.animation.export()
})
},
/** 同时旋转和缩放 */
rotateAndScale: function () {
this.animation.rotate(Math.random() * 720 - 360)
this.animation.scale(Math.random() * 2).step()
this.setData({
animation: this.animation.export()
})
},
/** 先选择后缩放 */
rotateThenScale: function () {
this.animation.rotate(Math.random() * 720 - 360).step()
this.animation.scale(Math.random() * 2).step()
this.setData({
animation: this.animation.export()
})
},
/** 同时旋转、缩放、平移、倾斜 */
all: function () {
this.animation.rotate(Math.random() * 720 - 360)
this.animation.scale(Math.random() * 2)
this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
this.animation.skew(Math.random() * 90, Math.random() * 90).step()
this.setData({
animation: this.animation.export()
})
},
/** 按顺序执行:旋转、缩放、平移、倾斜 */
allOrder: function () {
this.animation.rotate(Math.random() * 720 - 360).step()
this.animation.scale(Math.random() * 2).step()
this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
this.animation.skew(Math.random() * 90, Math.random() * 90).step()
this.setData({
animation: this.animation.export()
})
},
/** 重置 */
reset: function () {
this.animation.rotate(0).scale(1).translate(0, 0).skew(0, 0).step({
duration: 0
})
this.setData({
animation: this.animation.export()
})
},
/
onReady: function () {
this.animation = wx.createAnimation({
duration: 1000,
timingFunction: "ease"
})
}
})