这几天在学习微信小程序开发，打算先写一个简单的音乐播放器练练手。记录遇到的动画相关的问题。

练手的小程序只有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地址在这里。