实现微信小程序中的图片旋转效果

<view class="container">
  <image class="image" src="{{imageUrl}}" mode="aspectFill" bindtap="rotateImage"></image>
</view>

Page({
  data: {
    imageUrl: '/images/image.jpg', // 设置图片地址，可以替换为自己的图片路径
    rotateAngle: 0 // 初始化旋转角度为0
  },

  rotateImage: function () {
    var animation = wx.createAnimation({
      duration: 1000, // 设置动画持续时间
      timingFunction: 'linear' // 设置动画的缓动函数
    })

    animation.rotate(this.data.rotateAngle + 90).step() // 每次旋转90度
    this.setData({
      rotateAngle: this.data.rotateAngle + 90,
      animationData: animation.export()
    })
  }
})

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.image {
  width: 200rpx;
  height: 200rpx;
  animation: rotation 2s infinite linear; 
}

@keyframes rotation {
  0% {
    -WEBkit-transfORM: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}