ProAdvanced/components/electAni/character.vue

<template>
	<view class="character-parent">
		<view class="character-container">
			<view class="character" :class="deley?'play':''" :style="{backgroundImage:`url(${imageSrc})`}"></view>
		</view>
		<!-- <button @tap="onplay()">play</button> -->
	</view>
</template>

<script>

	import imageSrc from "@/static/character/character.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: [],
				bRun:false,
				deley:true,
				imageSrc:imageSrc
			};
		},
		created() {
			// setTimeout(()=>{
			// 	this.deley = true;
			// 	console.log("character created");
			// },5000)
		},
		methods: {
			onplay(){
				this.deley = true;
				console.log("character created");
			}
			
		}
	}
</script>

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

	.character-container {
		width: 125px;
		// height: 830px;
		// border: 1rpx solid #000000;
		position: relative;
		overflow: hidden;
	}

	.character {
		background-repeat: no-repeat;
		width: 125px;
		height: 138px;
		position: relative;
	
		// background-color: #007AFF;
	}
	
	.play{
		animation: character-run 1s steps(1, start) infinite;
		animation-play-state: running;
	}
	
	@keyframes character-run {
		0%,100% {
			background-position: 0 0;
		}
		@for $i from 1 through 34 {
			
			#{$i*3.03}% {
				background-position: 0 -138px*$i;
			}
		}
	}
</style>