The WeChat applet makes a circular picture rotation that can control the start and end
1. Add a tag in the WXML file, set the src and style of the image, and bind an animation to it to control the rotation animation.
<image src="{
{imageUrl}}" class="rotate-image" animation="{
{rotationAnim}}"></image>
2. Add styles to the WXSS file, set the picture as a circle and display it in the center.
.rotate-image {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin: 0 auto;
}
3. Define the rotation animation object and control method in the JS file.
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. Add buttons in the WXML file to trigger the start and end rotation animation.
<button bindtap="rotateImage">开始旋转</button>
<button bindtap="stopRotateImage">停止旋转</button>
In the above steps, the rotateImage method realizes the rotation animation of the image by creating an animation object, and exports the animation in the setData() method and assigns it to rotationAnim to realize the animation effect. The stopRotateImage method stops the rotation of the image by setting the rotation animation to its initial state.
Through the above steps, you can realize the rotation of a circular picture in the WeChat applet, and control the start and end of the rotation through the button.