Animación simple, pero hermosa y maravillosa de Gauthama Nair | Octubre de 2020

Tla animación debajo de la fab es la que me fascinó, es simple y cautivadora. Funciona como la punta de un instrumento y cuando se desplaza hacia abajo se encoge hasta convertirse en un fab normal (lo siento, el botón semicircular naranja que aparece en el medio de la pantalla, todavía averigua cómo ocultarlo al grabar un video)

En principio, se observa que existen dos transiciones

  1. A medida que bajamos, el botón se encoge
  2. Cuando subimos, el botón se expande de nuevo.

En cuanto a la animación, estamosmi Están abrumados por las posibilidades del sistema Android y siempre están confundidos acerca de dónde va, qué usar cuando se intenta resolver un problema específico con la animación.

Los sospechosos habituales están a continuación con un inserto eliminado cuando es útil para video de android dev summit 18

Distribución de movimiento: Diseño coordinado complejo mediante gestos

Física: Animación física / interrumpible mediante gestos

Transiciones: Omite el contenido de un elemento / ventana compartida

Dibujo vectorial animado: Animación de gráficos vectoriales

Mostrar animaciones: Animación de ventana

Mostrar el animador de propiedades: Ver propiedad

Animador de valor: Animaciones personalizadas en vistas

Animador de objetos: Animación general de propiedades

La animación anterior es un cambio en el ancho de la vista, básicamente agrandando (la forma de un círculo a un estadio) o disminuyendo (la forma de un estadio a un círculo)

De acuerdo con su descripción en una línea, vemos tres de los anteriores como interesantes, animador de propiedades de visualización, animador de valores y animador de objetos.

ViewPropertyAnimator Es útil para traducir, rotar, alfa y escalar problemas de animación, ejecutándolos junto con una sintaxis bastante sencilla. Debido a que nuestro problema no encajaba en ninguno de los anteriores, esta opción fue descartada.

ObjectAnimator más o menos funciona con el mismo conjunto de propiedades que el anterior, las propiedades que se pueden animar se enumeran aquí y por lo tanto desechado.

Nos hemos ido ValueAnimator y cambiar el ancho de la vista requiere una animación personalizada.

Muéstrame un código

val anim =
ValueAnimator.ofInt(view.measuredWidth, END_WIDTH)
anim.duration = 200
anim.addUpdateListener { animation ->
view.layoutParams.width = animation?.animatedValue as Int
view.setLayoutParams(view.layoutParams)
}
anim.start()

El código anterior hace esto, ejecutamos la animación desde el ancho de la vista actual (fab) hasta el ancho final (extendido / contraído) y cambiamos el layoutParams cambiando el ancho de acuerdo con el valor animado.

Nota

  1. En base a esto, mantenemos el valor y de desplazarse e iniciar la animación.
  2. Usamos un botón con un arrastre a la izquierda y suficiente espacio como un fab, de modo que cuando se descarga en un círculo, solo se muestra el ícono.

El código completo se puede encontrar aquí. aquí

Esto es que hemos logrado la animación anterior.

Avíseme en caso de preguntas / sugerencias / o si se necesita una explicación más detallada.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *