Re: combining javascript and declarative animation?

Eric,
I took your example and kept hacking at it until I could get it working.

The following code creates a circle along with an associated animation. It 
works for me with an updated development version of the Adobe SVG Viewer. 
It would expect that it also works with the current release version which 
you apparently have.

Here are some of the things I remember that I had to change:

* You didn't provide a value for the 'dur' attribute. Without a duration, 
the animation starts at time "1s" and end at infinity. There is no good way 
to interpolate values in this case, so the SMIL Animation spec says that 
proper behavior is to keep the initial value forever.

* I'm not sure what type of object your "root" element was. The 
createElement() call is only available on the Document interface. The 
appendChild() call is only available on the Node interface. The "root" 
element has to be either a Document or a Node (e.g., an Element) and thus 
cannot have both methods available.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
   "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg  width="450" height="450"
        onload="onEvent(evt)" >
   <defs>
           <script>
                   <![CDATA[
                   function onEvent(evt){
                     // Get Document
         var target = evt.getTarget();
                     var doc = target.getOwnerDocument();
                     var g_element = doc.getElementById('g_element');

         var circle = doc.createElement('circle');
         circle.setAttribute( 'cx', 100 );
         circle.setAttribute( 'cy', 100 );
         circle.setAttribute( 'r', 30 );
         circle.setAttribute( 'style', 'fill: black; opacity: 0.2;' );
         g_element.appendChild(circle);

         var anim = doc.createElement('animate');
         anim.setAttribute( 'attributeName', 'opacity' );
         anim.setAttribute( 'attributeType', 'CSS' );
         anim.setAttribute( 'from', '0.2' );
         anim.setAttribute( 'to', '0.8' );
         anim.setAttribute( 'begin', '1s' );
         anim.setAttribute( 'dur', '3s' );
         circle.appendChild( anim );
                   }
                   ]]>
           </script>
   </defs>

   <g id="g_element">
   </g>

</svg>


Jon


At 12:45 PM 9/22/00 -0700, Eric Wong wrote:
>Hi,
>
>I was wondering if it was possible to combine javascript with declarative
>animation.  For example, I want to use javascript to create an animated
>circle, so I tried this:
>
>         function _new_circle( x, y ) {
>             var circle = root.createElement('circle');
>             circle.setAttribute( 'cx', x );
>             circle.setAttribute( 'cy', y );
>             circle.setAttribute( 'r', 30 );
>             circle.setAttribute( 'style', 'fill: black; opacity: 0.2;' );
>
>             var anim = root.createElement('animate');
>             anim.setAttribute( 'attributeName', 'opacity' );
>             anim.setAttribute( 'attributeType', 'CSS' );
>             anim.setAttribute( 'from', '0.2' );
>             anim.setAttribute( 'to', '0.8' );
>             anim.setAttribute( 'begin', '1s' );
>
>             circle.appendChild( anim );
>
>             return circle;
>         }
>
>but when I put the returned circle-element into the svg (I appendChild()
>it to an empty g-element), the circle is painted onto the canvas (good!),
>but it just sits there (bad), ignoring the animate.
>
>The other option (which works) is to simply use javascript itself to
>animate the circle, but I figured that it would be nice if I could get
>someone else to do my work for me :)
>
>I'm using Windows, IE 5.5 and the Adobe plug-in.
>
>Thanks,
>Eric

Received on Wednesday, 27 September 2000 08:27:04 UTC