移动端h5游戏开发中的动画和动效展示

最新推荐文章于 2022-11-02 09:55:39 发布

莉兹Liz

最新推荐文章于 2022-11-02 09:55:39 发布

阅读量4.2k

点赞数

分类专栏：前端技术文章标签：动画游戏 css3

本文链接：https://blog.csdn.net/qq_40138556/article/details/122879938

版权

本文探讨了移动端H5游戏开发中实现动画和动效的常见技术，包括css3动画、svg、定时器和live2d。通过分析各自的优缺点，如css3的简洁易懂、svg的性能优化、定时器的灵活性以及live2d的精美展示，为开发者提供了选择合适动画技术的依据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在移动端h5游戏开发中，经常会遇到动画和动效的展现需求，比较常用的实现方法有css3、svg、定时器等，针对不同的场景和需求使用不同的技术，可以提升设计和开发的效率，保证产品的效果和质量，也能让用户有更好的体验，以下是项目开发中使用过的动效例子。

一、css3

css3动画三剑客animation, transform, transition，项目中主要用到css3 animation，下面会进行重点介绍。
css3 animation主要由三部分组成，关键帧、动画属性和css属性。
关键帧@keyframes，定义动画在不同阶段的状态，由animation-name连接；
动画属性包括以下属性值，决定了动画的播放时长、播放次数、播放动画函数等。
在这里插入图片描述

在摇红包h5项目中，摇动动作、摇动次数效果均使用了css3 animation。

// +1动画
	.game-add {
   
		position: absolute;
		top: 28vh;
		right: 140px;

		.game-add-shake-on {
   
			width: 60px;
			height: 60px;
			animation: speedAdd 1s forwards 0.1s;
		}
		@keyframes speedAdd {
   
			0% {
   
				transform: scale(2);
			}
			4% {
   
				transform: scale(2);
			}
			16% {
   
				transform: scale(0.8);
			}
			24% {
   
				transform: scale(1);
			}
			88% {
   
				transform: translate3d(0, -200px, 0) scale(1);
				opacity: 0;
			}
			100% {
   
				transform: translate3d(0, -200px, 0) scale(0);
				opacity: 0;
			}
		}
	}