如何利用SVG应用到手机游戏开发 以及 SVG相关介绍

作者:chenjieb520（两片森林）

利用SVG应用到手机游戏开发
1、 利用SVG主要的好处就是，目前有SVG动画的编辑器，可以省去自己写动画编辑器的所花费的劳力。并且随着SVG的发展，用于开发SVG动画的工具将会越来越多，越来越完善。现在目前比较好用是SVGDevelop这个工具。

2、SVG的所有的标签元素，并不能全部能够运用到手机游戏开发来，只是其中的动画标签和事件部分。让程序员的主要精力不是放在考虑如何实现图片的运动逻辑，而是更加专注游戏的界面的效果。将动画的运动逻辑实现交给SVG解释器进行执行。

3、利用SVG可以实现比较炫的菜单效果，而且这些炫的效果只是简单的运动方式的叠加。在SVGdevelp这个工具里面，其操作就像开发flash一样，只不过是不支持脚本的。

1、SVG相关知识简介
1.1 SVG简介

SVG是可升级矢量图形（Scalable Vector Graphics）的简称。SVG是XML来描述二维图形的语言。SVG可以构造3种类型的图形对象：矢量图形、位图图象和文字。图形对象可被组化、样式化、变形和重组，包括图象嵌套、变形处理、剪辑路径、Alpha蒙板、滤镜特效和模板对象。SVG不但可以表现图像，还可以表现文字、音频等其他信息，对于那些有视觉障碍的人，可以通过可替换的方法把图像替换为音频信息，这样对那些有视觉障碍的人，也能够得到SVG所表现的信息。另外，对那些手持设备、车载设备、无线设备来说，它们的屏幕一般都比较小，而且显示分辨率低，SVG的矢量特性也可以让这些设备清楚地浏览SVG图像信息，这都是目前的位图图像所不能做到的。

1.2 SVG的动画

首先介绍基本的SVG动画类型：移动和旋转动画、拉幕和缩放动画、色彩渐变动画、沿路径动画、顺序与同步动画；之后介绍了内嵌脚本和外部脚本的SVG脚本动画。

SVG属性动画

　 SVG动画一般通过更改对象属性值来实现。SVG工作组与W3C组织的SYMM(Synchronized MultiMedia WorkingGroup，同步多媒体工作组)合作推出了SVG动画元素的定义规范。SVG中用于定义动画的元素有5个<animate>，<set>，<animate-Motion>，<animateColor>，<animatcTransform>。其中<animate>元素允许数量属性或样式参数随时间而变化，<set>元素可设定非数量属性或样式参数随时间而变化，<animate-Motion>元素可以沿着指定的路径移动元素以产生动画效果；<animateColor>元素用来设定元素的某些与颜色有关的属性或样式参数随时间而变化；<animateTransform>元素可以控制对可视化元素进行坐标变换时的动画效果。

1、移动和旋转动画
　　移动和旋转动画可以用<animateTransform>元素来实现。<animateTransform>元素用于可视化元素的动态坐标变换，其主要属性除通用属性外还有两个attributeName和type，其中attributeName属性值必须指明为’'transform"，type属性指明动态坐标变化的类型，其值可以为"translate"(表示平移变换)、"scale"(表示拉伸变换)、"rotate"(表示旋转变换)、"skewX"，及”skewY"(表示沿X和Y方向上的歪斜变换)。

2、拉幕和缩放动画

　　拉幕和缩放动画都是对图形对象的宽度和高度进行改变而引起的动画效果，可以用<animate>元素来实现，利用from和to属性来定义图形的起始和终止值。<animate>元素没有其特有的属性。

3、色彩渐变动画

　　色彩渐变动画是由对象的填充色彩变化而引起的动画效果，可以用<animateColor>元素来实现。<animateColor>元素也没有其特有的属性，只是在使用from，to，by和values等属性时，其属性值必须是颜色值。

4、沿路径动画

　　沿路径动画是指对象沿一定的路径移动，可以用SVG的<animateMotion>元素来实现。除了通用属性外，<animateMotion>元素还具有path、rotate及keyPoints属性，其中path指明动画路径，rotate指明可视化元素在沿着路径运动过程中是否随路径而转动，keyPoints表示各个关键点所在的位置在路径方向上与路径起点间的距离，它和key-Times属性共同决定一系列关键点以精确控制路径动画中时间与运动路程的关系。

5、顺序与同步动画

　　同步动画就是多个对象同时进行动作，顺序动画则是根据时间上的先后顺序进行动作。两种动画根据不同的动画类型可以映射为不同的SVG动画元素，最关键的地方在于动画元素中的begin属性值的设定。设置动画顺序通常要将动画元素的id和begin属性值结合起来，如果第二个对象动画(id="anim1")在第一个对象动画(id="anim2)结束后2秒才开始，那么可以设置第二个动画的begin属性为’'animl.end+2s"，如果是同步动画则设置为’'animl.begin"。

2、SVG解释器开发思路
1、 SVG解析器的编程大体过程



2、 SVG的坐标体系



3、 SVG动画标签的属性解析的过程的数学知识

初始化时候：

<image display="inherit" x="0" y="0" width="239" height="321" transform="matrix(1.034,0,0,0.997,-5.599,-0.003)">

其中matrix(1.034,0,0,0.997,-5.599,-0.003)的意义如下：依次是a,b,c,d,e,f



而新旧坐标计算使用如下的数学公式：



平移标签：

<animateTransform attributeName="transform" begin="0" dur="2" from="158 88" to="158 88" type="translate"/>



其中tx=to.x – from.x ty=to.y-from.y

如果有时间的话，即dur不为0,这就计算这个持续时间，计算公式如下

tx=(to.x – from.x)/dur*lastime ty=(to.y-from.y)/dur*lasttime 其中lastime为该动画的时间轴，即从begin到begin+dur的时间，lasttime就是“流动的时间”，接下来的其他情况都是相似的。

旋转标签：

<animateTransform attributeName="transform" begin="1" dur="1" additive="sum" from="0 " to="52.24143" type="rotate" />

这里的from属性是从哪个角度开始，to是到那个角度结束。表示为矩阵为：



缩放标签：

<animateTransform attributeName="transform" begin="1" dur="1" fill="freeze" additive="sum" from="1 1" to="1 0.9999999" type="scale" />

这里的from和to的标签的意义和“平移标签”的意义一样的。表示为矩阵为：



X轴倾斜：

<animateTransform attributeName="transform" begin="1" dur="1" fill="freeze" additive="sum" from="0" to="-8.708686E-06" type="skewX" />

这里的from和to的意义和“旋转标签”的意义一样。



Y轴倾斜：

<animateTransform attributeName="transform" begin="0" dur="1" fill="freeze" additive="sum" from="0" to="7.548215E-06" type="skewY" />

这里的from和to的意义和X轴倾斜标签一样。



例如要实现如下图的效果：



其中第一步是执行Translate，第二步执行rotate，第三步执行Translate

最终要出现（3）的效果，用矩阵就是如下表示：



这样整个SVG的所有动画表示的就可以用矩阵来进行组织表示。

4、 SVG动画运动和时间的相关性说明

由SVGDevelop生成的代码，并没有严格按照事件发生的时间相关性来组织代码，所以在由SVGDevelop生成的代码，必须严格进行事件的排序，即同一段时间内的事件发生不可以任意颠倒的。如果在使用的过程中，碰到解析出来的结果和SVGview结果不一致的话，则这个时候要对SVGDevelop生成的代码进行时间相关性的检查，目前的尚未发现出现无法运动不一致的情况，但是不排除在使用的过程中有这样的情况出现。

SVG解释器实现时的注意点

1、SVG事件的处理原则

(1)、将所有的事件当作和时间相关性来处理，统一于事件的发生的相关时间。尚未发生的事件当作无穷大的事件。保存开始事件发生的时间点。

（2）、在begin参数列表中，实时遍历参数列表中的事件，挑选发生时间点的事件。

2、运动逻辑三个注意点

(1)、单纯的位置平移，则与只要按照SVGDevelop工具生成的代码即可。

（2）、对于平移加旋转和平移中旋转的事件，则必须进行特殊的处理，需要按照时间发生的相关顺序来组织SVG的标签代码，否则和发生时间相关性的错误，导致最后运动的结果有误。

（3）、由于没有SVG官网上并没有关于svg动画运动的过程的数学模型，所以这一部分只能按照临时的解决方案来解决。这个临时的解决方案就是将纯粹平移和旋转事件进行分开事件，并且在图片的隐藏事件进行详细的执行的时间块进行“排序”，这里的排序意义并不是一般的意义的排序，而是按照时间块进行排序。

1、 参考资料

1、 SVG中国 http://www.chinasvg.com/

2、 SVG官网 http://www.w3.org/TR/SVG/

SVG几何变换 http://www.ibm.com/developerworks/cn/xml/x-BatikSvg/

关于SVG的解析器的源代码，我将在适当的时间里，进行公开，欢迎大家批评指教。