Android Dev Stories – VocUp #1 – Showing flashcard details (circular reveal animation android)

hola amigos y bienvenidos a las historias de VocUp en este video les mostraré cómo implementar una animación de revelación de contenido
similar a la que usé en la aplicación VocUp para mostrar detalles de palabras en la pantalla de aprendizaje
primero debo mencionar que solo funcionará en la API 21 y superior, por lo que para los usuarios con
versiones anteriores de Android, puede mostrar contenido sin animación o implementar alguna otra
animación de su elección, así que comencemos, supongamos que tiene un diseño con detalles y
una vista superpuesta, no es necesario tener exactamente lo mismo diseño como el mío, solo
uso dos vistas de texto aquí para simplificar, necesita organizar su uso de tal manera que
pueda ocultar su superposición haciendo que su vista de detalles sea visible, es importante porque debido a la
API de animación que tenemos, en realidad mostraremos la vista de detalles por expandir un círculo en lugar de ocultar la
superposición; en otras palabras, su vista de detalles debe ubicarse sobre su vista de superposición, pero
no al revés.

evalúe esto ordenando vistas en su diseño como lo hice en
este ejemplo o usando una propiedad de elevación que también requiere api 21 y un
detalle importante aquí es hacer que nuestra vista de detalles sea invisible en lugar de desaparecer, hablaremos de eso más adelante en
este video, así que solo vigile esta propiedad ahora echemos un vistazo al código primero
necesita encontrar sus vistas usando el enlace de vista findViewById   o cualquier otro método que desee, luego
necesitamos configurar el oyente táctil en la vista superpuesta tenga en cuenta que no podemos simplemente usar set on click listener
porque necesitamos información sobre la posición táctil OnTouchListener recibe esta información en el
parámetro MotionEvent, por lo que podremos usarla más tarde para configurar nuestra animación, así que
cómo hacer una animación de revelación circular en Android afortunadamente tenemos Clase ViewAnimationUtils
con el método llamado createCircularReveal si observamos la firma de este método
veremos que devuelve un Animator La clase Animator es parte de un El marco de animación de propiedades de Android
es un tema amplio, pero por ahora todo lo que tenemos que saber es que podemos iniciar un animador llamando a la
función de inicio en él.

El método crea una revelación circular. Tiene la siguiente vista de parámetros para animar las
posiciones X e Y del centro del círculo en píxeles relativos. para ver dónde (0, 0) es el
radio del círculo inicial y final de la esquina superior izquierda en píxeles, por lo que puede, por ejemplo, comenzar con 0 para
mostrar una vista o terminar con 0 para ocultar la vista, ok, integremos esta función en nuestro
proyecto, obviamente, pasamos nuestra vista de detalles como primer parámetro, luego podemos usar la propiedad del evento x e
y como centro de nuestro círculo de animación estas coordenadas son relativas
a la vista que estamos tocando aquí puede preguntar pero espere qué evento de movimiento estamos
escuchando aquí porque hay varios tipos de eventos de movimiento como abajo, mover hacia arriba y cancelar bien, el
primer evento de movimiento en cualquier gesto es ACTION_DOWN y al devolver falso al final de esta
función le decimos al sistema de entrada que no estamos interesados ​​en los eventos subsiguientes, los gestos táctiles son
un tema muy amplio, así que solo reaccionemos en el primer toque en lugar de hacer clic para mantenerlo corto  el
próximo radio de inicio es 0 porque estamos mostrando la vista pero ¿qué pasa con el radio final en realidad en nuestro caso  el
radio final será diferente para cada toque, entonces, ¿cómo podemos encontrarlo? un enfoque aquí es usar un
número muy grande para asegurarse de que cubrirá todas las vistas, pero para tener un evento de "fin de animación" más preciso,
que probablemente necesitará en un proyecto real, le sugiero que calcule el
radio máximo posible de un círculo de animación se requerirá el radio máximo cuando hagamos clic
directamente en cualquier esquina de una vista superpuesta y el radio máximo en ese caso será igual a la diagonal de la vista
o la hipotenusa de un triángulo con los lados del ancho de la vista y la altura de la vista.

Puede calcular la
hipotenusa usando kotlin función hypot o java Math.hypot y, por supuesto, no olvide mostrar su
vista antes de iniciar una animación y, si recuerda que antes le dije que tenemos que usar
invisible pero no se ha ido como una visibilidad de vista inicial esto se debe a que cualquier vista con la
visibilidad perdida no se medirá hasta que se vuelva visible o invisible para mejorar el rendimiento del diseño, lo
que significa que la vista tendrá cero ancho y alto, lo que a su vez conducirá a cero rad final ius e incluso
después de establecer la visibilidad en visible o invisible no se medirá de inmediato, sino solo
solicitará la medición en el siguiente paso de medición este comportamiento se relaciona con la forma en que Android dibuja las vistas
este es otro gran tema, pero por ahora solo medimos nuestra vista detallada en avance
haciéndolo invisible de forma predeterminada ahora tenemos un animador, por lo que podemos establecer la duración,
por ejemplo, en un segundo e iniciarlo cuando podamos ver que funciona como se esperaba.

para ignorar la advertencia de accesibilidad
esta advertencia aparece cuando usa el oyente configurado al tocar porque en este caso
necesitará  pensar manualmente en ver la accesibilidad cuando el usuario interactúa con su aplicación usando
por ejemplo, el servicio TalkBack. Es una historia completamente  diferente, pero preste atención a ella.
cuando esté a punto de publicar su aplicación en el mercado, eso es todo por este video, gracias por mirar,
siéntase libre de hacerme cualquier pregunta. ciones en los comentarios y también puedes sugerir qué función de
VocUp debería mostrarte la próxima vez, hasta pronto, ¡adiós!.

As found on YouTube

Deja un comentario

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