如何使用SVG动画来制作游戏

游戏的灵感

在使用过一段时间的SVG动画之后，我相当清楚如何利用它来制作动画片段或者网页布局。一些动画库平台，例如Greensock，和原生的CSS动画简直是绝配。于是我便打算深入地研究一下，看看我能否用这些来制作一款简单的游戏。就像一个精美的工艺品一样，好的游戏拥有许多细致的动画细节。有一天夜里，我的脑海中突然闪现了一个游戏的灵感，我马上起来，画了一些草图，之后给我的哥哥看--他是一个专业的网页设计师。我们立即开始着手设计，讨论了所有的细节动画后（试着画出来并且配以音效），我便开始进行游戏开发。

如何玩: 来回弹跳的球是可以改变颜色的。你必须随时观察球当前的颜色，并且在球和柱子相接触的一瞬间，确保两者的颜色是一样的。点击柱子可以改变它的颜色，单击变红，双击变黄，三击则变为紫色。

这里是游戏的完整版: http://codepen.io/gregh/full/yVLOyO

目录

• 创作的过程
• 使用GreenSock来制作动画
  • 背景动画
  • 柱子动画
  • 分数的动画
• 弹性盒子布局
• 让游戏界面可缩放

创作的过程

在开发这款游戏的过程中，我不断地遇到问题并重构代码。其中的一个最主要的问题就是，如何能让游戏在所有的设备和所有尺寸的显示器上都看起来不错。我使用我的Macbook Pro ? 开发，游戏的画面很棒。但是当到了 27" iMac screen ? 上时，整个画面就看起来特别小，当然在iPhone?又会显得特别大。我真心地希望可以有一把适配所有设备的“万能钥匙”。经过了许多次的尝试之后，我清楚地意识到，传统的使用媒体查询的技术来做响应式设计是行不通的。

这篇文章并不是一个教程，因此我将不会逐行的解释我的代码。但是，我会展示给你一些十分酷的东西，你可以通过在CodePen上或者是在浏览器的调试工具里面修改参数进行测试。同样，我也会在相应的地方写出一些参考资料。在CodePen上，我尽可能多的写出代码注释，赶快去看看代码吧！

十分强大的GSAP让我理所当然地选择了它，而我选择在CodePen上面写码的原因是它内置了一个Babel编译器，这样我就可以在上面书写ES6的语法，你不知道Class和箭头函数有多好用！ 关于ES6的特性介绍，你可以点击这里: https://github.com/DrkSephy/es6-cheatsheet

使用GreenSock制作动画

我下面假设你熟悉GSAP用法,但如果你不熟悉的话，你可以看下这个“讨厌番茄”的人的关于GSAP的教程。https://ihatetomatoes.net/get-greensock-101/

背景动画

几乎所有你能在背景上看到的东西都是用SVG制作的。每个波浪是一个独立的<div>,每一层的山峰也是一个<div>,甚至云也是<div>。当你在制作一个复杂的动画时，有一点是需要注意的。你完全可以使用一整个SVG当做背景，然后为这个SVG的子元素和路径来制作动画。Greensock允许我们这样做，你需要做的仅仅是为这些SVG的元素（比如说path，group等等）分配一些ID，然后用过ID选择到他们。但这样做的问题在于，在移动设备上，这些动画跑不动。所以你最好是把这些背景元素放在独立的<div>里面，然后为这些<div>添加动画，我实际上就是使用这些SVG的作为背景。

var wave1 = TweenMax.to('.wave1', 0.7, {backgroundPositionX: '-=54px', repeat: -1, ease: Power0.easeNone});

通过类似于上面的代码，我们就得到了一些简单的补间动画。这些动画可以将背景水平地移动54个像素（也就是背景的宽度），在这里我们想要背景匀速地移动，所以我们不需要缓动动画。当我们为每个背景设置不同的移动速度的时候，他们就有表现出了视觉差的效果，看上去很酷吧！

看到画面上漂浮着一些白色的小圆点了没？我创造了这些圆点并为他们设置了随机的位置和尺寸，接着我让他们做圆周运动。

{rotation: 360, transformOrigin: "-"+radius+"px -"+radius+"px", ...}

这样他们就缓慢地进行圆周运动，但看上去却像随机运动一样。

柱子动画

每一个柱子里都有一些会动的小元素，这些小元素仅仅是由HTML和CSS制作出来的。使用SASS可以节省很多时间和代码量（通常情况下是这样的）。我通过创建形状的mixins来为这些柱子里面的小东西添加效果。如果我们看下bublble这个效果的代码，我们就会发现每个圆圈都使用了绝对定位并使用到了这个mixin。在CSS中创造三角形需要很多的代码，所以mixin就派上了大用场。

让我们看看红色的柱子，柱子里面包含着很多的气泡：

@mixin bubble ($size, $top, $left) {
    height: $size;
    width: $size;
    top: $top;
    left: $left;
}

@mixin bubble_hollow ($size, $top, $left) {
    @include bubble ($size, $top, $left);
    background-color: transparent;
    border-style: solid;
}

所以现在，如果想要在柱子里面创造一些气泡的话，我只需要调用这些mixin，设置气泡的大小，然后让把他们放在柱子的特定的位置上就好了：

.bubble-4 {
    @include bubble(15px, 98px, 37px);
}
.bubble-5 {
    @include bubble_hollow(5px, 116px, 20px);
}

当你需要通过边框来制作一些小的三角形的时候，你需要用大概20行的css代码来生成，所以使用mixin实在是太有必要了。

气泡的动画

我使用交错动画来做这个效果。这个动画可以操控柱子里面所有的气泡元素，并且可以让每个气泡有一个小小的延时，让他们不会同时开始运动。点击这个链接，你可以了解更多的关于交错动画的知识:http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerFrom/

三角形的动画

在黄色的柱子里面，我使用到了旋转的效果。但是你可能注意到，有些旋转是围绕着X轴的，有些是围绕着Y轴进行运动的。我们在这里使用到了 cycle属性。

var triangle = new TimelineMax({delay: 0.5});
triangle
        .staggerTo(el.find('.triangle'), 1.5, {
            cycle:{
                rotationY: [0, 360],
                rotationX: [360, 0],
            },
            repeat: -1,
            repeatDelay: 0.1
        }, 0.1);

方块的动画

在制作方块的动画的时候，我们也使用到了相同的技术。因此，有一半的方块是从左向右移动的，而另外一般则做反方向的运动。

分数的动画

让我们点击重新开始，再看下这个动画吧.

我想要分数的动画有一种“Q弹”的感觉，于是我就写了几行代码来形成这个效果。

 var resultTimeline = new TimelineMax();
  resultTimeline
      .fromTo('.stop-game .score-container', 0.7, { opacity: 0, scale: 0.3 }, { opacity: 1, scale: 1, ease: Elastic.easeOut.config(1.25, 0.5)})
      .fromTo('.stop-game .final-score', 2, { scale: 0.5 }, { scale: 1, ease: Elastic.easeOut.config(2, 0.5)}, 0)
      .fromTo('.stop-game .result', 1, { scale: 0.5 }, { scale: 1, ease: Elastic.easeOut.config(1.5, 0.5)}, 0.3)
      ;

为了做出这种“触电”（或者说是“Q弹”）的效果，我们需要制作正确的缓动动画。如果你想要看看你可以使用什么样的缓动方程，看下 Greensock 缓动观察器:http://greensock.com/ease-visualizer 选择 Elastic 并调整配置参数，你就可以实时地看运动效果。

弹性盒子

这款游戏的第一个创新性就是使用了“弹性盒子”，如果要是不了解弹性盒子的话，你可以阅读下这篇优秀的文章： https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 或者看下 Laracasts上的相关系列。一旦你开始使用了弹性盒子，你就再也离不开它。下面我们看下我的的主菜单界面和游戏界面吧。

开始游戏的容器CSS样式如下：

{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

“flex-direction: column”表示在容器内部弹性元素的排列方向。 设置为Column，则元素从上到下依次排列。而默认的（row）则将元素从左到右排列。弹性盒子可以这只空白区域，我们可以设定我们是在元素的前面、后面或者周围放置这些空白区域。动手试下，感受下弹性盒子是多么好玩吧！因为我们设置成了“space-between”，所以 Top 被放在了顶部， How to Play被放在了底部，而Logo Holder则放在了中间，空白区域被填充在了这些元素之间。 Align-items: center, 定于交叉轴（这个游戏中代表水平轴）上元素的对齐方式，center表示居中对齐。其中 How to Play也是一个弹性盒子，它的代码如下:

{
    display: flex;
    width: 100%;
}

它也是一个flex元素，我们如果去设定他的flex-direction, 它将使用默认值（row），将其中的三个弹性元素水平的排列。第一个和第三个元素的“flex”参数为1，因此他们将占据所有的空白空间，flex是一个相当高端的特性。同样的，你也可以通过在How to Play上设置 justify-content: space-around来达到同样的目的.我使用flex: 1 的原因是，我想让中间的一列排在屏幕的最中央。

下面我们看下游戏界面。这个界面也是一个弹性布局。界面有一个柱子容器和一个球的容器。我不想让球是绝对定位的，因为我通过css让球刚好坐在柱子上，这样即使我改变柱子的高度，我也不需要改动其他代码就可以让球恰好落到柱子上。因此我将容器的flex-direction设置为 column,正如我所愿，球容器刚好紧挨着柱子的顶部。justify-content: space-between让球的容器永远靠着屏幕的顶部，而柱子容器永远靠着屏幕的底部。 现在我们给球的容器如下的样式:

{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

球的容器也是弹性布局，我们将flex方向设为column（这样Y轴成为了主轴，元素从上到下排列）。之后我们通过 justify-content: flex-end将球推到了容器的底部，因此，我们便得到了两个紧密排列的容器，并且第一个容器的内部元素被推到了该容器的最下面，这样我们便做到了让球坐在了柱子上的效果。

试想下，如果我们不使用弹性布局会怎么做？我们也许会使用到floats, width: 33.33333% ，position: absolute 和 bottom: 0，我的天啊！ Flexbox让整个界面变得如此整洁有条理，写码简直爽翻了.

让游戏界面可缩放

做这个游戏，最重要的事情是让画面变得可缩放。看下这款游戏在不同尺寸的屏幕上达到了完美的效果！如同我说的，我仅仅是使用了 CSS transform， 这样做具有它独特的挑战性。假如游戏的默认大小是 1200x800px.吗，如果你的屏幕大小和这个不一样的话，你需要通过调节系数让游戏的容器变得大一些或者小一些，也就是做个计算"screenHeight/800\".当然，如果设备的高度大于宽度的时候（当我们的平板或者手机处于垂直模式的时候）我们也需要相应地缩放我们的屏幕，下面是计算缩放比例的代码 :

var scale = (screenWidth > screenHeight) ? screenHeight/800 : screenWidth/1200;

显然仅仅是这样做不能让视觉体验变得完美，所以我们需要在缩小我们的游戏界面的同时让它垂直水平居中。

因此，我们需要让整个游戏的容器以相同的尺寸放大，这样当缩放界面的时候，容器可以100%的占据屏幕的尺寸。如果我们将界面缩小到原始尺寸的一半的时候，我们需要让它的容器放大到原来的两倍大小，这样容器便可以充满整个屏幕。相反如果屏幕很大的时候，我们需要将界面变为原来的1.2倍，那么容器将相应的从原始尺寸缩小到 screenSize/1.2

$('.container')
        .css('transform', 'scale(' + this.scale + ')')
        .css('height', height/this.scale)
        .css('width', width/this.scale)
        .css('transformOrigin', 'left top');

后记

我希望你能喜欢这个游戏和我写的这篇文章，我也希望通过这篇文章，你可以收获一些新的东西并作出十分精彩的作品

小手一抖，资料全有。长按二维码关注京程一灯，阅读更多技术文章和业界动态。