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

以下是一个示例代码，演示如何在微信小程序中实现圆形图片的旋转以及控制旋转的开始和结束：

              开始旋转    停止旋转

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

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 1s linear;
}

.image {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  object-fit: cover;
}

.btn-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.btn {
  margin: 0 10px;
}

Page({
  data: {
    imageSrc: 'image-url',  // 图片的 URL
    rotate: 0,  // 初始旋转角度
    timer: null,  // 用于存储定时器的引用
  },

  startRotate: function () {
    // 开始旋转，每秒旋转一次，递增旋转角度
    this.data.timer = setInterval(() => {
      const rotate = this.data.rotate + 1
      this.setData({
        rotate: rotate
      })
    }, 1000)
  },

  stopRotate: function () {
    // 停止旋转，清除定时器
    clearInterval(this.data.timer)
  }
})

在上述代码中，我们使用了一个圆形的 view 元素来实现圆形图片的效果，并通过设置 transform: rotate 来控制图片的旋转角度。在点击"开始旋转"按钮后，我们使用 setInterval 设置定时器，每秒递增旋转角度，并更新数据。在点击"停止旋转"按钮后，通过 clearInterval 清除定时器停止旋转。

上一篇：微信小程序movable-view移动图片和双指缩放

下一篇：uniapp 实现渐变圆弧进度条，并且根据实际数值控制进度