以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 SVG/GML/VRML/X3D/XAML 』  (http://bbs.xml.org.cn/list.asp?boardid=21)
----  svg动画  (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=17313)

--  作者：dami_333
--  发布时间：4/22/2005 11:33:00 AM

--  svg动画
那位高手能指点一下svg动画制作要用什么工具啊？本人是初学者，谢谢各位师傅了！！！
--  作者：keeponline
--  发布时间：4/22/2005 12:03:00 PM

--  
SVG本身就可以做动画，用Animation，setattribute。另外再加JS，计算和控制时间，效果就更好。
下面可以是一个文件，也可以是两个文件。一个SVG、一个JS，放在同一个目录。
SVG文件内容
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script><![CDATA[
function getData()
{
 getURL('changeAnimationValues.js',loaddata) //可以直接把JS内容加这里
}
function loaddata(data)
{
 if(data.success)
 {
  eval("var dynDat = " + data.content);
  for(obj in dynDat)
  {
   try
   {
    var elem = document.getElementById(obj);
    var attr = dynDat[obj];
    for(a in attr) elem.setAttributeNS(null,a,attr[a]);
   }
   catch(e){};
  }
 }
}

]]></script>

<defs>
<set xlink:href="#button" attributeName="pointer-events" to="none" in="button.click"/>
<set xlink:href="#bText" attributeName="fill-opacity" to=".3" begin="button.click"/>
<set id="set01" xlink:href="#rect01" attributeName="fill" to="#260" ="rect01.mouseover" end="rect01.mouseout" />
<animate id="anim01" xlink:href="#circ01" attributeName="cx" values="150;200;150;100;150" begin="0" dur="4" repeatCount="indefinite" />
</defs>
<text x="80" y="70" font-size="16" font-family="monospace" font-weight="bold" pointer-events="none">mouse over:</text>
<text x="300" y="70" font-size="16" font-family="monospace" font-weight="bold" pointer-events="none">watch:</text>
<!-- mouseOverRect -->
<rect id="rect01" x="100" y="100" rx="20" width="100" height="100" fill="#cdd" stroke="none" stroke-width="20"/>
<!-- cross/circle -->
<g transform="translate(230,-60)">
 <rect x="90" y="198" ry="12" width="120" height="24" fill="#cdd"/>
 <rect x="138" y="178" rx="12" width="24" height="64" fill="#cdd"/>
 <circle id="circ01" cx="150" cy="210" r="10" fill="#666"/>
</g>

<!-- button -->
<g id="button" transform="translate(100,-160)" onclick="getData()">
 <a>
  <rect x="102" y="437" rx="5" width="100" height="30" fill="#666" />
  <rect x="100" y="435" rx="5" width="100" height="30" fill="pink" />
  <text id="bText" x="150" y="457" font-size="20" font-family="monospace" font-weight="bold" pointer-events="none" text-anchor="middle">
   change
  </text>
 </a>
</g>
</svg>

changeAnimationValues.js
{
 set01:{attributeName:'stroke',to:'#620'},
 anim01:{attributeName:'cy',values:'210;230;210;190;210',dur:'2'}
}

--  作者：keeponline
--  发布时间：4/22/2005 12:05:00 PM

--  
有什么问题可以联系：keeponline75@hotmail.com;QQ:106076402
--  作者：keeponline
--  发布时间：4/22/2005 12:12:00 PM

--  
路径动画，见FTP
--  作者：dami_333
--  发布时间：4/22/2005 10:17:00 PM

--  
好人哪！！！！ 小女子这里先谢过了。
--  作者：keeponline
--  发布时间：5/24/2005 9:17:00 AM

--  
别客气，互相提高才是好事。
W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 46.875ms