- From: <ksmrq@netscape.net>
- Date: Fri, 15 Nov 2002 18:30:10 -0500
- To: www-svg@w3.org
The design of SVG's *declarative* animation seems peculiar. I would
appreciate comments from technically knowledgeable readers about the
method I have used to achieve my aims in the enclosed animation. First,
can you demonstrate a simpler way (NOT using scripts) to do this? And
second, (for committee members?) if not, why not?
I have tried to create as brief an example as possible to illustrate
my quandry. Nevertheless, it is longer than I would like, especially
as I must include it in my message.
To appreciate what I'm getting at, I suggest you first view the SVG,
think of how you would do it, read the comments to get an overview,
and then study the details of my approach. The effect is simple; the
method is not. :)
Just to be clear, with my method I can animate, say, an opacity, as
easily [sic] as a position.
If I have overlooked something in the REC, please tell me. I'll be
embarrassed, but grateful.
-- Ken
BezSimp.svg
--------------------
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
<!ENTITY sdur "5s">
]>
<svg width="16cm" height="9cm" viewBox="0 0 800 450">
<!-- BezSimp.svg -->
<!-- Copyright (c) 2002 Ken Shoemake. All rights reserved. -->
<style type="text/css">
.canv {stroke:none; fill:silver}
.lend {stroke-width:4; stroke:red; fill:none}
.lick {stroke-width:2; stroke:darkcyan; fill:none}
.bbkg {stroke-width:2; stroke:pink; fill:mintcream}
.btxt {font-family:"Arial, sans-serif"; font-weight:bold;
font-size:36}
</style>
<title>Bezier animation kludge</title>
<rect x="0" y="0" width="800" height="450" class="canv" />
<desc>
Animate a curve with one end moving on, and tangent to, a cubic path
and the other fixed. NO SCRIPTS ARE USED.
</desc>
<!--
Work around the design of declarative animation.
We cannot interpolate a value except linearly, however we can
control the
time function with a cubic. So express the desired cubic path in a
modified
Bernstein basis, and use spline timing to give the needed weights.
Yuck. |-(
The same method can be applied to ANY ATTRIBUTE accepting linear
animation.
-->
<g transform="translate(400,225) scale(1,-1)">
<path d="M -100,0 C 500,0 0,-500 0,100" class="lend" />
<!-- Animation -->
<g visibility="hidden">
<set attributeName="visibility" attributeType="CSS" to="visible"
begin="go.click" dur="&sdur;" fill="remove" />
<path d="M 0,0 C 0,0 -100,100 -100,100" class="lick">
<!-- Position on cubic -->
<animate attributeName="d" attributeType="XML" additive="sum"
values="M -100,0 C -100,0 0,0 0,0;
M 0,0 C 0,0 0,0 0,0"
calcMode="spline" keyTimes="0;1" keySplines="0.3333,1
0.6667,1"
begin="go.click" dur="&sdur;" fill="remove" />
<!-- Note scale factor of 4/9 on values -->
<animate attributeName="d" attributeType="XML" additive="sum"
values="M 0,0 C 0,0 0,0 0,0;
M 222,0 C 222,0 0,0 0,0;
M 0,0 C 0,0 0,0 0,0"
calcMode="spline" keyTimes="0;0.3333;1"
keySplines="0.3333,0.75 0.6667,1;0.3333,0 0.6667,1"
begin="go.click" dur="&sdur;" fill="remove" />
<!-- Note scale factor of 4/9 on values -->
<animate attributeName="d" attributeType="XML" additive="sum"
values="M 0,0 C 0,0 0,0 0,0;
M 0,-222 C 0,-222 0,0 0,0;
M 0,0 C 0,0 0,0 0,0"
calcMode="spline" keyTimes="0;0.6667;1"
keySplines="0.3333,0 0.6667,1;0.3333,0 0.6667,0.25"
begin="go.click" dur="&sdur;" fill="remove" />
<animate attributeName="d" attributeType="XML" additive="sum"
values="M 0,0 C 0,0 0,0 0,0;
M 0,100 C 0,100 0,0 0,0"
calcMode="spline" keyTimes="0;1" keySplines="0.3333,0
0.6667,0"
begin="go.click" dur="&sdur;" fill="remove" />
<!-- Derivative of cubic, times 2/5 -->
<animate attributeName="d" attributeType="XML" additive="sum"
values="M 0,0 C 240,0 0,0 0,0;
M 0,0 C 0,0 0,0 0,0"
calcMode="spline" keyTimes="0;1" keySplines="0.3333,0.6667
0.6667,1"
begin="go.click" dur="&sdur;" fill="remove" />
<!-- Note scale factor of 1/2 on values -->
<animate attributeName="d" attributeType="XML" additive="sum"
values="M 0,0 C 0,0 0,0 0,0;
M 0,0 C -100,-100 0,0 0,0;
M 0,0 C 0,0 0,0 0,0"
calcMode="spline" keyTimes="0;0.5;1"
keySplines="0.3333,0.6667 0.6667,1;0.3333,0 0.6667,0.3333"
begin="go.click" dur="&sdur;" fill="remove" />
<animate attributeName="d" attributeType="XML" additive="sum"
values="M 0,0 C 0,0 0,0 0,0;
M 0,0 C 0,240 0,0 0,0"
calcMode="spline" keyTimes="0;1" keySplines="0.3333,0
0.6667,0.3333"
begin="go.click" dur="&sdur;" fill="remove" />
</path>
</g>
</g>
<g id="go" transform="translate(100,100)"
pointer-events="visiblePainted">
<title>Run animation</title>
<animate attributeName="pointer-events" attributeType="XML"
additive="replace"
values="none" begin="go.click" dur="&sdur;" fill="remove" />
<rect width="60" height="45" rx="5" ry="5" class="bbkg">
<animateColor attributeName="fill" attributeType="CSS"
additive="replace"
values="lightcyan" begin="go.mouseover" end="go.mouseout"
fill="remove" />
</rect>
<text x="30" y="1em" text-anchor="middle" class="btxt">Go
<animateColor attributeName="fill" attributeType="CSS"
additive="replace"
values="darkgray" begin="go.click" dur="&sdur;" fill="remove"
/>
</text>
<rect width="60" height="45" rx="5" ry="5" opacity="0" class="bbkg"
/>
</g>
</svg>
__________________________________________________________________
The NEW Netscape 7.0 browser is now available. Upgrade now! http://channels.netscape.com/ns/browsers/download.jsp
Get your own FREE, personal Netscape Mail account today at http://webmail.netscape.com/
Received on Friday, 15 November 2002 23:34:09 UTC