css特效之旋转音乐播放器
本次需要用到的知识点有:
- transform
- setInerval
怎么添加背景音乐我会在下一篇介绍 https://www.cnblogs.com/zouwangblog/p/11138734.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);
},
效果图