Re: [svg-developers] Additive animation using 'by' attribute in animationTransform doesn't work?
* clog_meister wrote: >Problem: I want to continue an animationTransform from the y position >it was 'frozen' to. The object is moved by 50 pixels along the y-axis >(that works). After it stops I want it to go back 20 pixels along the >y-axis from where it ended up (that doesn't work as expected). >However, the effect is that the object is repainted at its original >position and then goes back 20 pixels. So use two animations like A certain broken implementation insists on the additive="sum" here, perhaps that was your problem. >I read a lot of material including the SVG standard and example code >>from Opera and many, many others. I experimented with the 'additive' >and 'accumulate' attributes. I also tinkered with prev.begin, >prev.end, beginElement() and endElement(). All without success. Note that prev.begin and prev.end are proprietary extensions that won't work across implementations (unless you have an id="prev" somewhere). >Can someone tell me how I can force animationTransform to retain the >last 'freeze' position and animate from there? Or point me to a >tutorial in which this behavior is explained? > >In code I made something like this: >(note: svgO is the animated object) > > var animation; > > animation = svgO.ownerDocument.createElementNS( >'http://www.w3.org/2000/svg', 'animateTransform' ); Note that dynamically creating animation elements, especially after the document has begun, is highly problematic and does not work well across implementations. > animation.setAttributeNS( null, 'by', '0, -20' ); > animation.setAttributeNS( null, 'dur', 3 ); Changing animation elements after they have begun and while they are in the document tree is even more problematic. If at all possible you should use them only directly as markup. If you have to use scripting you should consider to script the animation instead of using SMIL. -- Björn Höhrmann · mailto:[EMAIL PROTECTED] · http://bjoern.hoehrmann.de Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de 68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/ - To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
Re: [svg-developers] Additive animation using 'by' attribute in animationTransform doesn't work?
On Tue, 06 Feb 2007 20:01:37 +0530, clog_meister <[EMAIL PROTECTED]> wrote: > Can someone tell me how I can force animationTransform to retain the > last 'freeze' position and animate from there? Or point me to a > tutorial in which this behavior is explained? I think you need to freeze and to make the animations additive="sum" There is an example I wrote at the end of http://dev.opera.com/articles/view/animating-your-svg/ but it doesn't actually explain that point much... cheers Chaals -- Charles McCathieNevile, Opera Software: Standards Group hablo español - je parle français - jeg lærer norsk [EMAIL PROTECTED] Try Opera 9.1 http://opera.com - To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
[svg-developers] Additive animation using 'by' attribute in animationTransform doesn't work?
Hi,
I'm fairly new to SVG and I'm trying to solve an annoying little
problem that keeps me busy for a whole day now.
Problem: I want to continue an animationTransform from the y position
it was 'frozen' to. The object is moved by 50 pixels along the y-axis
(that works). After it stops I want it to go back 20 pixels along the
y-axis from where it ended up (that doesn't work as expected).
However, the effect is that the object is repainted at its original
position and then goes back 20 pixels.
I read a lot of material including the SVG standard and example code
from Opera and many, many others. I experimented with the 'additive'
and 'accumulate' attributes. I also tinkered with prev.begin,
prev.end, beginElement() and endElement(). All without success.
Can someone tell me how I can force animationTransform to retain the
last 'freeze' position and animate from there? Or point me to a
tutorial in which this behavior is explained?
In code I made something like this:
(note: svgO is the animated object)
var animation;
animation = svgO.ownerDocument.createElementNS(
'http://www.w3.org/2000/svg', 'animateTransform' );
animation.setAttributeNS( null, 'attributeName', 'transform' );
animation.setAttributeNS( null, 'type', 'translate' );
animation.setAttributeNS( null, 'restart', 'always' );
animation.setAttributeNS( null, 'begin', 'indefinite' );
animation.setAttributeNS( null, 'end', 'indefinite' );
animation.setAttributeNS( null, 'fill', 'freeze' );
animation.setAttributeNS( null, 'by', '0, 50' );
animation.setAttributeNS( null, 'dur', 5 );
/*
* Link the animation to the target
*/
svgO.appendChild( animation );
alert("Begin first animation");
animation.beginElement();
alert("Stop first animation");
animation.endElement();
alert("Start second animation");
animation.setAttributeNS( null, 'by', '0, -20' );
animation.setAttributeNS( null, 'dur', 3 );
animation.beginElement();
alert("Stop second animation");
animation.endElement();
Rick
-
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
<*> To change settings via email:
mailto:[EMAIL PROTECTED]
mailto:[EMAIL PROTECTED]
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
