在移动端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;
}
}
}
// 摆手动画
.game