移动端h5游戏开发中的动画和动效展示_莉兹Liz

irpas 02-07 5663

在移动端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-hand { position: absolute; top: 28vh; right: -14%; .game-hand-shake { width: 612px; height: 787px; &.on { animation: handShake 0.5s ease-in-out forwards; transform-origin: right bottom; } @keyframes handShake { 0% { transform: rotate(0deg); } 25% { transform: rotate(18deg); } 50% { transform: rotate(-18deg); } 75% { transform: rotate(18deg); } 100% { transform: rotate(0deg); } } } }

优点代码简洁易懂，动画精细，可调整时间、位移细节。缺点在动画控制上不够灵活，不能灵活控制动画中每个节点。

二、svg

svg指可伸缩矢量图形，是基于XML，用来定义用于网络的基于矢量的图形。在项目中使用svgaplayerweb插件，可配置svg播放、播放频率等。 https://github.com/svga/SVGAPlayer-Web

var parser = new SVGA.Parser('#demoCanvas'); // Must Provide same selector eg:#demoCanvas IF support IE6+ parser.load('rose_2.0.0.svga', function(videoItem) { player.setVideoItem(videoItem); player.startAnimation(); }) this.player1 = new SVGA.Player('.guide-animation-ip1') this.parser1.load(this.randomArr.animation, (videoItem) => { this.player1.loops = 1 this.player1.setVideoItem(videoItem) this.player1.startAnimation() })

优点动画文件体积更小，播放资源占用更优，动画还原效果更好，尺寸小，伸缩性强，可在图像质量不下降的情况下被放大，可以实现很多复杂的动画。缺点依赖设计，更改动画需要设计和研发共同调整。

三、定时器（setTimeout 和 setInterval）

JavaScript动画主要通过改变元素的属性大小、样式渐隐渐显、位置位移再结合定时器（setTimeout 和 setInterval）来实现动态效果的展现。在摇红包移动端游戏中，点击开始先进入蒙层，展示“3、2、1、开始”后再进入页面，每张图片的展示时间为1s，展示形式由js+setInterval+图片切换控制，init初始化函数后先进行蒙层开启-倒计时样式展示-蒙层关闭在进入正式游戏，给用户一个缓冲时间，也为游戏带来了紧张刺激感。

countdownFun () { return new Promise((resolve, reject) => { this.showCountdown = true; this.countdownTimer = setInterval(() => { this.countdownIndex++ if (this.countdownIndex >= 4) { clearInterval(this.countdownTimer); this.showCountdown = false; return resolve(); } }, 1000); }) },

优点实现简单，针对元素或图片即可完成动画的展现，时间、展现形式等可灵活快速调整。缺点定时器更改元素属性时，可能会发生重排和重绘，导致内存消耗较大，性能较差。总结使用定时器绘制动画要考虑渲染频率，尽量保证动画使用频率低的情况时使用，如果是高频率动画，会导致频繁的重排和重绘，消耗内存、影响性能。

四、live2d

Live2D是一种应用于电子游戏的绘图渲染技术，常用于游戏中人物形象的展示，也用于各直播软件的虚拟形象展示、个人网站的页面角落展示，动态灵活的形象能吸引更多关注。在src中创建js文件，同时创建live2d模型引用js，随机方法展示白猫、人物模型，App.vue中引入改文件，即可在刷新首页时随机展示白猫、人物形象的live2d。

参考https://github.com/QiShaoXuan/vuepress-plugin-cat、https://github.com/xiazeyu/live2d-widget.js 摇红包大屏端需求需要在大屏上展示，无用户交互效果，live2d需要建模及时间调整，最终想要展示的也是普通无互动效果，和其他实现方法相比反而性能下降，因此决定本期不使用live2d技术。优点 live2d技术解决了3d在移动端的性能问题，也解决了静态图片或其他效果动画的呆板问题，live2d在移动端也非常精美，使游戏的体验得到更高的提升。（奇迹暖暖live2d展示图）缺点依赖设计，live2d没有建模，不如3d技术灵活，不可复用，不能转身，限制较多。