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

Carom

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.

Phenomenalism

I just updated the description a bit, since the engine has made huge progress since the time I first wrote the answer :) – Phenomenalism

@AurélienRibon, does it provide animation from one sprite to a different sprite ? – Ptarmigan

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.

Kaczmarek

If you are crating an game, you can use Vectors(Mathematical) to update the position of your images and then draw then with getX and getY. You should iterate and update this vector in some direction through some speed. – Witchery

@Marcos: I already implement a kind of vector in my Sprite class (x/y location, x/y veclocities). Is there a standard class for this that I've overlooked? – Carom

do you think it makes sense to use ImageViews for the sprites with some kind of absolute positioning, and then also rely on them for drawing? That's the kind of animation I'm used to doing on iPhone with Core Animation, and I was surprised that something similar wasn't the recommended example in Android. Android seems to encourage manually updating the canvas at regular intervals. I wonder if that's simply because the example I picked was a physics simulation, and there's no automated way to model dozens of particles, each exerting gravitational forces on the others. – Carom

I don't think so, although I have relatively little experience in this area. ImageView should be inside a view hierarchy, and I don't think it's typically used as an overlay for a canvas-based view. – Kaczmarek

Sorry, I didn't want to comment that. See the answer – Witchery

Answer 3

You could draw and animate your explosion in Adobe Flash, export the sprite images using swfSheet or similar and then use Frame animation

Hornet

Answer 4

If you are creating a game, you can use Vectors(Mathematical) to update the position of your images and then draw then with getX and getY. You should iterate and update this vector in some direction through some speed.

Those Vectors are not native (Game APIs has).

You need have a loop to iterate and update the position, then redraw.

For games, it's not a good idea to have components such ImageViews to make animations. They need the system to calc all the layout again and again over time.

Witchery