ProAdvanced/components/effectHit/hitEffect.vue

<template>
	<view>
		<view v-if="bPlay" class="HitEffect-parent">
			<view class="HitEffect-container" :style="{'animation-duration': 0+'s'}">
				<view class="HitEffect" :id="1" :style="{ 
					 '--time':1,
					 backgroundImage:`url(${imageSrc})`}"
				 :class=" bPlay?' play ':''">
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import imageSrc from "@/static/effectHit/hitEffect.png"

	export default {
		props: {
			
		},
		data() {
			return {
				imageSrc: imageSrc,
				bPlay:false,
				hitTimeOut:null,
				hitAudioContext:null,
				myHit: "/static/effectHit/pkHit.mp3",
				aiHit: "/static/effectHit/pkStricken.mp3",
			};
		},
		created() {
			this.hitAudioContext = uni.createInnerAudioContext();
			this.hitAudioContext.autoplay = false;
			this.hitAudioContext.src = this.myHit;
			
		},
		beforeDestroy() {
			if (this.hitAudioContext)
				this.hitAudioContext.destroy();
		},
		methods: {
			onAIHit(){
				this.hitAudioContext.stop();
				this.hitAudioContext.volume = 0.8;
				this.hitAudioContext.src = this.aiHit;
				this.hitAudioContext.play();
				
			},
			onMyHit(){
				this.hitAudioContext.stop();
				this.hitAudioContext.volume = 0.4;
				this.hitAudioContext.src = this.myHit;
				this.hitAudioContext.play();
			},
			onPlay(){
				this.bPlay = true;
				if(this.hitTimeOut){
					clearTimeout(this.hitTimeOut);
					this.hitTimeOut = null;
				}
				
				this.hitTimeOut = setTimeout(()=>{
					this.bPlay = false;
				},1000);
			},
			onStop(){
				this.bPlay = false;
				if(this.hitTimeOut){
					clearTimeout(this.hitTimeOut);
					this.hitTimeOut = null;
				}
			}

		}
	}
</script>

<style lang="scss">
	.HitEffect-parent {
		// border: 1rpx solid #ffaa7f;
		position: absolute;
		display: flex;
		justify-content: center;
		overflow: hidden;
		top: -50px;
		left: -35px;
		transform: scale(0.5);
	}

	.HitEffect-container {
		width: 100%;
		height: 167px;
		// border: 1rpx solid #000000;
		position: relative;

	}

	.HitEffect {
		// background-color: #007AFF;
		background-size: cover;
		height: 167px;
		width: 146px;
		position: relative;
		top: 0;
		left: 0;
		
	}

	.play {
		animation: hitEffectRun calc(var(--time) * 1s) steps(1, start) infinite;
		animation-play-state: running;
	}

	@keyframes hitEffectRun {
		@for $i from 0 through 9 {
			#{$i*11.1}% {
				background-position: -0px -167px*$i;
			}
		}
	}
</style>