Yesterday afternoon, I checked in support for the <animateMotion> SVG element, so that feature is supported in this morning's nightly build!
The <animateMotion> element allows for much more flexibility in SVG animations. Mozilla's nightly builds have supported animation of most SVG attributes and properties for a while now, but <animateMotion> gives authors the added ability to effortlessly animate an element to move along any arbitrary path.
I've written a simple Rocket Demo to give an example of the types of things you can do with this. This demo depicts the sad cartoony story of a rocket that gets hit by an asteroid, loses power to its boosters, and slowly falls into the sun. The demo uses no Javascript at all, and it uses <animateMotion> to define the motion-paths of all of the moving elements. I've tested the demo in Opera, Firefox-nightly, and Chromium nightly -- a few things don't work in Chromium, but it works great in the other two browsers. (Thanks to clker.com for some public-domain SVG clip art that I use in the demo.)
Marek Raida (a wizard of SVG demos, and the author of the "Cavern Fighter" game that I linked to a few posts back) has come up with two excellent <animateMotion> demos as well: "Drawing Animals" and "Catch the Mouse." Both are linked off of hist latest blog post. (Note: He's also got a fancier version of the "Catch the Mouse" demo where the mouse's footprints slowly disappear, but Firefox nightly builds are currently a bit choppy on that version, due to some code we should probably optimize for SMIL animation of CSS properties.)
Subscribe to:
Post Comments (Atom)
4 comments:
Nice work, Daniel!
Your work, as well as rocket demo, is very very good ;-)))
Outstanding!!
I gave you a post at http://tech.groups.yahoo.com/group/svg-developers/message/63747
The file I posted shows a bug in Minefield in one of the animate attributeName="display" commands. You can see it if you compare with a WebKit browser side by side.
However the animateMotion works perfectly with all 13 of them in sync.
Thanks!
@Cameron, Marek: Thanks! :)
@Anonymous/Bruce: I like the Carousel demo, and thanks for the heads up on that bug. I believe the timing on the "display" animations ends up wrong, due to a known issue with keyTimes & calcMode="discrete". It should be fixed once that bug is fixed.
In the meantime, you can work around it by removing the |keyTimes| attribute -- you don't actually need it -- and instead just make the animations on "display" have 2 values instead of 3 (i.e. change "none;inline;inline" to "none;inline", and change "inline;none;none" to "inline;none"). That gives desired results in both Minefield & Opera 10.10, on my machine.
Thanks again for the feedback!
Post a Comment