http://blog.csdn.net/net_lover/archive/2002/01/26/6891.aspx
SVG中的动画技术(3)
SVG DOM产生动画的方式是由脚本语言调用DOM对象的属性和方法实现的,在SVG中使用脚本语言和HTML中类似,首先是指定脚本的语言类型:有两种办法可以指定脚本的语言类型
1),在SVG元素里使用contentScriptType属性,可以指定整个文档里使用的缺省脚本语言类型。
语法如下:
content-type指定一种媒体类型,默认是"text/ecmascript"
2),在script元素里使用type属性来声明该段脚本所使用的语言类型。
语法如下:
<script type="content-type">
content-type就是所使用的媒体类型。
SVG里的script元素和HTML里的完全一致。任何script元素里定义的函数都可以应用到整个文档里,也可以通过xlink:href属性,指定一个脚本文件的URL地址,比如:
<script type="text/JavaScript" xlink:href="test.js"></script>。
下面看一个利用SVG DOM产生动画的例子:
xml 代码
- <!---->xml version="1.0" encoding="UTF-8" standalone="no"?>
- <!---->
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
- <svg height="4in" width="4in" viewBox="0 0 1000 1000" onload="main(evt);">
- <script type="text/ecmascript"><!---->
- var root; // 定义根
- var svg; // 定义SVG元素
- var canvas; // 空的画布
- var array = new Array;
- var speed = 80; // 速度
-
- function main( evt ) {
- svg = evt.getTarget();
- root = svg.getOwnerDocument();
- canvas = root.getElementById( 'canvas' );
-
- for (i = 50; i < 900; i += 50 ) {
- var obj = new_rectangle( 0, i );
- array.push( obj );
- canvas.appendChild( obj );
- }
-
- setInterval( frame, speed );
- }
-
- function new_rectangle( x, y ) {
- var rectangle = root.createElement( 'rect' );
- rectangle.setAttribute( 'x', x );
- rectangle.setAttribute( 'dx', 0 );
- rectangle.setAttribute( 'y', y );
- rectangle.setAttribute( 'width', '50' );
- rectangle.setAttribute( 'height', '50' );
- rectangle.setAttribute( 'style',
- 'stroke: #050; stroke-width: 5; fill: #2f2;' );
-
- return rectangle;
- }
-
- function frame() {
- for (i=0; i
- var obj = array[i];
- var x0 = new Number( obj.getAttribute( 'x' ) );
- var dx0 = new Number( obj.getAttribute( 'dx' ) );
- var dx = 1 + 3 * Math.round(Math.random() * dx0);
- var x1 = x0 + dx;
- obj.setAttribute( 'x', x1 );
- obj.setAttribute( 'dx', dx );
- obj.getStyle().setProperty( 'opacity', (1000 - x0) / 1000 );
- if ( x1 >= 1000 ) {
- obj.setAttribute( 'x', 0 );
- obj.setAttribute( 'dx', 0 );
- obj.getStyle().setProperty( 'opacity', 1 );
- }
- }
- }
-
- ]]>script>
- <defs>
- <linearGradient id="grad1" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpace">
- <stop offset="0%" style="stop-color: #88f;"/>
- <stop offset="100%" style="stop-color: #008;"/>
- linearGradient>
- defs>
- <rect id="background" x="0%" y="0%" width="100%" height="100%" style="fill: url(#grad1)"/>
- <g id="canvas">g>
- <text x="145" y="985" style="font-size:36pt;" fill="#FFFFFF">http://lucky.myrice.comtext>
- svg>
-
上面的例子中,首先找到要进行动画的元素的容器元素,即g;然后每隔50px高产生一个50*50的正方形,并把他们添加到g的节点中,最后每隔80毫秒,动态改变其位置和透明度,就可以看到动态的效果了!
分享到:
相关推荐
收集一些手机端可用的HTML5 SVG Loading 动画加载特效 ,一共是4个网页加载特效动画,这些Loading看上去是不是很眼熟,在手机上或PC端见到的几率比较大,纯HTML5 SVG技术实现,没有使用任何图片资源,而且个个精美。...
基于svg(可缩放矢量图形)的成像特性及其元素易操作等特性,使其用来显示煤矿设备运行状态及实时数值成为可能并效果很好,但在C/S模式程序中大多数语言...又使得svg的操作简单高效(完全按照B/S模式中开发svg动画要求)。
这是一个形象的示意动画,火苗并没有绘制的很逼真,只是用了几个小方块来代替,但是流畅的动画效果也确实挺形象,让人一看就明白这就是火柴点燃 燃烧的效果,喜欢HTML5设计的朋友,可借助此代码学习研究SVG技术的...
HTML5 svg 3D金字塔动画效果,一款由HTML5 CSS3 SVG技术打造实现的3D金字塔动画,从金字塔的出现到最后的结束离开,全程都是在动画效果中完成。最开始金字塔一层一层像堆积木那样搭起来,一共有5层,搭建完成后再每...
html5 SVG技术绘画小鸟动画,小鸟的翅膀会不停的扇动,眼睛在不断的转动,看上去像是猜不透的心事,又很人性,有逗的小鸟动画效果,参考一下,学习SVG的好素材。
13款使用html5 svg技术打造的页面loading加载动画效果。页面的3d效果使用了css3动画技术。整个loading加载动画效果时尚新颖。
HTML5基于SVG技术实现动画效果的折线图,并且还具有渐变色效果,用chrome打开本特效后,会看到拆线图以动画效果绘制,很像以前那种Flash效果的曲线图。使用HTML5技术可很好的就实现此种效果,且可跨平台(PC和智能...
一款使用html5 svg技术制作的线条动态绘制iphone边框动画效果,页面中先是用线条动态绘制出iphone的轮廓,然后再显示iphone图片,效果十分华丽。
<head> <meta charset="UTF-8"> <...meta name="viewport" content=... 17种HTML5 SVG字体图标点赞动画特效,使用font-awesome作为图标,采用SVG技术,在用户点击图标时产生各种炫酷的图标动画特效。
HTML5 Canvas+SVG实现的彩色水泡分裂动画特效源码
通过学习本资源,读者将能够掌握如何使用CSS3技术创建出精美的爱心SVG动画特效,并能够将其应用到自己的项目中,提升网站的用户体验和视觉效果。 其他说明:本资源的教程内容详细、易于理解,适合初学者和有一定CSS...
这是一组使用HTML5 SVG和CSS3技术制作的超酷文字遮罩动画特效。这一组文字遮罩动画特效中共有23种效果,分别使用23种不同的SVG和CSS3技术来实现。
这是一款使用html5 svg和css3制作的线条动态绘制文字轮廓边框动画特效。该动画特效通过将文字轮廓制作成svg坐标,再通过html5和css3技术将其制作为线条动态绘制文字轮廓边框的动画。
一款大气的SVG图片切换过渡动画效果,通过SVG路径变形技术
交互式的在线示例让你很容易在Web浏览器中实验SVG的特性。本书还为经验丰富的设计师准备了6个附录,解释了XML标记和CSS样式等基本概念,因此即使你没有网页设计的经验,也可以开始学习SVG。 通过阅读本书,你将能够...
SVG+CSS3圆形倒计时滚动条动画效果,采用canvas技术进行实现