微信小程序中实现转圈动画及暂停
这几天在学习微信小程序开发,打算先写一个简单的音乐播放器练练手。记录遇到的动画相关的问题。
练手的小程序只有2个页面,一个搜歌,一个放歌。其中放歌页面山寨网易云音乐的布局,用唱片机的方式来实现动画效果。如下图:
其中唱片机的指针在音乐没有播放时是处于分离状态,使用相关css:
#play_needle image{
width: 187rpx;
height: 314rpx;
position:absolute;
top: 0rpx;
left:375rpx;
margin-left:-25rpx;
margin-top:-30rpx;
transform-origin:25rpx 30rpx;
z-index:101;
transform: rotate(-20deg);
transition: all linear .5s
}
使用transform-origin
指定旋转的中心偏移,因为图片的左上角并不是真正的指针尾部。然后用transform
属性指定旋转-20°。当音乐播放时,只需要为图片添加以下class即可,让他与唱片圆盘接触。用transition
指定线性动画效果。
#play_needle .playing_needle{
transform: rotate(0);
}
重点是如何实现唱片的360度无限循环转动?
如果是web环境下,我们可以使用CSS3的animation动画,方法如下:
@keyframes circle
{
0% {transform:rotate(0deg);}
50% {transform:rotate(180deg);}
100% {transform:rotate(360deg);}
}
#music_covert{
text-align: center;
width:450rpx;
height:450rpx;
margin:160rpx auto 0 auto;
position:relative;
animation: circle 20s linear infinite;
animation-play-state: pasued;
-webkit-animation: circle 20s linear infinite;
animation-play-state: paused;
}
先定义一个名为circle
的动画,效果是从0到180再到360度旋转。使用animation-play-state
属性切换running
还是paused
状态,来实现动画的暂停与播放。
这种在微信小程序开发工具调试中效果相当完美。但是实际放到手机上(我使用的IOS10)微信里时,缺实现不了动画的暂停。官方也解释说,微信小程序目前对于CSS3的特性,特别是动画支持的不好。那么如何实现这一效果呢?
所幸微信小程序官方API里提供了animation
相关的方法,我们只需要稍微hack一下即可曲线救国。
let animation = wx.createAnimation({
duration:100,
});
that.data.animationIntervalId = setInterval(function(){
that.setData({
animation:animation.rotate((++that.data.rotateCount)*2).step().export()
});
},100);
首先定义一个animation
对象,动画时长为100ms。然后将其效果定义为旋转(++that.data.rotateCount)*2
度,每隔100ms设置一次动画,即可让其360度平滑旋转了。
那么如何让它停下来?只需要把之前记录的intervalId
清理掉即可,保险起见还可以清空animation
数据。
if(that.data.animationIntervalId != null){
clearInterval(that.data.animationIntervalId);
}
that.setData({
animation: ''
});
至此唱片机的动画效果就大功告成啦!
项目的github地址在这里。