Before and after examples of time containers in SVG animation

Dear all,

I have ACTION-3202 to "Prepare before and after examples of using time 
containers in SVG animation."

First, a very simple example.

Before:

   <animate id="a" ... />
   <animate begin="a.end" ... />

After:

   <g time-container="seq">
     <animate ... />
     <animate ... />
   </g>

The advantage of the second approach is:

* The whole sequence can be easily cancelled by cancelling the group (In 
the first approach, cancelling 'a' will still trigger the second animation)
* There is no need to generate IDs (a significant issue when generating 
animations via script)
* The relationship between animations is clear at a glance

This becomes even more powerful when nesting "par" and "seq" containers 
and when you start putting conditions and parameters on the time 
containers. Reversing the whole container is also interesting.

Again, before:

   <animate begin="5s" id="a" ... />
   <animate begin="a.begin+2s" ... />
   <animate begin="a.begin+1s" ... />

After:

   <g time-container="par">
     <animate id="a" ... />
     <animate begin="2s" ... />
     <animate begin="1s" ... />
   </g>

For a more complex example, I've taken the ubiquitous button example.[1]

I've put the animations together and cut out most of the non-timing 
related attributes.

Before:

   <animate xlink:href="#glowFlood" begin="rect.mouseover"
     end="rect.mouseout" .../>
   <animate xlink:href="#glowFlood" begin="rect.mouseout"
     end="rect.mouseover" .../>
   <animateTransform xlink:href="#label"
     begin="rect.mouseover; rect.mouseout-0.01s"
     end="rect.mouseout; rect.mouseover" restart="whenNotActive" .../>
   <animate xlink:href="#label" begin="rect.mouseover"
     end="rect.mouseout" .../>
   <animate xlink:href="#label" begin="rect.mouseout"
     end="rect.mouseover" .../>
   <animate xlink:href="#whitenR" begin="rect.mouseover"
     end="rect.mouseout" .../>
   <animate xlink:href="#whitenR" begin="rect.mouseout"
     end="rect.mouseover" .../>
   <animate xlink:href="#whitenG" begin="rect.mouseover"
     end="rect.mouseout" .../>
   <animate xlink:href="#whitenG" begin="rect.mouseout"
     end="rect.mouseover" .../>
   <animate xlink:href="#whitenB" begin="rect.mouseover"
     end="rect.mouseout" .../>
   <animate xlink:href="#whitenB" begin="rect.mouseout"
     end="rect.mouseover" .../>
   <set xlink:href="#frames" begin="rect.mouseover"
     end="rect.mouseout" .../>
   <set xlink:href="#frame0" begin="rect.mouseover"
     end="rect.mouseout" .../>
   <animate xlink:href="#frame1" begin="waveything.begin"
     end="waveything.end" repeatCount="indefinite"
     keyTimes="0; 0.013889; 0.027778; 0.972222; 0.986111" .../>
   <animate xlink:href="#frame2" begin="waveything.begin"
     end="waveything.end" repeatCount="indefinite"
     keyTimes="0; 0.027778; 0.041667; 0.958333; 0.972222" .../>
   ...
   <animate xlink:href="#frame35" begin="waveything.begin"
     end="waveything.end" repeatCount="indefinite"
     keyTimes="0; 0.486111; 0.500000; 0.500000; 0.513889" .../>
   <set xlink:href="#whiteRect" begin="rect.mouseover"
     end="rect.mouseout" .../>

After:

   <g time-container="seq" begin="rect.mouseover"
     end="rect.mouseout">
     <g time-container="par">
       <animate xlink:href="#glowFlood" .../>
       <animateTransform xlink:href="#label" .../>
       <animate xlink:href="#label" .../>
       <animate xlink:href="#whitenR" .../>
       <animate xlink:href="#whitenG" .../>
       <animate xlink:href="#whitenB" .../>
       <set xlink:href="#whiteRect" .../>
     </g>
     <g time-container="par" repeatCount="indefinite">
       <set xlink:href="#frame0" .../>
     <g time-container="seq">
       <animate xlink:href="#frame1" .../>
       <animate xlink:href="#frame2" .../>
       ...
       <animate xlink:href="#frame35" .../>
     </g>
     </g>
   </g>
   <g time-container="par" begin="rect.mouseout" end="rect.mouseover">
     <animateTransform xlink:href="#label" .../>
     <animate xlink:href="#glowFlood" .../>
     <animate xlink:href="#label" .../>
     <animate xlink:href="#whitenR" .../>
     <animate xlink:href="#whitenG" .../>
     <animate xlink:href="#whitenB" .../>
   </g>

That's a whole lotta code, but the take away point is that all the 
'begin' and 'end' attributes on individual animations are gone and the 
structure is much clearer. It's also a lot easier to add reversing 
behaviour to this arrangement (once we add this feature) and have the 
whole composite transition reverse. Furthermore, we could probably 
specify 'dur' on the container and have that inherit further simplifying 
the individual animations.

There are a few more before-and-after examples in the proposal I put 
forward in Auckland.[2]

Best regards,

Brian

[1] http://brian.sol1.net/svg/demo/button.svg
[2] 
http://www.w3.org/Graphics/SVG/WG/wiki/F2F/Auckland_2011/Animation_improvements#Issue:_SMIL_is_greatly_complicated_by_syncbase_timing

Received on Tuesday, 21 February 2012 02:51:58 UTC