W3C home > Mailing lists > Public > www-svg@w3.org > November 2002

Declarative animation limitations

From: <ksmrq@netscape.net>
Date: Fri, 15 Nov 2002 18:30:10 -0500
To: www-svg@w3.org
Message-ID: <25D1969B.1637CBE9.00014AB2@netscape.net>

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 GMT

This archive was generated by hypermail 2.3.1 : Friday, 8 March 2013 15:54:23 GMT