标签：特效 ota interval 初始 移动 html src dia 停止
本次需要用到的知识点有：
怎么添加背景音乐我会在下一篇介绍 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); },
效果图
标签：特效 ota interval 初始 移动 html src dia 停止
原文地址：https://www.cnblogs.com/zouwangblog/p/11097490.html
