Pregunta Android: vistas personalizadas animadas


EDIT 2: nueva guía oficial de entrenamiento

El sitio de Desarrolladores lanzó una guía de capacitación para cosas relacionadas con la interfaz de usuario, este es el índice:

  • Descripción general de animaciones
  • Descripción general de la animación de la propiedad
  • Animar gráficos dibujables
  • Revelar u ocultar una vista usando animación
  • Mover una vista con animación
  • Mueva las vistas usando una animación fling
  • Agrandar una vista usando una animación de zoom
  • Anima el movimiento usando la física de primavera
  • Actualizaciones automáticas de diseño animado
  • Animar cambios de diseño usando una transición
  • Crear una animación de transición personalizada
  • Comience una actividad usando una animación

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


EDITAR: resumen de respuestas

Encontré 5 formas de animar en Android:

  1. Anima el propiedades de un View con Animación de la propiedad para cambiar suavemente rotation, alpha, scale etc.

  2. Animaciones de cuadros (AnimaciónDrawable): cambie las imágenes rápidamente, para que se vea animado

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

  4. Anular  onDraw() en un View y realizar Dibujo personalizado pintando en el lienzo.

  5. Utilizar Lottie, qué reproduce animaciones de After Effects. Muchas animaciones disponibles en LottieFiles.

Sin embargo, Android proporciona algunos herramientas incorporadas también, como Scenes (que le permiten animar la transición entre varios diseños que comparten el Views), Shared elements (que le permite hacer la ilusión de pasar un View de uno Activity a otro) etc.

Muchas (si no todas) de estas características se agregaron en API 21, haga clic aquí aquí para más información.

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

Por último, un par de herramientas interesantes:

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

  • Conversor de video a GIF en línea.


Nota

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

Ejemplos

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

1 - Animaciones de vista personalizada

Por ejemplo, llenando un vaso de agua o dibujando un camino.

2 - Animaciones de Vista Compleja

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

Pregunta

Para el primer ejemplo, no puedo pensar en otra manera que jugar GIF, o cambiar imágenes manualmente después de pequeños períodos de tiempo.

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

En cuanto al segundo ejemplo, solo se me ocurrió una idea, y eso es establecer un Path y moviendo el View en consecuencia pasándolo de alguna manera después animate(). (2) es posible?

Además de lo mencionado anteriormente, (3) ¿Conoces otras técnicas para jugar animaciones? (Como Scene transitions - mencionado en una respuesta-)

¡Por favor comparte! Gracias.


18
2018-03-13 12:25


origen


Respuestas:


La animación de "llenar un vaso de agua" es una invitación directa a implementar a través de la animación de cuadros, es decir, cambiar las imágenes una tras otra. aquí Puedes ver una buena publicación en el blog que describe cómo implementar este tipo de animación, que básicamente es lo mismo que "llenar un vaso de agua" que mencionaste:

enter image description here

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

enter image description here

Pero después de encender "Mostrar límites de diseño", 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 encontrar coordenadas de traducción. Después de eso, la animación es solo un par de líneas de código a través de animación de transición de escena.

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

El marco de Transitions hará el resto por ti. Encontrará el delta y realizará la animación por ti. aquí encontrarás un buen artículo de Lucas Rocha.


10
2018-03-15 20:12



¿Conoces otras técnicas para jugar animaciones?

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

  • Anima la vista (escala, alfa, rotar, etc.) simplemente usando view.startAnimation(...)
  • Anima el Drawable (Dependiendo del Drawable, esto podría ser cualquier cosa, desde dibujos animados vectoriales arrastrables hasta animaciones de cuadros)
  • Hacer dibujos y animaciones personalizados

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

Mencionaste lottie, que acaba de salir hace unos días. Veremos qué tan bien funciona, pero parece muy prometedor. Bajo el capó lottie analizará el json y hará un dibujo personalizado usando Canvas y Path (3er viñeta arriba)
Si puede tener en sus manos After Effects, esta es probablemente la solución "más fácil" para animaciones complejas (¡y multiplataforma!)

Las personas también comenzaron a compartir animaciones, puedes encontrarlas aquí:
http://www.lottiefiles.com/


¿sabes cómo se hace?

El (1) video parece que hacen un dibujo personalizado.

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

Esto implicará la creación de una vista personalizada y / o dibujable y anulable onDraw(Canvas)  Path.lineTo así como algo de arco, cúbicos o cuádruples harán el truco ... No soy ni diseñador ni especialista en vectores :)

No creo que esto pueda lograrse fácilmente mediante el uso de dibujos animados vectoriales dibujables, pero puede hacerlo mediante la aplicación de una animación de ruta morfológica. (También los vectores arrastrables 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 utilizando AnimatedVectorDrawables (como p. este blog muestra) y recortar los inicios / finales de la ruta o de nuevo haciendo un dibujo personalizado (y, por lo tanto, también admitiendo dispositivos preolímpicos) animando una ruta, p. utilizando PathMeasure.getSegment() para animar continuamente el camino.

La animación (3), como ya se señaló por respuesta azizbekians es el primer tipo mencionado, solo animando (moviendo y escalando) puntos de vista.


En cuanto al segundo ejemplo, solo se me ocurrió una idea, y eso es establecer un camino y mover la vista en consecuencia pasándola de alguna manera después de animate (). (2) ¿Es esto posible?

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


6
2018-03-15 23:49



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

Puedes encontrarlo aquí y un muy demostración 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 Android TimeInterpolator 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 según TimeInterpolator como una función del tiempo.

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


1
2018-03-31 13:14



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

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

Es posible que desee tener AsyncMethods / Runnables que actualiza continuamente las Propiedades en segundo plano, lo que da como resultado una animación Fotograma a fotograma, pero en realidad no se trata de Animación de Frames, porque solo está animando las propiedades de vista (girar a la izquierda) y no

Hay docenas de ejemplos por ahí, con poco google puedes DIY


-2
2018-03-15 18:34