uniapp 开发小程序背景音乐动画

利用三元运算符加载动态样式实现动画旋转或停止，散开的音符是gif图片。

<template>
	<view class="content">
		<view class="music">
			<img class="imgdh" src="@/static/img/music.gif" v-show="isShow"> </img>
			<img :class="[isShow ? 'mcStart':'mcStop']" src="@/static/img/music_off.png" @click="musicState()"> </img>
		</view>		
	</view>
</template>

<script>
	var innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				isShow:false,				
			}
		},
		onLoad() {
			this.musicContext()
		},
		methods: {
			musicContext(){
				innerAudioContext.autoplay = false;
				innerAudioContext.loop=true; //循环播放
				innerAudioContext.src ='https://vkceyugu.cdn.bspapp.com/VKCEYUGU-df787464-d77c-4180-83c3-6e7add40073e/f4bec8a2-9013-417b-b2d5-68a239c2a97f.mp3';
				// 音乐地址需要是线上的，本地音乐不支持
			},
			musicState(){				
				this.isShow = !this.isShow
				if(this.isShow){
					console.log('播放')
					innerAudioContext.play();
				}else{
					console.log('暂停')
					innerAudioContext.pause();
				}
			},
			
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-image: url('../../static/img/beijing2-2.jpg');
		height: 100vh;
		width: 100vw;
	}
	
	/* 音乐按钮 */
	.music{
		z-index: 9;
		position: fixed;
		right: 1%;
		top: 1%;
		width: 200rpx;
		height: 200rpx;
		/* border: solid 2rpx red; */
	}
	.imgdh{
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: 8%;
		right: 10%;
	}
	.mcStop{
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		right: 30%;
		top: 32%;		
	}
	.mcStart{
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		right: 30%;
		top: 32%;
		animation: anima 5s  infinite linear;
	}
	/* 旋转动画 */
	@keyframes anima {
	    from {transform: rotate(0)}
	    to {transform: rotate(360deg)}
	}


</style>