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

时间: 2018-11-08阅读: 35标签: svg

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

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

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


创作的过程

在开发这款游戏的过程中,我不断地遇到问题并重构代码。其中的一个最主要的问题就是,如何能让游戏在所有的设备和所有尺寸的显示器上都看起来不错。我使用我的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');


后记

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


原文链接: codepen.io