uniapp动画小米8没有反应如何回事
林子帆 2023-09-11编程经验
为什么uniapp动画在小米8没有反应？在使用uniapp进行开发时，有时可能会遇到小米8没有反应的问题。这可能是由于小米8的某些特定优化导致的。代码示例
为什么uniapp动画在小米8没有反应？
在使用uniapp进行开发时，有时可能会遇到小米8没有反应的问题。这可能是由于小米8的某些特定优化导致的。
代码示例
<template>
<view class="container">
<view class="animated"></view>
</view>
</template>
<script>
export default {
onReady() {
this.animation = uni.createAnimation({
duration: 1000,
timingFunction: 'linear',
delay: 0,
transformOrigin: '50% 50% 0'
})
},
methods: {
animate() {
this.animation.rotate(180).step()
this.setData({
animation: this.animation.export()
})
}
}
}
</script>
<style scoped>
.container {
width: 200rpx;
height: 200rpx;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.animated {
width: 100rpx;
height: 100rpx;
background: red;
}
</style>
如何解决？
有两种方法可以解决这个问题：
1. 使用手动渐进动画：将动画拆分成多个帧，并逐渐执行每个帧，以避免小米8的优化问题。
代码示例
<template>
<view class="container">
<view :style="{'transform': 'rotate(' + degree + 'deg)'}" class="animated"></view>
</view>
</template>
<script>
export default {
data() {
return {
degree: 0
}
},
mounted() {
this.animate()
},
methods: {
animate() {
const timer = setInterval(() => {
if (this.degree < 180) {
this.degree += 10
} else {
clearInterval(timer)
}
}, 50)
}
}
}
</script>
<style scoped>
.container {
width: 200rpx;
height: 200rpx;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.animated {
width: 100rpx;
height: 100rpx;
background: red;
}
</style>
2. 使用setTimeout()函数：使用setTimeout()函数，将动画延迟执行，以便固定时间后再进行动画。
代码示例
<template>
<view class="container">
<view :style="{'transform': 'rotate(' + degree + 'deg)'}" class="animated"></view>
</view>
</template>
<script>
export default {
data() {
return {
degree: 0
}
},
mounted() {
setTimeout(() => {
this.animate()
}, 100)
},
methods: {
animate() {
this.degree += 180
this.$nextTick(() => {
this.degree += 180
})
}
}
}
</script>
<style scoped>
.container {
width: 200rpx;
height: 200rpx;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.animated {
width: 100rpx;
height: 100rpx;
background: red;
}
</style>
总结
如果您在使用uniapp进行开发时，遇到小米8没有反应的问题，可以尝试手动渐进动画或使用setTimeout()函数，以解决这个问题。
很赞哦！ ()