以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 SVG/GML/VRML/X3D/XAML 』  (http://bbs.xml.org.cn/list.asp?boardid=21)
----  停止和播放动画的例子~  (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=35885)

--  作者：tamefox
--  发布时间：7/21/2006 4:42:00 PM

--  停止和播放动画的例子~
<?xml version='1.0' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20001102//EN'
  'http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd'>
<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' onload='Init(evt)'>
   <title>Atomic Freeze</title>
   <desc>
      A demonstration of how to pause and play animations in SVG.
      Written by Doug Schepers [doug@schepers.cc], November 2004.
   </desc>
   <script><![CDATA[
      var SVGDocument = null;
      var SVGRoot = null;
      var svgns = 'http://www.w3.org/2000/svg';
      var xlinkns = 'http://www.w3.org/1999/xlink';
      var pauseButton = null;
      var playButton = null;
      function Init(evt)
      {
         SVGDocument = evt.target.ownerDocument;
         SVGRoot = SVGDocument.documentElement;
         pauseButton = SVGDocument.getElementById('pauseGroup');
         playButton = SVGDocument.getElementById('playGroup');
      };
      function Pause()
      {
         SVGRoot.pauseAnimations();
         pauseButton.setAttributeNS(null, 'display', 'none');
         playButton.setAttributeNS(null, 'display', 'inline');
      };
      function Play()
      {
         SVGRoot.unpauseAnimations();
         playButton.setAttributeNS(null, 'display', 'none');
         pauseButton.setAttributeNS(null, 'display', 'inline');
      };
   ]]></script>
   <defs>
      <g id='atomGroup1' stroke-width='5'>
         <line x1='300' y1='280' x2='300' y2='420' stroke-linecap='round'/>
         <circle cx='300' cy='280' r='20'/>
         <circle cx='300' cy='420' r='20'/>
         <animateTransform attributeType='XML' attributeName='transform' type='rotate' from='0,300,250' to='360,200,250' begin='0s' dur='5s' repeatCount='indefinite'/>
      </g>
   </defs>
   <use x='0' y='0' xlink:href='#atomGroup1' stroke='orange' fill='crimson'>
      <animateColor attributeName='fill' begin='0s' dur='15s' values='crimson;orange;crimson' fill='freeze' repeatCount='indefinite'/>
      <animateColor attributeName='stroke' begin='0s' dur='15s' values='orange;crimson;orange' fill='freeze' repeatCount='indefinite'/>
   </use>
   <use x='0' y='0' xlink:href='#atomGroup1' stroke='cornflowerblue' fill='blue' transform='rotate(60,300,250)'>
      <animateColor attributeName='fill' begin='2s' dur='6s' values='cornflowerblue;blue;cornflowerblue' fill='freeze' repeatCount='indefinite'/>
      <animateColor attributeName='stroke' begin='2s' dur='6s' values='blue;cornflowerblue;blue' fill='freeze' repeatCount='indefinite'/>
   </use>
   <use x='0' y='0' xlink:href='#atomGroup1' stroke='lawngreen' fill='green' transform='rotate(120,300,250)'>
      <animateColor attributeName='fill' begin='2s' dur='8s' values='green;lawngreen;green' fill='freeze' repeatCount='indefinite'/>
      <animateColor attributeName='stroke' begin='2s' dur='10s' values='lawngreen;green;lawngreen' fill='freeze' repeatCount='indefinite'/>
   </use>
   <use x='0' y='0' xlink:href='#atomGroup1' stroke='gold' fill='goldenrod' transform='rotate(180,300,250)'>
      <animateColor attributeName='fill' begin='2s' dur='8s' values='goldenrod;gold;goldenrod' fill='freeze' repeatCount='indefinite'/>
      <animateColor attributeName='stroke' begin='2s' dur='10s' values='gold;goldenrod;gold' fill='freeze' repeatCount='indefinite'/>
   </use>
   <use x='0' y='0' xlink:href='#atomGroup1' stroke='chocolate' fill='saddlebrown' transform='rotate(240,300,250)'>
      <animateColor attributeName='fill' begin='2s' dur='8s' values='saddlebrown;chocolate;saddlebrown' fill='freeze' repeatCount='indefinite'/>
      <animateColor attributeName='stroke' begin='2s' dur='10s' values='chocolate;saddlebrown;chocolate' fill='freeze' repeatCount='indefinite'/>
   </use>
   <use x='0' y='0' xlink:href='#atomGroup1' stroke='lightcoral' fill='mediumvioletred' transform='rotate(300,300,250)'>
      <animateColor attributeName='fill' begin='2s' dur='8s' values='mediumvioletred;lightcoral;mediumvioletred' fill='freeze' repeatCount='indefinite'/>
      <animateColor attributeName='stroke' begin='2s' dur='10s' values='lightcoral;mediumvioletred;lightcoral' fill='freeze' repeatCount='indefinite'/>
   </use>
   <a id='playGroup' display='none' onclick='Play()'>
      <circle id='play' cx='50' cy='50' r='15' fill='green'/>
      <polygon points='46,44 57,50 46,56' fill='lime' stroke='lime' stroke-width='2' stroke-linejoin='round'/>
   </a>
   <a id='pauseGroup' display='inline' onclick='Pause()'>
      <circle id='pause' cx='50' cy='50' r='15' fill='red'/>
      <line x1='47' y1='45' x2='47' y2='55' stroke='pink' stroke-width='4' stroke-linecap='round'/>
      <line x1='54' y1='45' x2='54' y2='55' stroke='pink' stroke-width='4' stroke-linecap='round'/>
   </a>
</svg>

[此贴子已经被作者于2006-8-4 9:06:31编辑过]
--  作者：DJxiaoyang
--  发布时间：8/3/2006 6:09:00 PM

--  
怎么看啊？
我复制过来提示有错误！！！
--  作者：tamefox
--  发布时间：8/4/2006 9:09:00 AM

--  
将所有超链接中的“'”替换成“ ‘ ”(单撇号)，再运行就可以了，发表的时候是单撇号的，不知道为何显示出来就变成了“'”
--  作者：qb10
--  发布时间：4/20/2007 12:13:00 PM

--  
很不错！
--  作者：乖乖爱乖乖
--  发布时间：5/29/2008 4:40:00 PM

--  
如果不用脚本控制，直接用那些动画元素可以控制动画的播放和暂停吗
--  作者：zpjdgp888
--  发布时间：5/30/2008 8:54:00 AM

--  
不错啊，谢谢分享
W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 62.500ms