Main Menu

Play an SVG Animation

Description

This demo plays an SVG animation using the JSR 226 SVGAnimator class.
Animation is used to achieve moonrise, "zooming out" on a scene, rain
and lightning flashes. Before the animation begins a splash screen is
displayed. There are two ways to animate SVG images. One is
to use declarative animations. The other is to repeatedly modify the SVG
image parameters (like color or position), through API calls. The above
example illustrates declarative animation. The SVG file contains a
description of how the various image elements evolve over time to provide
this short cartoon like animation. As displayed on the splash screen,
keys "0", "5" and "8" can be used to stop, play or pause the animation.
The JSR 226 API is used to load the SVG file and play the animation, as explained below.

Once the animation starts, click anywhere inside the image below and
use keys "0", "5" and "8" to stop, play or pause.

Screenshots

JSR 226 Usage

The JSR 226 API is used to load the SVG file and play the animation.
The JSR 226 javax.microedition.m2g.SVGImage class is used to
load the SVG resource. Then, the javax.microedition.m2g.SVGAnimator
is created, which will handle all the complexities of SVG animations. It provides a
javax.microedition.lcdui.Canvas which displays the
animation. The SVGAnimator class provides methods to
play, pause and stop the animation. Using event listeners, certain keystrokes
are associated with playing, pausing and stopping the animation.

As mentioned before this is an example of declarative animation. SVG elements like
animateColor
and
animateTransform are used to encode how the image elements evolve over time.