ProAdvanced/components/electAni/electAnimation.vue

<template>
	<view>
		<view class="elect-parent">
			<view class="elect-container" :class="[elect._start?' playMove ':'',elect._running?'movePaused':' movePlay ']"
			 :style="{'animation-duration': elect.allSecond+'s'}">
				<view class="elect" :id="elect._id" :style="{ 
					 borderColor: borderColor, 
				     color: color,
					 '--time':elect._remainingTime,
					 backgroundImage:`url(${imageSrc})`}"
				 :class=" elect._running?' play ':''">
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	// 创建对象
	function createElectObj(props) {
		return new ElectObj(props || {})
	}

	function ElectObj(props) {
		this.animationData = props.animationData || null;
		this.allDuration = props.allDuration || 1000;
		this.allSecond = props.allDuration / 1000;
		console.log("this.allSecond=", this.allSecond);
		// 页面对象
		this._id = props.id || 0;
		// return;
		//是否运行心电图
		this._running = false;
		this._left = 0;
		this._startLeft = 0;
		this._start = false;
		this._play = false;
		// 是否在进行播放
		this._bPlaying = false;
		// 移动的距离
		this._Distance = 350;
		//心电图走的时间
		this._remainingTime = 0;
		this.moveTime = 0;

		//计算器
		this._interval = null;

		// 心电图走的速度，
		this._speed = this._Distance / props.allDuration;
		//实列对象的参数
		this.animation = uni.createAnimation();


		//实列音频对象
		this.hitUrl = "../../../static/elect/hit.mp3";
		this.hitTenUrl = "../../../static/elect/hit-ten.mp3";
		this.createUrl = "../../../static/elect/create.mp3";
		this.missUrl = "../../../static/elect/miss.mp3";

		this.playAudioContext = uni.createInnerAudioContext();
		this.playAudioContext.autoplay = false;
		this.playAudioContext.src = this.hitUrl;
		this.playAudioContext.volume = 1;

		// this.missAudioContext = uni.createInnerAudioContext();
		// this.missAudioContext.autoplay = false;
		// this.missAudioContext.src = "../../../static/elect/miss.mp3";
		// this.missAudioContext.volume = 1;

		this.playCount = 0;

	}
	ElectObj.prototype = {
		setVolume: function(volume) {
			// this.missAudioContext.volume = volume;
			this.playAudioContext.volume = volume;
		},
		setDuration: function(_allduration) {
			this.allDuration = _allduration;
			this.allSecond = _allduration / 1000;
			this._speed = this._Distance / _allduration;
		},
		//结束时候重置对应状态
		electEnd: function() {
			console.log("心电图结束");
			this.playCount = 0;
			this.playAudioContext.stop();
			// this.missAudioContext.stop();
			this.setVolume(0);
		},
		//播放序列帧动画
		play: function(_self, _parentLeft) {
			// console.log('play');
			if (this._play) return;
			// 用执行时间来判断
			if (this.moveTime < this.allDuration * 0.1) return;

			this._play = true;
			_self.$emit('onElectPlay');

			if (this.playCount < 5) {
				this.playAudioContext.src = this.hitUrl;
				this.playAudioContext.stop();
				this.playAudioContext.play();
				this.playCount++;
			} else {
				this.playAudioContext.src = this.hitTenUrl;
				this.playAudioContext.stop();
				this.playAudioContext.play();
				this.playCount = 0;
				// console.log("播放特殊音效");

			}
			// 计算点击后剩余的时间
			this._remainingTime = (this.allDuration - this.moveTime) / 1000;

			this._running = true;
		},


		// 移动动画
		move: function(callback) {

			if (this._bPlaying) return;
			this._bPlaying = true;

			this.playAudioContext.src = this.createUrl;
			this.playAudioContext.stop();
			this.playAudioContext.play();

			// 移动前初始化一部分默认参数
			this._play = false;
			this._start = true;

			// console.log("this.allDuration==", this.allDuration);
			let timeUnit = 300;
			this._interval = setInterval(() => {

				this.moveTime += timeUnit;
				if (this.moveTime >= this.allDuration) {
					this._running = false;
					this._start = false;
					// 完成后，初始化到位置最初状态
					clearInterval(this._interval);
					this._interval = null;
					this.moveTime = 0;
					setTimeout(() => {
						if (callback)
							callback();
					}, 100)

				}
			}, timeUnit);
		}
	}
	import imageSrc from "@/static/elect/elect.png"

	export default {
		props: {
			parentLeft: {
				type: Number,
				default: 0
			},
			electLeft: {
				type: Number,
				default: 150
			},
			backgroundColor: {
				type: String,
				default: '#007AFF'
			},
			borderColor: {
				type: String,
				default: '#000000'
			},
			color: {
				type: String,
				default: '#000000'
			},
			duration: {
				type: Number,
				default: 3000
			}
		},
		data() {
			return {
				// 心电图实列数组
				elects: [],
				elect: null,
				bRun: false,
				bInitMissAudio: false,
				bPlayMissAudio: false,
				imageSrc: imageSrc

			};
		},
		created() {
			// 动画要最开始实例化
			this.animation = uni.createAnimation();
			// let initElects = [];
			// for (var i = 0; i < 1; i++) {
			// 	var temp = createElectObj({
			// 		id: 'elect' + i,
			// 		allDuration: this.duration,
			// 	});
			// 	initElects.push(temp);
			// }

			// this.elects = initElects; //Object.assign({},this.elects,initElects);
			this.elect = createElectObj({
				id: 'elect0',
				allDuration: this.duration,
			});

			// setTimeout(() => {
			// 	this.playElect();
			// }, 100)
		},
		methods: {
			/**
			 * 调用移动心电图整体的动画
			 */
			moveElect() {
				// 从数组一个数据做操作，开始循环
				if (!this.bRun) return;
				console.log(this.bRun);
				this.elect.move(() => {
					if (!this.elect._play) {
						// this.elect.missAudioContext.play();
						this.elect.playAudioContext.src = this.elect.missUrl;
						this.elect.playAudioContext.stop();
						this.elect.playAudioContext.play();
						// console.log(11);
						// if (!this.bInitMissAudio) {
						// 	this.elect.playAudioContext.onEnded(() => {
						// 		//最后一个音效播放完后，在继续下一个线段出来
						// 		this.elect._bPlaying = false;
						// 		this.moveElect();
						// 	});
						// 	this.bInitMissAudio = true;
						// }
						setTimeout(() => {
							//最后一个音效播放完后，在继续下一个线段出来
							this.elect._bPlaying = false;
							this.moveElect();
						}, 500);
						this.$emit('onElectMiss')
					} else {
						this.elect._bPlaying = false;
						// this.elect.playAudioContext.offEnded();
						this.moveElect();
					}
				});

			},
			/**
			 * 播放心电图序列帧动画
			 */
			jumpElect() {
				// console.log(11);
				this.elect.play(this, this.parentLeft);
			},

			/**
			 * 暂停播放心电图
			 */
			pausedElect(bEnd) {
				this.bRun = false;
				//声音要暂停
				if (bEnd) {
					this.elect.electEnd();
				}
			},
			/**
			 * 开始播放
			 */
			playElect() {
				this.bRun = true;
				this.moveElect();

			},
			/**
			 * 修改时间
			 * @param {Object} changeDuration
			 */
			changeDuration(changeDuration) {
				this.elect.setDuration(changeDuration);
			},

			/**
			 * 禁音
			 */
			setVolume(volume) {
				this.elect.setVolume(volume);
			}

		}
	}
</script>

<style lang="scss">
	.elect-parent {
		// border: 1rpx solid #ffaa7f;
		position: relative;
		display: flex;
		justify-content: center;
		overflow: hidden;
	}

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

	}

	.elect {
		// background-color: #007AFF;
		background-size: cover;
		height: 68px;
		width: 337px;
		position: relative;
		top: 0;
		left: -156px;
	}

	.playMove {
		// animation: move linear calc(var(--mTime) / 1000 * 1s) both;
		animation-name: move;
		animation-timing-function: linear;
		animation-fill-mode: both;
	}

	.movePlay {
		animation-play-state: running;
	}

	.movePaused {
		animation-play-state: paused;
	}

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

	@keyframes move {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(350px);
		}
	}

	@keyframes run {
		@for $i from 0 through 49 {
			#{$i*2}% {
				background-position: -0px -68px*$i;
			}
		}

		100% {
			background-position: -0px -3400px;
		}
	}
</style>