微信小程序做一个圆形图片旋转可以控制开始和结束
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, // 动画持续时间，单位mstimingFunction: '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 方法则通过将旋转动画设置为初始状态来停止图片旋转。
通过以上步骤可以在微信小程序中实现一个圆形图片的旋转，并通过按钮控制开始和结束旋转。
