java - the - animation transition android

Android: animadas vistas personalizadas

Question

EDIT 2: nueva guía de entrenamiento oficial

El sitio de Desarrolladores lanzó una guía de capacitación para temas relacionados con la IU, este es el índice:

• Resumen de animaciones
• Descripción de la animación de la propiedad
• Animar gráficos dibujables
• Revela u oculta una vista usando animación
• Mueve una vista con animación
• Mueve vistas usando una animación de tiros
• Ampliar una vista usando una animación de zoom
• Animar el movimiento utilizando la física de primavera.
• Actualizaciones automáticas de diseño animado
• Animar cambios de diseño utilizando una transición
• Crear una animación de transición personalizada
• Iniciar una actividad utilizando una animación.

Si está interesado en alguno de estos, este es el enlace: https://developer.android.com/training/animation/

EDIT: resumen de respuestas

Encontré 5 formas de animar en Android:

1. Animar las propiedades de una View con animación de propiedades para cambiar sin problemas la rotation , alpha , scale , etc.

2. Animaciones de cuadros ( AnimationDrawable ): cambia las imágenes rápidamente para que se vean animadas

3. Diseñe las imágenes con vectores ( VectorDrawable ) y VectorDrawable editándolas a lo largo del tiempo con AnimatedVectorDrawable .

4. onDraw() en una View y realice un dibujo personalizado pintando en el lienzo.

5. Usa Lottie , que reproduce animaciones de After Effects. Muchas animaciones disponibles en LottieFiles .

Sin embargo, Android también proporciona algunas herramientas integradas , como Scenes (que le permiten animar la transición entre varios diseños que comparten las Views ), Shared elements (que le permiten hacer una ilusión de pasar una View de una Activity a otra) etc.

Muchas (si no todas) de estas funciones se agregaron en API 21 , haga clic here para obtener más información.

Aquí hay algunos artículos / blogs interesantes sobre animación:

• Una subcategoría en un sitio web creado en Google llamado material.io : personalización creativa .

• Cómo diseñamos una hermosa animación : entrena animaciones con vectores animados.

• Cómo funcionan las transiciones de Android .

• Animando hasta el infinito : animación bluetooth con vectores.

• Animaciones de cuadros en Android : llenando un corazón por rotación de imágenes.

Por último, un par de herramientas interesantes:

• Herramienta de Mac para grabar la pantalla de Android en GitHub .

• Video al convertidor de GIF en online .

Nota

Soy consciente de que Android proporciona transformaciones tales como scale , alpha , rotate , translation , etc.

Ejemplos

Hay 2 ejemplos que me gustaría ver y comparar.

1 - Animaciones personalizadas

Por ejemplo, llenar un vaso de agua o dibujar un camino .

2 - Animaciones de vista compleja

Por ejemplo, la aplicación StackExchange para Android, animación de la pantalla de inicio de sesión (no se pudo encontrar un video en ella, tampoco se verificó si se comporta igual en iOS).

Pregunta

Para el primer ejemplo, no puedo pensar en otra manera que no sea la reproducción de archivos GIF, o el cambio manual de imágenes después de poco tiempo.

No creo que este sea el caso, por eso me gustaría preguntar, (1) ¿Sabes cómo se hace?

Respecto al segundo ejemplo, solo una idea vino a mi mente, y es establecer un Path y mover la View consecuencia, pasándolo de alguna manera después de animate() . (2) ¿Es esto posible?

Aparte de lo mencionado anteriormente, (3) ¿conoces otras técnicas para reproducir animaciones? (Como las Scene transitions - mencionadas en una respuesta -)

¡Por favor comparte! Gracias.

Answer 1

¿Conoces otras técnicas para jugar animaciones?

En Android tienes básicamente 3 formas de implementar animaciones:

• Animar la vista (escalar, alfa, rotar, etc.) simplemente usando view.startAnimation(...)
• Animar lo que se puede dibujar (dependiendo de lo que se pueda dibujar, esto podría ser cualquier cosa, desde dibujos vectoriales animados hasta AnimationDrawable )
• Realizando dibujo personalizado y animación.

Obviamente, solo animar una vista mediante métodos de marco es más fácil que crear una animación dibujable, y crear algo dibujable (xml) es más fácil que hacer un dibujo personalizado.

Mencionaste a Lottie, que acaba de salir hace unos días. Veremos qué tan bien lo hace, pero parece muy prometedor. Bajo el capó, Lottie analizará el json y realizará algunos dibujos personalizados con Canvas y Path (tercera viñeta arriba)
Si puede obtener After Effects, esta es probablemente la solución "más fácil" para animaciones complejas (¡y multiplataforma!)

La gente también comenzó a compartir animaciones, puedes encontrarlas aquí:
LottieFiles

sabes como se hace

El (1) video parece que hacen algunos dibujos personalizados.

• Dibuja y llena un Path para el agua, anima la parte superior con algunas olas mientras se anima y espolvorea con algunos puntos blancos.
• Dibuja la forma del vaso a su alrededor.

Esto implicará crear una vista personalizada y / o onDraw(Canvas) y anular onDraw(Canvas) Path.lineTo , así como algunos arcos, cúbicos o quads que funcionarán ... No soy un diseñador ni un especialista en vectores :)

No creo que esto pueda lograrse fácilmente mediante el uso de AnimatedVectorDrawable , pero puede hacerlo mediante la aplicación de una animación de morph de ruta. (También los dibujos vectoriales animados solo son compatibles con 21+ si no me equivoco)

El (2) Video simplemente anima un Camino y mueve una bandera. Esto se puede lograr usando AnimatedVectorDrawables (como muestra este blog, por ejemplo) y recortando los inicios / finales de la ruta o nuevamente haciendo dibujos personalizados (y por lo tanto, también soportando dispositivos de pre lolipop) animando una Ruta, por ejemplo, usando PathMeasure.getSegment() para continuar continuamente. animar el camino.

La (3) animación, como ya señaló la respuesta de los azizbekos, es la primera clase mencionada, simplemente animando (moviendo y escalando) vistas.

Con respecto al segundo ejemplo, solo se me ocurrió una idea, y es establecer un Camino y mover la Vista en consecuencia, pasándolo de alguna manera después de animate (). (2) ¿Es esto posible?

Mover las vistas a lo largo de un camino es obviamente posible, pero luego la vista se movería, y aún tendría que encontrar una forma de dibujar el camino que lo sigue, como se explicó anteriormente.

Answer 2

La animación de "llenar un vaso de agua" es una propuesta directa a través de la animación de cuadros, es decir, cambiar las imágenes una tras otra. Aquí puede ver una bonita publicación de blog que describe cómo implementar este tipo de animación, que básicamente es lo mismo que "llenar un vaso de agua" que mencionó:

La otra animación parece un poco difícil a primera vista.

Pero después de activar "Mostrar límites de diseño" se puede ver que no hay magia allí. Básicamente, esto es solo una animación de traducción, que traduce una vista de una posición a otra. En el caso de esta animación, la parte difícil es implementar el algoritmo de búsqueda de coordenadas de traducción. Después de que la animación sea solo un par de líneas de código a través de la Scenes .

// assuming at this step all the views are at the initial position at x0, y0
TransitionManager.beginDelayedTransition(rootLayout);
// here set view coordinates to x1, y1 - the final position

Transitions Framework hará el resto por ti. Encontrará el delta y realizará la animación por ti. Aquí encontrarás un bonito artículo de Lucas Rocha .

Answer 3

Me gustaría sugerir una biblioteca que he escrito hace un tiempo (publicada recientemente), que le permite crear vistas personalizadas y agregarles animaciones.

Puedes encontrarlo here y una demo muy simple aquí . Si bien mis demostraciones francamente no son tan impresionantes, demuestran el poder de la biblioteca y, lo que es más importante, cómo usarla.

Funciona con el TimeInterpolator de Android y cualquiera de sus hijos (así como los personalizados).

Las animaciones se dibujan completamente utilizando Canvas, la única diferencia aquí es que puede obtener un valor animado, que cambia de acuerdo con el TimeInterpolator en función del tiempo.

Puede agregar tantas animaciones como desee a su Vista, controlarlas de forma independiente. Y además, no está limitado a dibujar cosas que no sean de animación. Hay un método dedicado para eso (onDrawStatics).

Answer 4

Para su vista personalizada, le sugiero que identifique las propiedades en las que desea animar.

Digamos un ClockView, You Después de configurar la pintura, el trazo, etc. en OnDraw()

Es posible que desee tener AsyncMethods / Runnables que actualiza las Propiedades continuamente en segundo plano, lo que da como resultado una animación fotograma a fotograma, pero en realidad no es Fraame Animation, porque está animando solo las propiedades de la vista (gire a la izquierda) y no el marco tentativo.

Hay docenas de ejemplos por ahí, con poco googlear puedes hacerlo tú mismo.