W3C home > Mailing lists > Public > www-svg@w3.org > January 2011

Animation restart

From: Frederik Elwert <frederik.elwert@web.de>
Date: Wed, 05 Jan 2011 21:16:56 +0100
To: www-svg@w3.org
Message-ID: <1294258616.1897.32.camel@frederik-hp>
Hi there!

I am currently experimenting with interactive and animated SVG graphics.
When I have several animations that always run concurrently, I tend to
make on the “master” animation and synchronize the others by setting
“begin="master.begin"”. This allows to change the actual begin (time,
event, etc.) at a single place and still have the animations in sync.

Now I noticed one oddity with repeated syncs with both start and end
event driven: I have an animation that starts at an click event and then
repeats until stopped by another click event. Both start and end of a
second animation are synced to the first one.

Here is a minimal example:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svg2816" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
 <g id="layer1" fill-rule="nonzero">
  <rect id="rect" stroke-linejoin="miter" style="enable-background:accumulate;color:#000000;stroke-dasharray:none;" stroke-dashoffset="0" ry="30" height="140" width="270" stroke="#8ae234" stroke-linecap="round" stroke-miterlimit="4" y="90" x="185" stroke-width="1" fill="#244703">
    <animate id="startx" attributeName="x" values="185;100;185" begin="start.click" end="stop.click" dur="2s" fill="freeze" repeatCount="indefinite"/>
    <animate attributeName="y" values="90;40;90" begin="startx.begin" end="startx.end" dur="2s" fill="freeze" repeatCount="indefinite"/>
  </rect>
  <rect id="start" style="enable-background:accumulate;color:#000000;" ry="10" height="55.338" width="96.241" y="382.56" x="181.88" fill="#204a87"/>
  <rect id="stop" style="enable-background:accumulate;color:#000000;" ry="10" height="55.338" width="96.241" y="382.56" x="361.88" fill="#a40000"/>
 </g>
</svg>

Opera runs both animations when clicking on start (the blue rect) and
stops them when clicking on stop (the red rect). But when restarting the
animation, in runs only the “master” animation (startx).

Batik, on the other hand, only runs “master” (startx) when starting the
animation for the first time. With following restarts, it runs both
animations.

(There also is a difference in handling the end event: Batik sets the
animation to the last value, while Opera just freezes the animation.)

So my questions are:

      * Is my original approach valid at all? 
      * Which behaviour is the defined one? If any? 
      * Are there better solutions?

Thanks,
Frederik
Received on Wednesday, 5 January 2011 22:13:31 GMT

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