Android: animación de interpolación de un mapa de bits

Question

Mi aplicación implementa sus propios sprites llamando al siguiente en el método onDraw() de mi vista:

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

La aplicación es una simulación de la física, y hasta ahora esto ha funcionado de maravilla. Pero ahora me gustaría mejorar la animación cambiando las imágenes de los sprites cuando ocurren ciertos eventos.

Por ejemplo, cuando ocurre una colisión, me gustaría reproducir una animación de una explosión. Mi idea era reemplazar el mapa de bits de sprites habitual con el de una explosión PNG, y usar la "animación interpolada" de Android para hacer que la explosión crezca.

Pero el Android tween animation example asume que tiene un ImageView definido de forma estática en su configuración XML.

¿Hay alguna manera de animar un mapa de bits tal como se dibujó en onDraw() usando la animación interpolada? ¿O necesito convertir mis sprites para usar algún tipo de ImageView? Si es lo último, ¿puedes señalarme un ejemplo de animación sprite adecuada en Android?

Gracias

Answer 1

Creé un Tween Engine genérico en java que puedes usar para animar cualquier cosa, incluidos tus sprites. Está optimizado para Android y juegos porque no asigna nada en tiempo de ejecución, para evitar cualquier recolección de basura. Además, los Tweens se agrupan, así que realmente: ¡no hay recolección de basura para nada!

Puede ver una demostración completa here como una aplicación de Android, o here como una página WebGL html (requiere Chrome)!

Todo lo que tiene que hacer es implementar la interfaz TweenAccessor para agregar soporte Tween a todos sus sprites. Ni siquiera tiene que cambiar su clase Sprite, simplemente cree una clase SpriteTweenAccessor que implemente TweenAccessor<Sprite>, y regístrela al motor en la inicialización. Sólo echar un vistazo a la GetStarted wiki page;)

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

También estoy construyendo un editor de línea de tiempo visual que puede ser embebido en cualquier aplicación. Incluirá una línea de tiempo similar a la herramienta de edición de Flash y Expression Blend (una herramienta de desarrollo de Silverlight).

Todo el motor está muy documentado (todos los métodos y clases públicas tienen javadoc detallado), y la sintaxis es bastante similar al motor TweenMax/TweenLite de Greensock que se utiliza en el mundo Flash. Tenga en cuenta que es compatible con todas las ecuaciones de relajación de Robert Penner.

// 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); 

Por supuesto, ningún motor de Tween estaría completo sin proporcionar una manera de construir secuencias de gran alcance :)

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(); 

espero que esté convencido :) Hay una gran cantidad de personas que ya están utilizando la motor en sus juegos o para la animación de la interfaz de usuario de Android.

Answer 2

Usted puede hacer la animación de interpolación sin la ImageView procedentes de un archivo XML, pero tiene que ser en realidad una vista en su jerarquía de vistas.

El dibujo que está haciendo en su Canvas es opaco para la jerarquía de vista. Creo que tienes dos opciones:

1. superponer un ImageView en la parte superior de la vista personalizada y animar que el uso de animaciones tween.
2. Use Canvas dibuje rutinas para animar su explosión.

Yo diría que el uso de las rutinas Canvas, junto con sus transformaciones maxtrix, tiene sentido dado que probablemente ya tenga un hilo de animación en su aplicación.

Answer 3

Se podría dibujar y animar a su explosión en Adobe Flash, exportar las imágenes de sprite usando swfSheet o similar y luego usar Frame animation

Answer 4

Si está creando un juego, puede utilizar Vectores (matemática) para actualizar la posición de sus imágenes y luego dibuje con getX y getY. Debería iterar y actualizar este vector en alguna dirección a través de cierta velocidad.

Esos vectores no son nativos (Game API tiene).

Necesita tener un ciclo para iterar y actualizar la posición, luego vuelva a dibujar.

Para los juegos, no es una buena idea tener componentes tales como ImageViews para hacer animaciones. Necesitan que el sistema calcule todo el diseño una y otra vez con el tiempo.