uniapp 用css animation做的鲤鱼跃龙门小游戏



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

下面是主要代码

背景移动

html 复制代码
		<view class="bgBox">
			<view class="bgimg" class="bg"
				:style="'animation-play-state:'+actived+';animation-timing-function:steps('+bgTiming+');'"></view>
		</view>
javascript 复制代码
    
 .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;
		}
	}
javascript 复制代码
     //动画开始
     this.actived='running';
     //动画暂停
     this.actived = 'paused';

html 复制代码
		<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>
css 复制代码
	.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%;
		}
	}
javascript 复制代码
     //动画开始
     this.actived='running';
     //动画暂停
     this.actived = 'paused';

总结:

关于动画结束,给一个默认结束时间,比如10S,在点击开始方法里面写一个定时器,每秒减1,当时间等于0时结束动画,消除定时器。背景和鱼的位置,就需要你自己慢慢调到合适的位置,祝愿你能成功。

相关推荐
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止3 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in4 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课6 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿7 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我7 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法