I originally wanted to use uni.createAnimation to create a rotation animation, but found that it stopped moving after one rotation and could not rotate in a loop.
Later, I used setInterval to increase the rotation angle by 180 degrees every other cycle. I found that the animation gradually collapsed after running for a period of time. This should be caused by the animation cycle and the timer cycle time not completely matching.
<image :animation="animationData" class="music_img_flag" src="../../static/images/musicflag.png">
</image>
var animation = uni.createAnimation({
duration: 2000,
timingFunction: "linear"
});
this.stopAnimation()
this.timer = setInterval(() => {
this.timeNum += 180;
animation.rotate(this.timeNum).step();
console.log('timeCheck:', this.timeNum)
this.animationData = animation.export();
}, 2000);
Finally, the following method was adopted, directly using CSS to implement the loop rotation animation.
<view class="music_img_flag">
<image src="../../static/images/musicflag.png"></image>
</view>
<style lang="scss" scoped>
.music_img_flag {
position: absolute;
top: 202rpx;
width: 88rpx;
height: 88rpx;
image {
width: 100%;
height: 100%;
animation: animal 2s infinite linear;
-webkit-animation: animal 2s infinite linear;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
}
@keyframes animal {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
}
</style>