Compass.wxml

<view class=“anim-pic”>
<image src="/images/img.png" animation="{{animation}}" catchtouchstart=“start” catchtouchend=“end” />
</view>
<view class=“anim-btns”>
<button bindtap=“rotate”>旋转</button>
<button bindtap=“scale”>缩放</button>
<button bindtap=“translate”>移动</button>
<button bindtap=“skew”>倾斜</button>
<button class=“btn-two” bindtap=“rotateAndScale”>旋转并缩放</button>
<button class=“btn-two” bindtap=“rotateThenScale”>旋转后缩放</button>
<button class=“btn-two” bindtap=“all”>同时展示全部</button>
<button class=“btn-two” bindtap=“allOrder”>按顺序展示全部</button>
<button class=“btn-reset” bindtap=“reset”>回到原始状态</button>
</view>

Compass.wxss
page {
background: #f1f1f1;
}

.anim-pic {
width: 400rpx;
height: 400rpx;
margin: 40rpx auto;
}

.anim-pic image {
width: 400rpx;
height: 400rpx;
}

.anim-btns {
padding: 20rpx 10rpx;
border-top: 1px solid #ccc;
display: flex;
flex-grow: 1;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 600rpx;
}

.anim-btns button {
background: #fff;
width: 160rpx;
margin: 10rpx auto;
height: 100rpx;
}

.anim-btns button.btn-reset {
width: 610rpx;
}

.anim-btns button.btn-two {
width: 300rpx;
font-size: 16px;
}

Compass.js
var x1, x2, angle = 0
Page({
data: {
animation: null
},
// 创建动画
onShow: function () {
this.animation = wx.createAnimation({
duration: 1000,
timingFunction: ‘ease’,
})
},
// 滑动动画
start: function(e) {
x1 = e.touches[0].clientX
},
//滑动结束
end: function(e) {
x2 = e.changedTouches[0].clientX
if (x1 < x2) {
angle = angle + 80
} else {
angle = angle - 80
}
this.setData({
animation: this.animation.rotate(angle).step().export()
})
},
// 旋转
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()
})
}
})