您的位置:首页 > 其它

WSUS服务设置中组策略刷新时间,手动刷新方法,客户端检测频率,手动检测方法

2011-07-14 09:00 726 查看
http://blog.csdn.net/net_lover/archive/2002/01/25/6888.aspx

SVG中的动画技术(1)
    动画技术是互联网中不可缺少的一个重要组成部分,是吸引访问者的重要手段之一,SVG也同样有能力随时改变矢量图象外在表现的能力。SVG中生成动画的方式有:

1)利用SVG提供的动画元素实现:由于SVG的内容可以定义成动态变化的,因此,利用SVG提供的各种动画元素,我们就可以得到各种动画效果,比如:沿某路径运动、渐隐渐现、旋转、缩放、改变颜色等。

2)使用SVG DOM:由于SVG DOM遵循DOM1、DOM2规范的大部分内容,因此,SVG中的每个属性和样式都可以通过脚本编程来访问;另外,SVG也提供了一套扩展的DOM接口,让通过脚本编程实现动画效果的手段更方便快捷。脚本语言中的定时器可以很好地触发和控制图象的运动。

    SVG的动画元素标准的指定者与SYMM(Synchronized Multimedia)工作组合作,共同编写了SMIL动画规范,这个规范描绘了XML文档结构中使用的通用的动画特征集。SVG不但实现了SMIL的动画规范,同时也提供了一些SVG的特殊扩展。SVG定义了比SMIL动画更为严格的错误处理程序,当文档中有任何错误产生时,动画都将会停止。

    SVG支持SMIL(Synchronized Multimedia Integration Language)动画规范中定义的下面的动画元素:

animate:改变SVG元素数值属性的不同值

set:是animate的简化,主要用来改变非数值属性的属性值,比如visibility属性等

animateMotion:沿某运动路线移动SVG元素

animateColor:改变某些元素的颜色属性值

SVG对SMIL动画的扩展元素和属性有:

animateTransform:改变SVG转换的转换属性值

path属性:改变animateMotion元素中path属性的所有特性。

mpath元素:SVG允许animateMotion元素包含mpath子元素,它能够引用SVG中path元素的路径定义

rotate属性:SVG为animateMotion增加一个rotate属性,用来控制一个对象是否自动进行旋转。

    下面通过一个简单的例子,来看一看SVG是如何实现动画效果的:

xml 代码

<!---->xml version="1.0" encoding="UTF-16" standalone="no"?>  

<!---->

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  

<svg width="500" height="400"  

xmlns="http://www.w3.org/2000/svg">  

<desc>本例子说明SVG的动画元素desc>  

<defs>  

<!---->  

<linearGradient id="grad1" x1="0" y1="0" x2="0" y2="100%">  

<stop offset="0%" style="stop-color: #88f;"/>  

<stop offset="100%" style="stop-color: #008;"/>  

linearGradient>  

defs>  

  

<!---->  

<circle id="RectElement" cx="50" cy="50" r="50"    

fill="rgb(255,0,0)" style="fill: url(#grad1);">  

<animate attributeName="cx" attributeType="XML"  

xlink:href="#RectElement" begin="0s" dur="9s" fill="freeze" from="50" to="250" />  

<animate attributeName="cy" attributeType="XML"  

xlink:href="#RectElement" begin="0s" dur="9s" fill="freeze" from="150" to="152" />  

<animate attributeName="r" attributeType="XML"  

xlink:href="#RectElement" begin="0s" dur="9s" fill="freeze" from="50" to="150" />  

circle>  

  

<!---->  

<g transform="translate(50,50)" >  

<!---->

'animateColor'和'animateTransform'元素的用法。 -->  

<text id="TextElement" x="0" y="0"  

font-family="宋体-18030" font-size="18" font-weight="bold" visibility="hidden" >    

欢迎光临!   

<tspan dx="-100" dy="20">Hello,World!tspan>  

<set attributeName="visibility" attributeType="CSS" to="visible"  

begin="4s" dur="6s" fill="freeze" />  

<animateMotion path="M 0 20 L 50 120"    

begin="4s" dur="6s" fill="freeze" />  

<animateColor attributeName="fill" attributeType="CSS"  

from="rgb(0,0,255)" to="rgb(128,0,0)"  

begin="4s" dur="6s" fill="freeze" />  

<animateTransform attributeName="transform" attributeType="XML"  

type="rotate" from="-90" to="0"  

begin="4s" dur="6s" fill="freeze" />  

<animateTransform attributeName="transform" attributeType="XML"  

type="scale" from="1" to="3" additive="sum"  

begin="4s" dur="6s" fill="freeze" />  

text>  

<text x="92" y="275" style="font-size:16pt;font-weight:bold">欢迎光临【孟宪会之精彩世界】text>  

<text x="105" y="295" style="font-size:16pt;font-weight:bold">http://lucky.myrice.comtext>  

g>  

svg>  

    上面例子中,我们可以看到,一个带渐变颜色填充的圆,位置逐渐向右下方移动,圆心位置从(50,150)移动到(250,152),同时,半径也由50增大到150;文字“Hello,World!”在4秒时开始出现(可视性visibility由hidden变成了visible),并开始向圆中心方向移动,颜色从#0000FF逐渐变成了#800000,文字方向由-90度逐渐变成0度,文字大小逐渐变化到原来的3倍;文字的变化共持续了6秒。以上代码的效果如下图所示:

 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐