零基础建站培训教程介绍

当前位置:

如何制作旋转音乐图标播放器

我们在网上听音乐时,经常会看到一些音乐网站在播放音乐时,会有碟片旋转的效果,这是怎么做出来的呢?下面学做网站论坛就来分享一下如何制作旋转音乐图标播放器。

使用场景:在移动端页面上方添加一个旋转的音乐图标,音乐暂停,停止旋转,音乐播放,继续旋转,这里使用的是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);
      },

通过以上的代码就可以制作出一个旋转的在线音乐播放器了。

相关教程

发表评论

电子邮件地址不会被公开。 必填项已用*标注

学做网站论坛零基础学建网站课程