第一次做這種小游戲，剛開始任務下來我心里是沒底的，因為我就一個‘拍黃片’的，我那會玩前端的動畫啊，后面嘗試寫了半天，當即我就給我領(lǐng)導說，你把我工資加上去，我一個星期給你做出來，算了不開玩笑了，‘拍黃片’工資低，還要被java和前端歧視，日子不好過啊，做別人不愿意接的活，還沒話語權(quán)，沒人權(quán)。。
下面是主要代碼

背景移動

		<view class="bgBox">
			<view class="bgimg" class="bg"
				:style="'animation-play-state:'+actived+';animation-timing-function:steps('+bgTiming+');'"></view>
		</view>

    
 .bgBox {
		width: 100%;
		height: 100vh;
		animation-direction: normal;
		animation-iteration-count: 1;
	}

	.bgimg {
		width: 100%;
		height: 100%;
		background: url('你的背景長圖') no-repeat;
		background-size: 100% auto;
		display: block;
		animation-duration: 13s;
	}



	.bg {
		background-position: right top;
		animation-name: bg-action;
		animation-iteration-count: 1;
		animation-duration: 13s;
	}
	@keyframes bg-action {
		from {
			background-position: right 100%;
		}

		to {
			background-position: right 0;
		}
	}

     //動畫開始
     this.actived='running';
     //動畫暫停
     this.actived = 'paused';

魚

		<view class="fishbox" :style="'animation-duration:'+goupData+'s;animation-play-state:'+actived"
			:class="yuType?'myElement':''">
			<view class="fish" :style="'animation-duration:'+sudata+'s;animation-play-state:'+actived"></view>
		</view>

	.fishbox {
		width: 300rpx;
		height: 350rpx;
		position: absolute;
		bottom: 600rpx;
		animation-name: run;
		animation-direction: normal;
		animation-iteration-count: 1;
	}

	.fish {
		width: 100%;
		height: 96%;
		margin-left: 75%;
		background: url('../../static/jhy/lyylm/yu7.png') no-repeat left top;
		background-size: 100% auto;
		animation-name: play-action;
		animation-iteration-count: infinite;
		animation-timing-function: steps(5);
	}
	@keyframes run {
		0% {
			transform: translateY(180px);
		}

		90% {
			transform: translateY(-230px);
		}

		100% {
			transform: translateY(-350px);
		}
	}
	@keyframes play-action {
		from {
			background-position: left 0;
		}

		to {
			background-position: left 111.3%;
		}
	}

     //動畫開始
     this.actived='running';
     //動畫暫停
     this.actived = 'paused';

總結(jié)：
關(guān)于動畫結(jié)束，給一個默認結(jié)束時間，比如10S，在點擊開始方法里面寫一個定時器，每秒減1，當時間等于0時結(jié)束動畫，消除定時器。背景和魚的位置，就需要你自己慢慢調(diào)到合適的位置，祝愿你能成功。文章來源地址http://www.zghlxwxcb.cn/news/detail-824196.html

到了這里，關(guān)于uniapp 用css animation做的鯉魚躍龍門小游戲的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！