SVG动画编程及其应用

2008.03.16 张杰,刘晓平

来源：SVG中国(ChinaSVG.COM)

SVG动画编程　　本文分析了SVG图形技术、SVG动画模型与DOM、SMIL、SIMLANIM的关系以及SVG简单动画及复杂动画的常用种类及其实现方法,并给出SVG动画在机械领域的应用实例。

前言

　　由万维联盟W3C推出的SVG(Scalable Vector Graphics)技术可用来生成二维的图形、动画,随着SVG技术的成熟,越来越多的研究人员在各自的研究工作中采用了SVG, 自2002年开始的每年一届的SVG大会促进了SVG的应用。
　　国内外的SVG应用主要是在网络地图方面, 武汉大学是国内SVG研究及应用的主要单位,多个武汉大学研究团队借助于校内的国家重点实验室,完成了多个基于SVG的地理信息应用,华中科技大学也将SVG应用于电力信息模型。SVG技术也可应用到工程设计等领域。
　　作者所在的网络图形应用研究小组主要研究如何应用SVG及X3D技术编写三维动画制作软件,软件应用了X3D、SVG、XML、DOM、数据库、 JAVA等技术,应用最新的概念和方法实现过去很难实现或必须通过昂贵专用软件才能实现的二维、三维动画及交互应用功能。作为研究工作的一部分,本文主要介绍SVG动画编程方法,并通过典型例子介绍如何将SVG动画应用到机械领域。

1 SVG图形技术

　　SVG是近几年来主要用于网络的、开放的二维向量图形技术,通过在网络浏览器上安装SVG插件,可在网页上显示SVG文档的图形、动画及实现交互效果,也可以在一些独立的应用程序中应用JAVA、C++等语言处理SVG文档,生成二维向量形式的图形、动画及交互内容。
　　SVG经历了SVG1.0、SVG1.1 和SVG1.2三个阶段。其中，SVG1.0是SVG技术的初始版本,目前已停止发展;SVG1.1是目前使用的版本,还在不断更新,截止到2004年5 月15日,SVG1.1最新版本是2003年1月14日发布的;SVG1.2是SVG下一个版本。SVG文档为XML(Extensible Markup anguage)格式,可以将XML、XSLT等技术及大量相关软件应用到SVG领域。SVG文档内可插入Javascript程序段,也可由外部 Javascript程序控制SVG文档。编写由Javascript、JAVA等程序控制的SVG文档需要了解和掌握DOM规范。
　　SVG文档的基本组成部分是元素(Element),SVG定义了多种类型的元素,例如,定义了6种基本形体元素:圆、椭圆、矩形、线、折线、多边形。复杂形体或曲线可以由path元素生成。SVG的事件模型结合SVG的动画功能,可用来编写交互应用(如二维图形游戏)。最新的SVG1.2标准草案使人们得以处理声音、视频等多媒体内容。
　　SVG作为W3C组织开发的、基于XML的、纯文本格式的技术,其开放特性使得人们可以根据需要应用在图形生成、动画及交互操作等方面。SVG可借助于Javascript、JAVA等语言处理图形文档,构造出动态、逼真的二维图形效果。由于SVG和VRML (X3D)同为基于XML的网络图形技术,可相互传递信息及数据,为复杂的图形应用奠定了基础。

2 SVG动画与SMIL,SMILANIM,DOM的关系

2.1 SVG动画与SMIL的关系

　　SVG动画模块是SVG工作组与SYMM(W3C Synchronized Multimedia)工作组合作开发出来的,SYMM工作组开发了SMIL(Synchronized ultimedia Integration Language)标准,用来在网页上展示各种多媒体内容,包括SVG格式的内容。SMIL1.0没有动画模块,SMIL2.0增添了动画模块。SMIL 定义有4个基本动画元素:animate、set、animateMotion、animateColor。这些元素有一般的属性,如from、to、 values等，也有用于样条动画(Splin eAnimation)的专用属性,如path、keyTimes、keySplines。

2.2 SVG与SMILANIM的关系

　　SMILANIM7是SYMM工作组与SVG工作组共同制定的SMIL动画规范。SMILANIM给出了一个通用的XML动画特征集合。虽然SMILANIM是W3C组织单独发布的推荐应用技术,但SMILANIM实际上是SMIL2.0技术的一部分。
　　SVG动画基于SMILANIM的下面几个元素:animate、set、animateMotion、animateColor。SVG自身还提供了一个动画元素animateTransform及其子元素mpath。利用animate元素,可以通过移动形体、改变形体外观属性等方式,构造出各种动画效果来;如果二维图形的一些状态是跳跃变化的,则可用set元素生成;如果想使一个形体沿一个曲线(圆或一个样条曲线)运动,则可有 animateMotion生成;如果想生成颜色动态变化效果，则可以用animateColor元素控制具体形体的颜色属性。
　　SVG的 animate元素可以用来控制形体的简单运动,如果想使形体产生复杂运动,则常常要用到animateTransform元素。 animateTransform元素采用了类似VRML(X3D)技术里生成三维动画所用到的key及keyValue参数(SVG里的相应属性是 keyTimes、values及keyTimes用于控制时间,values用于控制移动、旋转等特定控制内容)。不论是复杂的移动、旋转,还是既有移动,又有旋转的复合运动,都可以通过animateTransform元素实现,并且可以同时用多个animateTransform元素控制一个形体的多个属性(如一个控制移动,一个控制旋转)。本文的第二个例子介绍了如何用animateTransform元素生成复杂运动效果。

2.3 SVG动画与DOM的关系

　　很多SVG动画是用Javascript编程实现的,Javascript通过SVG的DOM(Document Object Model,文档对象模型)与SVG文档联系在一起,控制SVG的元素及属性,动态修改SVG元素的属性,从而生成特定的动画效果。
　　由万维联盟发布的DOM规范是一组平台和语言无关的应用程序编程接口,能够用来描述如何访问和处理XML和HTML文档信息,DOM将XML和HTML 文档以树状结构进行描述。SVG1.1标准的附录B(SVG DOM)给出了DOM应用于SVG的相关内容,掌握SVG DOM,可编写出更好的动画内容。

3 SVG动画编程举例

　　SVG借助于animate等元素可实现各种类型的动画效果,下面通过两个应用于机械领域的SVG动画,介绍SVG动画的编写方法。

3.1 动态移动视窗产生的动画

　　本动画从外部输入一个齿轮模型,为了细致观看齿轮的细节,编写了一个通过动态移动视窗、动态改变视窗大小而产生的动画,如图1,齿轮由一个齿轮在线生成网站*8通过输入相应参数自动获得。

图1 动态移动视窗产生的动画(右图为放大后效果)

　　齿轮形体通过HTML文档的EMBED元素调入:

<EMBED src="/gear.svg" width=400 height=300></ P>

　　动画通过一个HTML里的一个Javascript函数anim实现,anim函数通过动态修改齿轮视窗viewBox参数,实现了齿轮运动及放大缩小的显示效果。程序中的另一个Javascript函数init完成了一些初始化工作,函数如下：

function init(evt) {
var myTarget=evt getTarget();
if(myTarget.getNodeType()!=9)// if not DOCUMENT_NODE
svgDoc=myTarget getOwnerDocument();
else
svgDoc=myTarget;
}
function anim() {
var obj2=svgDoc getElementById('top');
var data2="-1 -122;0.1 0.1 0.3 0.2;0.2 0.2 0.4 0.4;-1 -122"
obj2 setAttribute("values",data2);
}

　　为了实现齿轮动画,首先阅读齿轮文档,了解齿轮的大小尺寸,并对齿轮SVG文档做了3处局部修改。
　　1) 设置了一个原始视窗位置及大小:

<svg viewBox="0 0.1 0.8" width="400" height="300" οnlοad="init(evt)">

　　2) SVG文档的尾部插入的动画元素如下:

<animate id="top" attributeName="viewBox" begin="1s" dur="20s" fill="freeze"/ >

　　3) 由于动画由鼠标点击控制,需在齿轮SVG文档中设置鼠标事件:

<g οnclick="anim()">

3.2 由animateTransform元素实现的移动凸轮机构动画

　　当盘形凸轮的回转中心趋于无穷远时,凸轮相对机架作往复移动,这种凸轮称为移动凸轮,可利用SVG的animateTransform元素,构造一个移动凸轮机构动画,如图2。

图2 用animateTransform实现的移动凸轮机构动画

　　移动凸轮的轮廓由 Javascript 函数根据凸轮从动件预期运动规律生成 , 从动件用一根直线代替. 凸轮往复匀速运动 , 从动件则根据所设定的运动规律上下运动。移动凸轮轮廓由 SVG的一个 path 元素构造 , 具体形状由 Javascript 函数给出并赋值给 path 元素 :

<path id="curve" fill="none" stroke="black" stroke width="2">

　　编写移动凸轮的轮廓时,根据选定的轮廓曲线函数,由Javascript函数构造而成,其中轮廓的曲线部分轨迹来自于函数中的for循环计算。移动凸轮的轮廓生成函数如下:

function create() {
var obj1=svgDoc getElementById('curve');
var data="M 100, 300 50,300 50,320 300,320 300,260 200,260";
for (t=0; t<180; t++) {
afa=t *Math.PI/180;
y=280-20 *Math.cos(afa);
x=200-t *5/9;
data+=x+","+y+" ";
}
data+=" ";
obj1 setAttribute("d",data);
}

　　凸轮从动件的运动轨迹也依据选定的凸轮轮廓,由一个animateTransform元素通过下面的Javascript函数构造:

function animatetop() {
var trans2=svgDoc getElementById('anit2');
var aL2="0 0;";
keyt2=" ";
for (t=0; t<180; t++) {
afa=t *Math.PI/90;
y=20-20 *Math.cos(afa);
aL2+="0"+y+";";
z=t/180 ;
keyt2+=z+"";
}
keyt2+="1";
trans2 setAttribute("values", aL2);
trans2 setAttribute("keyTimes",keyt2);
}

　　程序运行时,移动凸轮和从动件之间的运动由一个鼠标点击事件触发,两者同步运动,从而实现了预定的运动效果。下面给出的是控制凸轮从动件的animateTransform元素及其上下元素内容:

<g>
<path id="gan" fill="none" stroke="black" stroke width="2">
<animateTransform id="anit2" attributeName="transform" type="translate" begin="go.click"
dur="8" repeatCount="2" additive="sum"
calcMode="linear" fill="freeze"/ >
</path>
</g>

　　4　结语

　　本文介绍了SVG动画及其在机械领域中的应用,从例子可以看出SVG在机械设计领域有着广泛的应用前景。本文的后续研究是将SVG的动画及交互功能应用于典型的机构、模具等方面。

　　参考文献

　　1　W3C Z.lt http://www.w3.org.
　　2　方志祥,李清泉.基于Mobile Agent技术的空间信息移动服务J.测绘学报,2004,33(4):328～334.
　　3　陈玉敏,龚健雅,贾文珏,等.基于XML的空间数据互操作与可视化研究J.系统仿真学报,2004,16(10):2367～2371.
　　4　宋善德,彭方娟.基于SVG及DOM的电力实时信息系统模型J.计算机工程与科学.2003,25(3):94～97.
　　5　Web solutions for mechanical engineeringDB/OL. http://www.mecxpert.de/.
　　6　Martin D.Integration by parts:XSLT,XLink and SVGDB/OL. http://www.xml.com/lpt/a/2000/03/22/style/index.html.
　　7　REC smil animation 20010904S. http://www.w3.org/TR/2001/2001.
　　8　Ananian S.DXF/SVG gear generation utilityDB/OL. http://sinfor.lcs.mit.edu:8180/pcbmill/gears.

　　关于作者

　　张杰：男,安徽芜湖人,博士生,副教授。合肥工业大学计算机与信息学院可视化与协同计算(VCC)研究室
　　刘晓平：汕头大学计算机系,广东汕头
　　注：本文曾刊登在《汕头大学学报》(自然科学版)2005年5月第20卷第2期