css特效之旋转音乐播放器

Posted 2022-02-17 zouwangblog

本次需要用到的知识点有：

1. transform
2. setInerval

怎么添加背景音乐我会在下一篇介绍  https://www.cnblogs.com/zouwangblog/p/11097564.html

使用场景：在移动端页面上方添加一个旋转的音乐图标，音乐暂停，停止旋转，音乐播放，继续旋转，这里使用的是vue。

原理：原理很简单，使用setInerval函数来让图片每100ms旋转一次，旋转用css中的transform方法，将旋转角度设置为全局变量，这样在暂停之后继续播放能接着上次的位置继续旋转

 

  <div>
      <audio :src="mus" class="media-audio" loop autoplay ref="MusicPlay"></audio>
      <img :src="musicLogo" class="musicLogo" @click="musicPause" :style="transform: musicRotate"/>   //音乐播放
      <img v-show="musicTF" :src="off" class="musicLogo" @click="musicPlay"/>                           //音乐暂停
    </div>

 

需要用到的变量

 musicTF: false,//是否显示禁止播放
 musicNum: 0,//初始旋转角度
 musicRotate: "rotate(" + 0 + "deg)",
 interval: null,//定时器

方法

　　　　/**
       * 暂停音乐并停止旋转
       */
      musicPause() 
        this.$refs.MusicPlay.pause();
        this.musicTF = true;
        if (this.interval !== null) 
          clearInterval(this.interval);  //停止定时器
        
      ,

      /**
       * 播放音乐并开始旋转
       */
      musicPlay() 
        this.$refs.MusicPlay.play();
        this.musicTF = false
        this.countMusicNum();
      ,

      /**
       * 设置定时器旋转，这个是放在mouted方法中，需要页面一加载就旋转
       */
      countMusicNum() 
        let that = this;
        that.interval = setInterval(function () 
          that.musicNum = that.musicNum + 10;
          that.musicRotate = "rotate(" + that.musicNum + "deg)";
        , 100);
      ,

效果图