<?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编辑过]
[返回] 中文XML论坛 - 专业的XML技术讨论区 →
XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → 停止和播放动画的例子~
(订阅本版)
2006/7/21 16:42:00
新浪微博
停止和播放动画的例子~
