¡Hola a todos! Soy Howard Pinsky, promotor experto en XD de Adobe. Hoy echaremos un vistazo a la adición de animaciones de vídeo y Lottie para tus prototipos y, así, sacarles el máximo partido. Empecemos.
Estamos en Adobe XD con una plataforma de juegos que he estado diseñando. Para dar vida a esta experiencia, vamos a añadir algunas animaciones de vídeo y Lottie. En la pantalla Inicio, cuento con una gran imagen destacada en la parte superior, pero parece bastante estática. Añadir vídeos a un proyecto de XD es muy similar a las fotografías. Se pueden arrastrar directamente al lienzo o a una forma en blanco para enmascararse. Una vez añadido y seleccionado, verás opciones de reproducción de vídeo en el Inspector de propiedades. Aquí, no solo podrás controlar cuándo se reproduce el vídeo (en este caso, automáticamente al iniciar la previsualización), también podrás hacer clic en el icono de la izquierda para que se muestre un HUD con más controles, incluida la posibilidad de establecer una miniatura personalizada, borrar y previsualizar el vídeo, activar o desactivar el audio, recortar (lo veremos en un momento) y reproducir en bucle.
Ahora que hemos añadido un vídeo y hemos decidido cuándo se reproduce, al iniciar la previsualización podremos verlo en funcionamiento. Con solo esa adición, nuestro prototipo cobrará una nueva vida. Antes de que veamos la adición de animaciones de Lottie, cambiemos a otro estado de este componente destacado. Aquí tengo otro vídeo que se reproduce automáticamente. Pero, como puedes ver en la previsualización, el avión tarda unos segundos en entrar en el plano. Cuando echamos un vistazo rápido al HUD hace un momento, mencioné que había una manera de recortar tus vídeos. Si entras en este modo, podrás definir los puntos inicial y final arrastrando los controles. En este caso, quiero que la reproducción se inicie justo antes de que comience la acción. Cuando todo esté configurado, la marca de verificación aplicará esos cambios. Ten en cuenta que el recorte no es destructivo en absoluto, por lo que siempre podrás volver al HUD para ajustar o deshacer las ediciones.
Al volver al estado predeterminado, iniciaré la previsualización una vez más. Ahora, al hacer clic en el segundo estado, el vídeo se reproduce automáticamente desde el nuevo punto inicial. También he añadido un tercer vídeo. Si vuelvo al primero, hay una vista expandida que revela más información. Incluso notarás que los vídeos que se encuentran entre estados de Animación automática se reproducen continuamente sin interrupción.
Muy bien, echemos un vistazo a Lottie. En la pantalla Comunidad, he configurado un componente que se muestra al pasar el ratón por encima. Dentro de este, he preparado un boceto en un área adicional y me encantaría usarlo para crear un selector de emojis animados. Editemos el componente principal para que podamos añadir contenido. Pasando al grupo apilado, duplicaré rápidamente la capa existente varias veces y, a continuación, cambiaré a Finder, donde tengo animaciones adorables de Lottie de varios emojis creados por Anna Movin en ui8.net. Al igual que con los vídeos, los archivos de Lottie se pueden arrastrar directamente a una capa existente, al lienzo o enmascarados en formas para definir su tamaño. Cuando se seleccionan las capas, la reproducción se puede configurar a la derecha. Para todo esto, queremos que se reproduzcan automáticamente. Una cosa que cabe destacar aquí es que, a diferencia de los vídeos, el icono a la izquierda sirve estrictamente para controlar los bucles, que es lo que buscamos para estas interacciones. Perfecto.
Si volvemos al estado predeterminado de este componente, podremos previsualizar la pantalla Comunidad. Pasa el ratón por encima del mensaje y después pásalo sobre el icono del emoji para mostrar nuestras animaciones de Lottie y verlas en funcionamiento.
Antes de mostrarte el prototipo completo, veamos rápidamente el desencadenador Fin de reproducción, que puede ayudar mucho a automatizar algunas de tus interacciones de vídeo y archivos de Lottie. Antes, te mostré brevemente el estado expandido del componente destacado. Dentro de esta sección, existe un botón que dirige a un estado de descarga. Aquí, he incluido una animación de Lottie que comienza inmediatamente después de la transición. Pero puede que te preguntes lo siguiente: ¿qué sucede cuando se completa la animación?
Si cambias al modo Prototipo, verás que hay un desencadenador de tiempo adjunto, pero podemos añadir una segunda interacción haciendo clic en el botón del signo más azul. Esto nos permitirá seleccionar el desencadenador Fin de reproducción en el Inspector de propiedades, que le indicará a XD que realice la transición una vez finalizado el vídeo o la animación de Lottie. Para esta interacción, será suficiente una transición sencilla que conduzca al estado Reproducir. Este desencadenador también funciona en todas las mesas de trabajo. En el estado de carga del mismo componente, he añadido otra animación de Lottie. Además del desencadenador de tiempo, hay un desencadenador Fin de reproducción que lleva a la pantalla Juego. Por supuesto, esto no significa mucho sin verlo en funcionamiento. Volviendo al estado predeterminado, iniciaré la previsualización, ampliaré esta vista y, después, iniciaré la interacción Descargar. Gracias al desencadenador Fin de reproducción, el componente pasa automáticamente al estado Reproducir, en el que ahora puedo hacer clic para iniciar la animación de carga. Cuando esto termine, se producirá la transición a la mesa de trabajo.
Estos ejemplos son solo la punta del iceberg de lo que se puede hacer con vídeos y archivos de Lottie. Cubriré muchos casos de uso adicionales en futuros tutoriales. Pero antes de terminar, echemos un vistazo a la experiencia al completo. Disfrútala.