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

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

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

La aplicación es una simulación física, y hasta ahora esto ha funcionado muy bien. Pero ahora me gustaría mejorar la animación mediante la transformación entre imágenes para los sprites cuando ocurren ciertos eventos.

Por ejemplo, cuando ocurre una colisión, me gustaría hacer una animación de una explosión. Mi idea era reemplazar el mapa de bits de sprite habitual con el de un PNG de explosión, y utilizar Android "animación de tween" para hacer que la explosión crezca más.

Sin embargo, el ejemplo de animación de interpolación de Android supone que tiene un ImageView definido de forma estática en su configuración XML.

¿Hay una manera de animar un mapa de bits como dibujado en onDraw() utilizando la animación de tween? ¿O necesito convertir mis sprites para usar algún tipo de ImageView ? Si este último, ¿me puede señalar un ejemplo de animación de sprite adecuada en Android?

Gracias

Construí un Tween Engine genérico en java que puedes usar para animar cualquier cosa, incluyendo tus sprites. Está optimizado para Android y juegos porque no asigna nada en tiempo de ejecución, para evitar la recolección de basura. Por otra parte, Tweens se agrupan, así que realmente: ¡ninguna colección de basura en absoluto!

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

Todo lo que tienes que hacer es implementar la interfaz TweenAccessor para agregar soporte Tween a todos tus sprites. Ni siquiera tiene que cambiar su clase Sprite, simplemente cree una clase SpriteTweenAccessor que implemente TweenAccessor<Sprite> , y regístrela en el motor en la inicialización. Solo echa un vistazo a la página wiki de GetStarted 😉

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

logo

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

El motor completo está muy documentado (todos los métodos públicos y las clases tienen javadoc detallado), y la sintaxis es bastante similar al TweenMax / TweenLite de Greensock que se utiliza en el mundo de Flash. Tenga en cuenta que soporta 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, no tween motor estaría completo sin proporcionar una manera de construir poderosas secuencias 🙂

 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és convencido 🙂 Hay un montón de gente ya está usando el motor en sus juegos o para la animación de la interfaz de usuario de Android.

Puede hacer la animación de interpolación sin el ImageView procedente de un archivo xml, pero sí tiene que ser una vista en la jerarquía de su vista.

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

Superponer un ImageView en la parte superior de su vista personalizada y animar que utiliza animaciones de interpolación.
Utilice rutinas de dibujo de Canvas para animar su explosión.

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

Podrías dibujar y animar tu explosión en Adobe Flash, exportar las imágenes de sprite usando swfSheet o similar y luego usar la animación de Frame

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

Esos Vectores no son nativos (API de juego tiene).

Usted necesita tener un bucle para iterar y actualizar la posición, luego volver a dibujar.

Para los juegos, no es una buena idea tener componentes tales ImageViews para hacer animaciones. Necesitan el sistema para calc toda la disposición una y otra vez con el tiempo.