移动端h5游戏开发中的动画和动效展示_h5关键帧动画

在移动端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;
			}
		}
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

// 摆手动画
	.game
1