uniapp 用css animation做的鲤鱼跃龙门小游戏-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 用css animation做的鲤鱼跃龙门小游戏。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uniapp 用css animation做的鲤鱼跃龙门小游戏,uni-app,css,前端

第一次做这种小游戏，刚开始任务下来我心里是没底的，因为我就一个‘拍黄片’的，我那会玩前端的动画啊，后面尝试写了半天，当即我就给我领导说，你把我工资加上去，我一个星期给你做出来，算了不开玩笑了，‘拍黄片’工资低，还要被java和前端歧视，日子不好过啊，做别人不愿意接的活，还没话语权，没人权。。
下面是主要代码

背景移动


		<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';

总结：
关于动画结束，给一个默认结束时间，比如10S，在点击开始方法里面写一个定时器，每秒减1，当时间等于0时结束动画，消除定时器。背景和鱼的位置，就需要你自己慢慢调到合适的位置，祝愿你能成功。文章来源地址https://www.toymoban.com/news/detail-824196.html

到了这里，关于uniapp 用css animation做的鲤鱼跃龙门小游戏的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！