Android: tween animation of a bitmap

Question

My app implements its own sprites by calling the following in my view's onDraw() method:

  canvas.drawBitmap(sprite.getBitmap(), sprite.getX(), sprite.getY(), null);

The app is a physics simulation, and so far this has worked out great. But now I'd like to enhance the animation by morphing between images for the sprites when certain events occur.

For example- when a collision happens, I would like to play an animation of an explosion. My idea was to replace the usual sprite bitmap with that of an explosion PNG, and use Android "tween animation" to make the explosion grow larger.

But the Android tween animation example assumes that you have an ImageView defined somewhere statically in your XML configuration.

Is there a way to animate a bitmap as drawn in onDraw() using tween animation? Or do I need to convert my sprites to use some sort of ImageView? If the latter, can you point me to an example of proper sprite animation in Android?

Thanks

Answer 1

I built a generic Tween Engine in java that you can use to animate anything, including your sprites. It's optimized for Android and games because it does not allocate anything at runtime, to avoid any garbage collection. Moreover, Tweens are pooled, so really: no garbage collection at all!

You can see a complete demo here as an android application, or here as a WebGL html page (requires Chrome)!

All you have to do is implement the TweenAccessor interface to add Tween support to all your sprites. You don't even have to change your Sprite class, just create a SpriteTweenAccessor class that implements TweenAccessor<Sprite>, and register it to the engine at initialization. Just have a look at the GetStarted wiki page ;)

http://code.google.com/p/java-universal-tween-engine/

I'm also building a visual timeline editor that can be embedded in any application. It will feature a timeline similar to the Flash authoring tool and Expression Blend (a Silverlight dev tool).

The whole engine is heavily documented (all public methods and classes have detailed javadoc), and the syntax is quite similar to Greensock's TweenMax/TweenLite engine that is used in the Flash world. Note that it supports every Robert Penner easing equation.

// Arguments are (1) the target, (2) the type of interpolation, 
// and (3) the duration in seconds. Additional methods specify  
// the target values, and the easing function. 

Tween.to(mySprite, Type.POSITION_XY, 1.0f).target(50, 50).ease(Elastic.INOUT);

// Possibilities are:

Tween.to(...); // interpolates from the current values to the targets
Tween.from(...); // interpolates from the given values to the current ones
Tween.set(...); // apply the target values without animation (useful with a delay)
Tween.call(...); // calls a method (useful with a delay)

// Current options are:

yourTween.delay(0.5f);
yourTween.repeat(2, 0.5f);
yourTween.repeatYoyo(2, 0.5f);
yourTween.pause();
yourTween.resume();
yourTween.setCallback(callback);
yourTween.setCallbackTriggers(flags);
yourTween.setUserData(obj);

// You can of course chain everything:

Tween.to(...).delay(1.0f).repeat(2, 0.5f).start();

// Moreover, slow-motion, fast-motion and reverse play is easy,
// you just need to change the speed of the update:

yourTween.update(delta * speed);

Of course, no tween engine would be complete without providing a way to build powerful sequences :)

Timeline.createSequence()
    // First, set all objects to their initial positions
    .push(Tween.set(...))
    .push(Tween.set(...))
    .push(Tween.set(...))

    // Wait 1s
    .pushPause(1.0f)

    // Move the objects around, one after the other
    .push(Tween.to(...))
    .push(Tween.to(...))
    .push(Tween.to(...))

    // Then, move the objects around at the same time
    .beginParallel()
        .push(Tween.to(...))
        .push(Tween.to(...))
        .push(Tween.to(...))
    .end()

    // And repeat the whole sequence 2 times
    // with a 0.5s pause between each iteration
    .repeatYoyo(2, 0.5f)

    // Let's go!
    .start();

I hope you're convinced :) There are a lot of people already using the engine in their games or for android UI animation.

Answer 2

You can do the tween animation without the ImageView coming from an xml file, but it does need to actually be a View in your view hierarchy.

The drawing you're doing in your Canvas is opaque to the view hierarchy. I think you have two options:

1. Overlay an ImageView on top of your custom view and animate that using tween animations.
2. Use Canvas draw routines to animate your explosion.

I'd say that using Canvas routines, along with their maxtrix transformations, makes sense given that you probably already have an animation thread in your app.