[游戏开发]移动端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;
			}
		}
	}

// 摆手动画
	.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。

<script>
  import live2dJSString from "./live2d";

  export default {
    name: "cat",
    data() {
      return {
        isLoaded: true,
        model: {
          blackCat:
            // "https://cdn.jsdelivr.net/gh/QiShaoXuan/live2DModel@1.0.0/live2d-widget-model-hijiki/assets/hijiki.model.json",
            "https://unpkg.com/live2d-widget-model-shizuku@latest/assets/shizuku.model.json",
          whiteCat:
            "https://cdn.jsdelivr.net/gh/QiShaoXuan/live2DModel@1.0.0/live2d-widget-model-tororo/assets/tororo.model.json"
        },
        style: {
          width: 280,
          height: 250
        }
      };
    },
    mounted() {
      this.initCat();

      this.$router.afterEach((to, from) => {
        if (to.path !== from.path) {
          this.initCat();
        }
      });
    },
    methods: {
      initCat() {
        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
          navigator.userAgent
        )
          ? true
          : false;
        if (isMobile) {
          this.isLoaded = false;
          return console.log("mobile do not load model");
        }

        if (!window.loadlive2d) {
          const script = document.createElement("script");
          script.innerHTML = live2dJSString;
          document.body.appendChild(script);
        }

        this.style = {
          width: (150 / 1424) * document.body.clientWidth,
          height: ((150 / 1424) * document.body.clientWidth) / 0.8
        };

        setTimeout(() => {
          window.loadlive2d(
            "vuepress-cat",
            Math.random() > 0.5 ? this.model.blackCat : this.model.whiteCat
          );
        });
      }
    }
  };
</script>

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

（奇迹暖暖live2d展示图）
缺点
依赖设计，live2d没有建模，不如3d技术灵活，不可复用，不能转身，限制较多。