ProAdvanced/components/modal/boxing-post/ef-bone.vue

<template>
	<view style="position: relative;">
		<view v-if="!bHit&&bMove" class="ef-abs">
			<view class="ef-parent">
				<view class="ef-container">
					<view class="focusEnergy playEnergy" :style="{
						 '--time':duration,
						 backgroundImage:`url(${energyImageSrc})`}">
					</view>
				</view>
			</view>
		</view>
		
		<view :class="bHit?' ef-hidden ':''" class="flex justify-around " style="margin-bottom: 16rpx; height: 300rpx;">
			<view style="position: relative;width: 133rpx;">
				<view :class="[bLeftHidden?'ef-hidden ':'',efLeftValue==0?'':'ef-ani']" class="flex flex-direction justify-between ef-leftHand"
				 :style="{'left': efLeftValue+'px'}">
					<image src="/static/modal/boxing-post/left-hook-h@2x.png" :class="bLeftHidden?'':' ef-image-change '" class="ef-png " mode="aspectFit"></image>
					<view class="text-white text-13px" style="margin: 35rpx 0;">左勾拳</view>
				</view>
			</view>
			<view>
				<view :class="bMidHidden?'ef-mid-ani ':''" class="flex flex-direction justify-between ef-midHand">
					<image src="/static/modal/boxing-post/straight-h@2x.png" :class="bMidHidden?'':' ef-image-change '" class="ef-png " mode="aspectFit"></image>
					<view class="text-white text-13px" style="margin: 35rpx 0;">直拳</view>
				</view>
			</view>
			<view style="position: relative;width: 133rpx;">
				<view :class="[bRightHidden?'ef-hidden ':'',efRightValue==0?'':'ef-ani']" class="flex flex-direction justify-between ef-rightHand"
				 :style="{'left': efRightValue+'px'}">
					<image src="/static/modal/boxing-post/right-hook-h@2x.png" :class="bRightHidden?'':' ef-image-change '" class="ef-png " mode="aspectFit"></image>
					<view class="text-white text-13px" style="margin: 35rpx 0;">右勾拳</view>
				</view>
			</view>

		</view>
		<!-- <button @tap="onMoveLeftAndRightPos">123</button> -->
		<!-- <button @tap="onReset">reset</button> -->
		<!-- <button @tap="onEFHit">hit</button> -->

		<view v-if="bHit" class="ef-abs" style="left: 50rpx;top: 100rpx;">
			<view class="ef-parent">
				<view class="ef-container">
					<view class="ef-bone playBone" :style="{ 
						 '--time':duration,
						 backgroundImage:`url(${boneImageSrc})`}">
					</view>
				</view>
			</view>
		</view>


	</view>

</template>

<script>
	import boneImageSrc from "@/static/modal/boxing-post/ef/bone.png"
	import energyImageSrc from "@/static/modal/boxing-post/ef/focusEnergy.png"

	export default {
		props: {
			duration: {
				type: Number,
				default: 0.8
			}
		},
		data() {
			return {
				boneImageSrc: boneImageSrc,
				energyImageSrc: energyImageSrc,
				efLeftHand: null,
				efRightHand: null,
				efMidHand: null,
				efLeftValue: 0,
				efRightValue: 0,
				randomIndex: 0,
				bLeftHidden: false,
				bMidHidden: false,
				bRightHidden: false,

				bMove: false,
				bHit: false,

				gasUrl: "/static/modal/boxing-post/ef/gas.mp3",
				gasUpUrl: "/static/modal/boxing-post/ef/gasUp.mp3",
				hitBoneUrl: "/static/modal/boxing-post/ef/hitBone.mp3",
				giveGoTipUrl: "/static/modal/boxing-post/tipGiveItAGo.mp3",

				efAudioContext: null,
				efAudioLoop: null,
				efTimeout: null,
			};
		},
		created() {
			
		},
		beforeDestroy() {
			// this.efAudioContext.stop();
			if (this.efAudioContext)
				this.efAudioContext.destroy();
			if (this.efTimeout)
				clearTimeout(this.efTimeout);
			// if(this.efAudioLoop)
			// 	clearInterval(this.efAudioLoop);
		},
		mounted() {
			setTimeout(() => {
				this.getMidHandSize()
			}, 100)
			
			let _self = this;

			_self.efAudioContext = uni.createInnerAudioContext();
			_self.efAudioContext.autoplay = true;
			_self.efAudioContext.src = _self.gasUpUrl;
			_self.efAudioContext.volume = 0.5;

			_self.efTimeout = setTimeout(() => {
				_self.efAudioContext.stop();
				_self.efAudioContext.src = _self.gasUrl;
				_self.efAudioContext.loop = true;
				_self.efAudioContext.volume = 0.2;
				_self.efAudioContext.play();
			}, 1500);

		},
		methods: {
			getMidHandSize() {
				let _self = this;

				const views1 = uni.createSelectorQuery().in(this).select('.ef-midHand')
				views1.boundingClientRect(data => {
					console.log("ef-midHand:", data);
					_self.efMidHand = data;
				}).exec();

				const views2 = uni.createSelectorQuery().in(this).select('.ef-leftHand');
				views2.boundingClientRect(data => {
					console.log("ef-leftHand:", data);
					_self.efLeftHand = data;
				}).exec();

				const views3 = uni.createSelectorQuery().in(this).select('.ef-rightHand');
				views3.boundingClientRect(data => {
					console.log("ef-rightHand:", data);
					_self.efRightHand = data;
				}).exec();

				setTimeout(() => {
					this.onMoveLeftAndRightPos();
				}, 200);
			},
			onReset() {
				let _self = this;
				_self.efLeftValue = 0;
				_self.efRightValue = 0;

				_self.bLeftHidden = false;
				_self.bRightHidden = false;
				_self.bMidHidden = false;

				_self.bMove = false;
				_self.bHit = false;
			},
			//移动位置
			onMoveLeftAndRightPos() {
				let _self = this;
				_self.efLeftValue = _self.efMidHand.left - _self.efLeftHand.left;
				_self.efRightValue = _self.efMidHand.left - _self.efRightHand.left;

				_self.bMove = true;

				//随机一个
				_self.randomIndex = Math.floor(Math.random() * 3);
				let _randomName = "";
				let _direction = "";
				if (0 === _self.randomIndex) {
					//显示左
					_self.bRightHidden = true;
					_self.bMidHidden = true;
					_randomName = "左勾拳";
					_direction = "xRCount";
				} else if (1 === _self.randomIndex) {
					//显示右
					_self.bLeftHidden = true;
					_self.bMidHidden = true;
					_randomName = "右勾拳";
					_direction = "xLCount";
				} else if (2 === _self.randomIndex) {
					//显示中
					_self.bLeftHidden = true;
					_self.bRightHidden = true;
					_randomName = "直拳";
					_direction = "zLCount";
				}

				this.$emit("randomIndex", {
					index: _self.randomIndex,
					name: _randomName,
					direction: _direction
				});

			},
			onEFHit(callback) {
				this.bHit = true;

				this.efAudioContext.stop();
				this.efAudioContext.src = this.hitBoneUrl;
				this.efAudioContext.loop = false;
				this.efAudioContext.volume = 0.7;
				this.efAudioContext.play();

				setTimeout(() => {
					this.onReset();
					if (callback)
						callback();
				}, this.duration * 1000);
			}

		}
	}
</script>

<style lang="scss">
	.ef-abs {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		display: flex;
		justify-content: center;
		pointer-events: none;
		transform: scale(2.5);
	}

	.ef-parent {
		// border: 1rpx solid #ffaa7f;
		position: relative;
		display: flex;
		justify-content: center;
		overflow: hidden;
		pointer-events: none;
	}

	.ef-container {
		width: 100%;
		height: 187px;
		position: relative;

	}

	.ef-bone {
		// background-color: #007AFF;
		background-size: cover;
		height: 112px;
		width: 102px;
		position: relative;
		top: 0;
		left: 0;
	}


	.playBone {
		animation: runBone calc(var(--time) * 1s) steps(1, start) forwards;
		-webkit-animation: runBone calc(var(--time) * 1s) steps(1, start) forwards;
	}

	.focusEnergy {
		// background-color: #007AFF;
		background-size: cover;
		height: 152px;
		width: 105px;
		position: relative;
		top: 0;
		left: 0;
	}

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

	@keyframes runBone {
		@for $i from 0 through 13 {
			#{$i*8.3}% {
				background-position: -0px -112px*$i;
			}
		}
	}
	@-webkit-keyframes runBone {
		@for $i from 0 through 13 {
			#{$i*8.3}% {
				background-position: -0px -112px*$i;
			}
		}
	}

	@keyframes runEnergy {
		@for $i from 0 through 14 {
			#{$i*7.14}% {
				background-position: -0px -152px*$i;
			}
		}
	}
	
	@-webkit-keyframes runEnergy {
		@for $i from 0 through 14 {
			#{$i*7.14}% {
				background-position: -0px -152px*$i;
			}
		}
	}

	.ef-png {
		margin-top: 40rpx;
		width: 133rpx;
		height: 133rpx;
		transition: transform 1s;
	}

	.ef-change {
		transform: scale(1.58);
	}

	.ef-image-change {
		animation-name: myEfImagechange;
		/*动画的名字*/
		animation-duration: 300ms;
		/*定义动画完成一个周期所需要的时间，以秒或毫秒计*/
		animation-iteration-count: infinite;
		/*定义动画的播放次数，这里是无限播放*/
		animation-direction: alternate;
		/*定义是否应该轮流反向播放动画，这里是动画轮流播放*/
	}

	@keyframes myEfImagechange {
		0% {
			transform: scale(1);
		}

		100% {
			transform: scale(1.4);
		}
	}

	.ef-leftHand {
		position: absolute;
		left: 0px;
	}

	.ef-ani {
		transition: opacity 1s, left 1s;
	}

	.ef-rightHand {
		position: absolute;
		left: 0px;
	}

	.ef-mid-ani {
		transition: opacity 1s;
		opacity: 0;
	}

	.ef-opacity-ani {
		transition: opacity 1s;
	}

	.ef-hidden {
		// visibility: hidden;
		opacity: 0;
	}
</style>