Skip to main content
Play SVG Animation

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.

SVG file snippets

    <!-- Translate moon upwards to effect moon rise -->
    <animateTransform id="showMoon" xlink:href="#Moon" attributeName="transform" 
        attributeType="XML" type="translate"
        values="0,50; 0,5" begin="0.2s" dur="5s" fill="freeze"/>

    <!-- Animate location and size of viewbox to "zoom out". The animation
         starts one second after the moon has finished rising. -->  
    <animate xlink:href="#root" attributeName="viewBox" attributeType="XML" 
        values="5 5 80 105; 0 0 177.379 209" begin="showMoon.end+1s" dur="2s" />

    <!-- Moving a rain drop -->
    <use xlink:href="#RainDrop">
    <animateTransform attributeName="transform" attributeType="XML" type="translate"
     values="0,-100; 0,150" begin="0s" dur="1.5s" fill="freeze" repeatCount="indefinite"/>       
    </use>

JSR 226 Java code snippets

import javax.microedition.m2g.SVGAnimator;
import javax.microedition.m2g.SVGImage;
import javax.microedition.lcdui.Canvas;

...
// Get input stream to the SVG image stored in the MIDlet's jar.
InputStream svgDemoStream = getClass().getResourceAsStream(svgImageName);

...
// Build an SVGImage instance from the stream
SVGImage svgImage = (SVGImage) SVGImage.createImage(svgDemoStream, null);

...
// Build an SVGAnimator from the SVGImage. The SVGAnimator will handle
// all the animation details and run the SVG animation in a 
// Canvas instance.
SVGAnimator svgAnimator = SVGAnimator.createAnimator(svgImage);

...
// Get the Canvas managed by the SVGAnimator and set the 
// svgImage's size to the canvas display area.
svgCanvas = (Canvas)svgAnimator.getTargetComponent();
svgImage.setViewportWidth(svgCanvas.getWidth());
svgImage.setViewportHeight(svgCanvas.getHeight());

...
// Hook-in key listeners to play, pause and stop the animation.
svgAnimator.setSVGEventListener(this);
...

// In the keyPressed event handler, play, pause or stop animation
// depending on what key was pressed
public void keyPressed(int keyCode) {
    if ((keyCode == KEY_PLAY) && (state != STATE_PLAYING)) {
        svgAnimator.play();
        ....
    }
    if ((keyCode == KEY_PAUSE) && (state == STATE_PLAYING)) {
        svgAnimator.pause();
        ....
    }
    if ((keyCode == KEY_STOP) && (state != STATE_STOPPED)) {
        svgAnimator.stop();
        ....
    }
...

Source files

The full source for playing an SVG Animation is available within the DemoBox project under the SVGDemo directory. The PlaySVGImageDemo.java contains the relevant source code and halloween.svg contains the relevant svg file.
 
 
Close
loading
Please Confirm
Close