简单demo,替换图片可直接运行。
<template>
<view>
<view class="box">
<image src="/static//lottery_img_bt@3x.png" :animation="animationData" width="30rpx" height="30rpx"></image>
<image src="/static//hq3.png" @click="run"></image>
</view>
<view >index:{{result}} -- {{todoList[result]}}</view>
</view>
</template>
<script>
export default {
data() {
return {
animationData: {},
lastResult: 0,
result: 0,
deg: 0,
todoList: ["跑步", "游泳", "学习", "读书", "工作", "休息"],
}
},
methods: {
run() {
let animation = uni.createAnimation({
transformOrigin: "50% 50%",
duration: 2000,
timingFunction: "ease",
delay: 0
});
this.animationData = animation;
this.animationData.rotate(this.randomNum()).step();
this.animationData = this.animationData.export();
},
randomNum() {
this.result = Math.floor(Math.random() * 5); //数组索引:[0,5]
if (this.result > this.lastResult) {
this.deg += 360 * 3 + (this.result - this.lastResult) * 60;
} else {
this.deg += 360 * 3 + 360 - (this.lastResult - this.result) * 60;
}
console.log(`result:${this.result},deg:${this.deg}`);
this.lastResult = this.result;
return this.deg;
},
}
}
</script>
<style>
.box {
width: 300rpx;
height: 300rpx;
margin: auto;
position: relative;
}
image {
position: absolute;
width: 300rpx;
height: 300rpx;
}
</style>