图标的旋转

方法一： 利用CSS来实现图标的旋转（很棒）

@keyframes box-ani {

  from {transform: rotate(0)}

  to {transform: rotate(360deg)}

}

.songimg{

  border-radius:50%;

  position: relative;

  /* margin-left: -30rpx; */

  animation: box-ani 4s  infinite linear;

}

在组件上利用 style="animation-play-state:{{music_playing?'running':'paused'}}" 来控制暂停和开始

 

方法二：利用animationg来实现动画的旋转，并且通过定时器来控制连续旋转和停止（但是在转有bug，来的存储的值未清除，有时间解决）

 

var _animationIndex = 0; // 动画执行次数index（当前执行了多少次）

var _animationIntervalId = -1; // 动画定时任务id，通过setInterval来达到无限旋转，记录id，用于结束定时任务

const _ANIMATION_TIME = 1000; // 动画播放一次的时长ms

//开始旋转

startAnimationInterval: function () {

  var that = this;

  that.rotateAni(++ _animationIndex); //进行一次旋转

  _animationIntervalId = setInterval(

    function () {

      that.rotateAni(++_animationIndex);

    }, _ANIMATION_TIME

  )

},

//停止旋转

stopAnimationInterval: function () {

  if(_animationIndex > 0){

    clearInterval(_animationIntervalId);

    _animationIntervalId = 0;

    _animationIndex = 0;

 

  }

},