微信小程序做一个圆形图片旋转可以控制开始和结束-音乐播放器的图片旋转功能

微信小程序做一个圆形图片旋转可以控制开始和结束

1.在 WXML 文件中添加一个 标签，并设置图片的 src 和样式，并为其绑定一个 animation 用来控制旋转动画。

<image src="{
     
     {imageUrl}}" class="rotate-image" animation="{
     
     {rotationAnim}}"></image>

2.在 WXSS 文件中添加样式，将图片设置为圆形并居中显示。

.rotate-image {
    
    
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin: 0 auto;
}

3.在 JS 文件中定义旋转动画对象和控制方法。

Page({
    
    
  data: {
    
    
    imageUrl: '图片地址',
    rotationAnim: {
    
    }
  },
  rotateImage: function() {
    
    
    var animation = wx.createAnimation({
    
    
      duration: 2000,  // 动画持续时间，单位ms
      timingFunction: 'linear'  // 线性动画
    });
    animation.rotate(360).step();  // 旋转360度
    this.setData({
    
    
      rotationAnim: animation.export()
    });
  },
  stopRotateImage: function() {
    
    
    var animation = wx.createAnimation();
    animation.rotate(0).step();  // 旋转到初始状态
    this.setData({
    
    
      rotationAnim: animation.export()
    });
  }
})

4.在 WXML 文件中添加按钮来触发开始和结束旋转动画。

<button bindtap="rotateImage">开始旋转</button>
<button bindtap="stopRotateImage">停止旋转</button>

在以上步骤中，rotateImage 方法通过创建一个动画对象来实现图片的旋转动画，并在 setData() 方法中将动画导出并赋值给rotationAnim 实现动画效果。stopRotateImage 方法则通过将旋转动画设置为初始状态来停止图片旋转。

通过以上步骤可以在微信小程序中实现一个圆形图片的旋转，并通过按钮控制开始和结束旋转。