Animaciones interactivas en Rive: guía de la máquina de estado para principiantes | Yaya Gadon | Skillshare

Velocidad de reproducción


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Animaciones interactivas en Rive: guía de la máquina de estado para principiantes

teacher avatar Yaya Gadon, Motion Designer

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      INTRODUCCIÓN

      1:23

    • 2.

      Qué es la interfaz de Rive

      3:08

    • 3.

      Introducción a la máquina de estado

      1:09

    • 4.

      Organizar la jerarquía

      4:24

    • 5.

      Configuración de estados con líneas de tiempo

      6:27

    • 6.

      Sumérgete más profundamente: transiciones y oyentes

      10:53

    • 7.

      Proyecto de clase interactiva

      3:36

    • 8.

      Comparte tu trabajo

      2:37

    • 9.

      Reflexiones finales y próximos pasos

      1:20

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

269

Estudiantes

19

Proyectos

Acerca de esta clase

Descripción de la clase: 

¿Alguna vez quisiste crear animaciones que reaccionaran a los clics, los toques o los pasos? En esta clase para principiantes, te mostraré cómo usar la máquina de estado de Rive para agregar interactividad a tus diseños, ¡sin necesidad de programar!

Comenzaremos con lo básico: aprenderemos a navegar por la interfaz de Rive y a preparar un diseño para la animación. Luego, nos sumergiremos en la máquina del estado, donde descubrirás cómo hacer que las animaciones cambien según la información introducida por el usuario. Al final de la clase, habrás construido tu propia animación interactiva y adquirido las habilidades para dar vida a tus diseños.

Esta clase es perfecta para animadores, diseñadores de movimiento, diseñadores de UI/UX o cualquier persona que tenga curiosidad por la animación interactiva. No necesitas experiencia previa con Rive, ¡solo pasión por la creatividad!

Lo que aprenderás:

• Cómo navegar por Rive y configurar tu primer proyecto
• Los conceptos básicos de la animación en Rive
• Cómo funciona la máquina de estado y por qué es tan poderosa
• Cómo crear animaciones que respondan a las interacciones de los usuarios
• Cómo exportar y compartir tus proyectos

Por qué deberías participar en esta clase:

Las animaciones interactivas son esenciales para crear experiencias de usuario atractivas en sitios web, aplicaciones y juegos. Al aprender State Machine de Rive, podrás diseñar animaciones que no solo sean visualmente atractivas, sino también responsivas e interactivas, lo que hará que tu trabajo se destaque en el panorama del diseño digital.

Crea una cuenta en Rive: rive.app/login/

Lo que necesitas:

• Una computadora con Rive instalado (gratuita en rive.app)
• Conexión a Internet
• Archivos de diseño prediseñados (se proporcionan en los recursos de la clase)

¡Comencemos!

Acompáñame en esta clase divertida y práctica, ¡y creemos algo increíble juntos!

Conoce a tu profesor(a)

Teacher Profile Image

Yaya Gadon

Motion Designer

Profesor(a)

Hello friends!

My name is Yaya and I'm a motion designer living in London with my partner and our little cute dog named Woohoo.

I love going for walks in nature, cooking delicious foods, playing music, dance, and party with friends in the weekends.

Obsessed with motion, armed with animation tools, and inspired by the real world - I enjoy injecting life, playfulness and energy into designs, characters, and brands as a whole.

Excited to create content and share my knowledge here on Skillshare:))

Ver perfil completo

Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. INTRODUCCIÓN: Bienvenidos, a todos, y gracias por acompañarme. Mi nombre es Yaya Y en esta clase, vamos a centrarnos en la máquina de estado RIV y crear animaciones interactivas RIV convierte las imágenes estáticas animaciones interactivas con las que la gente realmente quiere meterse y hacer clic en ellas Es un cambio de juego total para la web, las aplicaciones y los juegos. Si eres animador, diseñador de movimiento, diseñador de productos, buscas agregar interactividad a tu trabajo, estás en el lugar correcto Un poco sobre mí, soy un diseñador de movimiento independiente con más de diez años de experiencia trabajando con clientes de todo el mundo. La mayor parte de ese tiempo, he estado usando herramientas tradicionales como after effects y Cinema 40. Pero cuando descubrí Drive, honestamente se sintió como enamorarse del diseño de movimiento de nuevo. Es una herramienta muy divertida y emocionante. Desde entonces, he pasado mucho tiempo aprendiendo los entrometidos de RV, y estoy súper emocionada compartir lo que he aprendido contigo. Creé esta tela para hacer esa curva de aprendizaje un poco menos intimidante y más divertida Una vez que hace clic, es una herramienta poderosa para tener en tu conversación. Correcto, comencemos. Primero, asegúrese de tener RV instalado y configurar una cuenta. Puedes encontrar el enlace en la descripción del curso. 2. Cómo entender la interfaz de Rive: Ahora que ya estamos todos preparados, hagamos un recorrido por la interfaz de Re. Sólo un avisado. Los RV se actualizan con bastante frecuencia. Así que las cosas pueden verse diferentes en tu pantalla, pero no te preocupes. Las características y herramientas siguen ahí, solo que tal vez en un lugar ligeramente diferente. Familiarizarte con la interfaz hará que tu flujo de trabajo en RIV sea mucho más eficiente Tómese un tiempo para explorar cada sección, y una vez que esté listo, nos sumergiremos animación usando la máquina de carne Aquí en la sección home, puedes ver tus archivos recientes, enlaces a algunos tutoriales útiles y ejemplos de la comunidad donde puedes explorar proyectos de otros artistas la comunidad y ver qué están haciendo las personas. Aquí, puedes buscar tus archivos por nombre, y aquí abajo, tienes tus archivos personales. Si quieres, puedes organizar tus archivos en proyectos como lo hice aquí para esta clase de Skillshare Puede hacer clic derecho para crear una nueva carpeta o un nuevo archivo o hacer clic en los iconos de la parte superior derecha. En la parte superior, tenemos la barra de herramientas. Aquí, podemos personalizar nuestro archivo, exportar y crear enlaces para compartir, crear mesas de trabajo, diseños y grupos, diseñar herramientas como lápiz y formas, límites, texto y eventos Panel de jerarquía y activos. En el lado izquierdo, está el panel jerárquico. Esto muestra todos los objetos, activos, controles y animaciones en su archivo, mostrando sus relaciones padre hijo y orden de renderizado. La pestaña de activos es donde podemos ver todos los activos que viven en este proyecto específico y donde podemos importar activos como imágenes, ladifils y archivos de audio A la derecha, tenemos al inspector. Este panel permite ajustar las propiedades del objeto seleccionado, actualizándose dinámicamente en función su selección y modo actual. La zona central es el escenario, un lienzo infinito donde puedes colocar mesas de trabajo que contienen todos tus gráficos Hasta el momento, estuvimos en el modo de diseño. Pero si hacemos clic aquí, vamos al modo de animación. Aquí es donde configuramos nuestras máquinas y cronogramas estatales. Aquí, en la línea de tiempo, puede crear animaciones, acceder a los controles de reproducción y establecer fotogramas clave para sus objetos En el modo máquina de estados, la línea de tiempo es reemplazada por la gráfica de la máquina de estado, lo que le permite conectar visualmente animaciones y definir la lógica de transiciones. 3. Introducción a la máquina de estado: Bien, hablemos de la máquina estatal. Es lo que hace que las animaciones respondan a las acciones del usuario. Piense en ello como un conjunto de reglas que le dicen a rima cuándo y cómo hacer la transición entre estados He aquí un ejemplo. un estado donde el interruptor está a la izquierda, luego otro donde el interruptor está a la derecha y cambió de color. En la máquina de estados, podemos usar entradas y oyentes para configurar interacciones y usar transiciones para crear el flujo entre estados Entonces cuando jugamos, podemos probar nuestras interacciones aquí. Ahora vamos a recrear juntos esta animación interactiva Descarga el archivo de recursos, arrastra el archivo dot rev a RIV, luego sigue mis pasos 4. Organiza la jerarquía: Con RIV, es crucial organizar tus capas y jerarquía antes de pasar al modo animado. Si comienzas a agregar fotogramas clave y luego vuelves al modo de diseño y cambias las cosas, tus animaciones podrían romperse y obtendrás resultados no deseados Así que permanezcamos en modo de diseño y organicemos las cosas rápidamente. Si necesitas trabajar con archivos SVG, puedes ir al panel de Activos, hacer clic en el botón Más debajo de Imágenes, seleccionar tu archivo SVG y hacer clic en Subir. Puedo arrastrarlo al escenario o hacer clic derecho en Generar mesa En la jerarquía, podemos ver nuestro diseño, y bajo este grupo, puedo ver todos mis objetos. Antes de hacer otra cosa, debemos organizar la jerarquía en grupos y renombrar todas las capas. Eso nos hará la vida mucho más fácil cuando animemos más tarde Usaré el icono Ocultar mostrar para ayudar a identificar qué capa estoy editando. Iré de abajo hacia arriba. Esta es la capa de fondo, y en realidad me gusta simplemente eliminarla porque Rave ya agregó color de relleno a la mesa Entonces voy a cambiar eso a blanco, pero solo debes saber que puedes quitarlo por completo si quieres tener una tabla transparente. Me gustaría señalar aquí los íconos de la izquierda. Esta nos está diciendo que se trata una capa de forma personalizada con una ruta personalizada, mientras que los iconos de rectángulo y elipse nos dicen que se trata formas de procedimiento que tienen algunos parámetros adicionales como redondeo de esquina y origen Siempre se puede convertir a una ruta personalizada haciendo clic en Intro, pero tenga en cuenta que no puede volver a convertirla en una forma de procedimiento Ahora, quiero darte una regla dura y quiero que jures por ella. Siempre, siempre, siempre agrupa tus objetos. Siempre, confía en mí. Esto te ahorraría mucho dolor más adelante y te dará mucha flexibilidad a la hora de animar Genial. Agrupemos y renombremos todo. El punto verde es sólo para referencia, así que lo agruparé y lo moveré hacia arriba más tarde, sólo voy a eliminarlo. La Una cosa más que quiero que siempre hagas es crear un grupo raíz. Siempre. Este grupo no estará animado, pero te permitirá reposicionar y escalar toda la animación sin que nada se rompa Y quiero a este grupo justo en el centro de la mesa de Ahora tengo este grupo principal con el punto de anclaje en la esquina superior izquierda. Entonces primero, simplemente desagruparé esto usando el atajo Shift Command G. Entonces la mejor manera de crear un grupo raíz justo en el centro es crear una capa de grupo vacía Puedes usar el atajo G y hacer clic en cualquier lugar de la mesa de trabajo Luego alinea al centro usando la herramienta de alineación y arrastra todas las demás capas dentro de ella. Voy a cambiar el nombre de este grupo. Entonces me gustaría crear un grupo más si acaso, y ya está. Tenemos la jerarquía organizada, y estamos listos para saltar al modo animado 5. Configuración de estados con líneas de tiempo: Bien, abróchese el cinturón. Estamos cambiando al modo animado y configurando líneas de tiempo y la Ahora, voy a estar introduciendo algunos conceptos nuevos aquí, así que no te preocupes si las cosas no dan click de inmediato. Mi recomendación mira esta lección todo el camino una vez solo para tener la idea de cómo funciona todo y realmente tomarla. Luego regresa, reenrolla, pausa cuando lo necesites y sigue a tu propia velocidad Tienes esto. Cambia al modo de animación Por defecto, tenemos una máquina de estado y una línea de tiempo. Mi plan es crear dos líneas de tiempo, una para cada estado, una para el estado on y otra para el estado fuera Después vaya al gráfico de la máquina de estado y conéctelos con transiciones para crear la animación. Me dirijo a la primera línea de tiempo y le renombraré el estado uno. Entonces es claro que esta línea de tiempo representa uno de nuestros estados de animación. Puedo hacer clic derecho y duplicarlo, luego renombrarlo estado dos. Ahora tenemos que decirle a Rive qué propiedades queremos animar En este caso, sé que quiero que el punto se mueva a lo largo del eje X. Para ello, voy a añadir un fotograma clave. Haré clic en el icono del pequeño diamante junto al valor de la posición. Una vez que se vuelve azul, eso significa que se ha agregado un fotograma clave También lo verás aparecer en la línea de tiempo a continuación. Si explico la capa, puedo ver exactamente lo que se está animando. Es la posición de la capa de puntos, eje X y su valor actual. Ahora hagamos lo mismo en el estado dos. Pero esta vez, en lugar de hacer clic en el diamante, simplemente arrastraré la flecha del eje X hacia la derecha. RIV agrega automáticamente un fotograma clave cuando ajusta cualquier cosa que tenga un diamante al lado Voy a escribir -63.5 para la posición, ya que ese es el valor duplicado opuesto del Para probarlo, saltemos de un lado a otro entre el estado uno y el estado dos. Sí, se ve bien. El cambio de posición funciona perfectamente. Ahora, hagamos lo mismo con los colores. Haga clic en la capa de puntos sobre en el inspector, verá los colores utilizados en ese grupo. Podemos agregar fotogramas clave a cada uno de ellos tal como hicimos con position Ahora cambia al estado dos y esta vez, selecciona tanto la capa de puntos como la capa de referencia. De esa manera, podemos tomar los valores de color de ambas capas a la vez. En el inspector, bajo los colores seleccionados, basta con copiar y pegar los valores hexagonales. Si te golpeo en la línea de tiempo, puedo revelar rápidamente todas las propiedades con fotogramas clave, y verás que los tonos amarillos actualizados ahora se muestran en el estado dos Alternemos entre los dos estados. Genial. La transición de color está funcionando. Ya estamos listos para conectar esto en la máquina del estado. Por defecto, RIV nos da una máquina de estado con una línea de tiempo ya conectada Si hago clic en Reproducir, verás que esta línea de tiempo solo se reproduce una vez, nada elegante todavía. Ahora, arrastremos en el estado dos y conectemos al Estado uno. Eso crea una transición entre los dos estados. Pero si lo jugamos ahora, notarás que inmediatamente salta sobre el estado uno y salta directo al estado dos Eso está pasando porque no le hemos dicho Rive cuándo hacer esa transición Entonces ahora necesitamos establecer una condición para controlar cuándo ocurre la transición. Antes de que podamos agregar condiciones a nuestras transiciones, necesitamos configurar algunas entradas. Encontrará el panel de entradas justo aquí. RIV nos da tres tipos de entradas. Número, booleano y disparador. Empecemos con el gatillo. Cuando haga clic para agregar uno, verá que funciona como una entrada de un solo disparo. Perfecto para cosas como un clic, donde solo quieres que algo suceda una vez y luego reiniciar. Ahora podemos regresar a la transición, y en el inspector, podemos agregar nuestro gatillo como condición. Entonces aquí está la lógica ahora. Entramos aquí a la máquina estatal. Juega el estado uno, luego espera a que se dispare el gatillo antes de pasar al estado dos. Vamos a probarlo. Presiona play, haz clic en el gatillo y funciona. Pero si vuelvo a hacer clic en el gatillo, no pasa nada. Y eso es porque no hemos establecido una transición que vuelva del estado dos al estado uno. Para solucionarlo, vamos a crear una transición que vuelva del estado dos al estado uno. Una vez que los conectes, verás una pequeña flecha apuntando hacia atrás para indicar uno. Ahora solo agrega el mismo disparador que la condición para esta nueva transición. Y lo hicimos. Ahora, cada vez que hacemos clic, la máquina de estado seguirá alternando de un lado a otro entre los dos estados 6. Sumérgete más profundamente: transiciones y oyentes: Ahora que tenemos las transiciones básicas entre estados, vamos a llevarlo a un nivel superior. Hagamos nuestras transiciones un poco más interesantes. este momento, el cambio del estado uno al estado dos ocurre instantáneamente. No hay sentido de movimiento. Cuando seleccionemos la transición, notarás que tenemos algunos parámetros con los que podemos jugar. Empecemos por la duración. Actualmente está configurado en cero milisegundos. Entonces cambiemos eso a 500 milisegundos. Ahora cuando jugamos la animación y disparamos el gatillo, obtenemos movimiento real. El punto se desliza de izquierda a derecha a lo largo del eje X durante medio segundo. A continuación, podemos afinar la sensación de la transición ajustando la interpolación usando esta gráfica de aquí abajo Esta gráfica representa la duración completa de 0-500 milisegundos, y la curva muestra cómo la transición se mueve del estado uno al estado dos durante ese este momento, la curva es perfectamente lineal, razón por la cual el movimiento se siente un poco rígido o robótico. Pero si elegimos aquí esta opción cúbica, obtenemos esta hermosa línea curva ahora el movimiento se facilita, pasa lineal por el medio y vuelve a salir al final Este tipo de animación se llama flexibilización. Observe lo mucho más suave que se siente ahora. Es más natural porque en el mundo real, los objetos tienen peso y masa. No arrancan y se detienen al instante. Toman un momento para acelerar y otro momento para reducir la velocidad. También puede afinar la curva ajustando los mangos. Por ejemplo, podemos crear una facilidad más larga. Entonces la animación comienza rápidamente, luego se ralentiza gradualmente. ¿Ves como eso cambia la sensación? Realmente te animo a jugar con la gráfica, probar diferentes formas de curva y ver qué tipo de movimiento puedes crear. Dependiendo de tu proyecto, es posible que quieras algo rápido, suave o más dramático Por ahora, sigamos con la opción cúbica. Es un defecto sólido que funciona muy bien en la mayoría de los casos. Oh, en un consejo rápido, también puedes copiar y pegar tu curva de flexibilización de disfraces si quieres reutilizarla en otras transiciones Ahora, hablemos de una parte realmente importante de trabajar con RIV, agregando interactividad Hasta este punto, hemos estado activando la animación manualmente haciendo clic en la entrada Pero eso es solo para probar. Lo que realmente queremos es que el usuario interactúe directamente con el botón de la mesa de trabajo Entonces, ¿cómo hacemos que eso suceda? Ahí es donde entran los oyentes. Vamos a abrir el panel de oyentes y hacer clic en el icono más para crear uno nuevo Verás que el inspector ahora nos da un campo objetivo. Haga clic en eso y RIV le solicitará seleccionar un elemento en el Lienzo En este caso, queremos que los botones de cara sean el objetivo interactivo. También puede seleccionarlo en la jerarquía. Ahora que nos hemos fijado el objetivo, el inspector se pregunta, ¿ qué acción queremos escuchar? Aquí hay algunas opciones, pero para nuestro botón, vamos a elegir click. Así que ahora, cada vez que el usuario hace clic en el botón, queremos disparar gatillo una entrada. Bien, rápido recapitulación de lo que hemos hecho. Creamos un oyente, establecimos un objetivo, elegimos la interacción y la vinculamos a una entrada que controla la animación Vamos a probarlo. Pulsa play, pasa por la cara del botón y haz clic. Bonito. Funciona. Y si hacemos clic en cualquier otro lugar, no pasa nada. Eso es porque la interacción sólo está ligada al objetivo del oyente En nuestro caso, la cara del botón. Voy a seguir adelante y cambiar el nombre de este oyente a Face Click solo para mantener las cosas organizadas Ahora creo que estamos listos para agregar otra capa de interacción, un efecto hover Esto será similar a lo que acabamos de hacer con un clic, así que lo atravesaremos un poco más rápido. Empezaremos por crear dos nuevas líneas de tiempo para definir los estados de flotación Coloca el cursor sobre y desactiva el cursor. Arrastre la máquina del Estado a la parte superior solo para mantener las cosas ordenadas. Empecemos por poner el cursor sobre. Cuando el usuario pasa el cursor sobre el botón, quiero que la cara se vea un poco más brillante Entonces seleccionaré la capa de la cara y toparé el brillo en los ajustes de color hasta el 100%. Recuerda, Rive necesita ver fotogramas clave en ambos estados. Así que asegúrate de agregar fotogramas clave al color de la capa facial en cada línea de tiempo Vamos a darle una prueba rápida. Coloca el cursor sobre, desactiva el cursor sobre apagado. Perfecto. Ahora tenemos dos estados de trabajo para la interacción hover Ahora, tal vez se esté preguntando, ¿cómo combinamos esto con la animación de clic existente? Para eso, necesitaremos agregar una nueva capa a nuestra máquina de estado. Ahora mismo, todo está funcionando en la capa uno. Entonces voy a cambiarle el nombre a algo así como hacer click on off para mantener las cosas organizadas. Lo bueno de la máquina RV State es que te permite apilar múltiples capas de interacciones una encima de la otra. Entonces, sigamos adelante y agreguemos una nueva capa solo para la interacción de desplazamiento Ahora vamos a arrastrar las dos líneas de tiempo de desplazamiento en la gráfica y conectarlas con transiciones. Queremos que la animación comience en hover off, luego haga la transición para pasar el cursor cuando el usuario y vuelva a flotar cuando aleja el cursor Entonces aquí está la lógica. Cuando el cursor entra en el botón, hacemos la transición para pasar el cursor sobre, y cuando el cursor sale, hacemos la transición de nuevo para pasar el cursor fuera Para controlar esta interacción, necesitaremos agregar una nueva entrada. Y para hover, un bullying es la elección perfecta. Es simple. Puede ser verdadero o falso. Funciona muy bien para algo como on off states. Ahora podemos usar ese bulliano como condición. Para la transición de hover off a hover on, configúrelo para que vaya cuando el bullian Y para la transición de regreso, ponlo para que se vaya cuando el lingote sea falso Vamos a darle una prueba rápida. Haga clic para establecer al matón en verdad, obtenemos Hover on. Haz clic de nuevo para configurarlo para forzar, y estamos de vuelta en Hover off. Bonito. Eso está funcionando como se esperaba. Ahora agreguemos un poco de pulido, tal como hicimos con la interacción de clic. Voy a establecer la duración de 150 milisegundos y aplicar interpolación cúbica para un movimiento más suave y natural Vamos a reproducirlo. Sí, eso se siente bien. El paso final es hacer que esta interacción hover funcione en la mesa de trabajo Para eso, necesitaremos dos oyentes. Uno para detectar cuando el cursor entra en el botón, y otro para cuando sale. Los nombraré hover Enter y hover exit, solo para mantener las cosas claras Bien, pongamos a los dos oyentes. Para el primero, establece el objetivo a cara, elige el puntero Enter y establece la entrada de lingotes en true Entonces, para el segundo oyente, usa el mismo objetivo, pero esta vez, elige la salida del puntero y establece al matón para forzar. Solo para recapitular lo que hemos hecho, estamos escuchando cuando el cursor entra en el botón, eso pone al matón en true, activando el estado de hover Y cuando el cursor sale, el bullying cambia a falso, llevándonos de vuelta a flotar. Vamos a probarlo. Pulsa play, coloca el cursor sobre el botón. Coloca el cursor sobre. Aleje el cursor. Desplaza el cursor. Perfecto. Esa es nuestra interacción hover funcionando Y aquí está la parte genial. Si haces clic en el botón, la interacción de encendido y apagado también funciona. Así que ahora hemos combinado múltiples capas de interactividad en una animación Adelante, pruébalo tú mismo. Vea si puede agregar interacciones de desplazamiento a sus diseños. Ahora tienes todo lo que necesitas para crear tu primera animación interactiva. Las capacidades de If van más allá de lo que estamos viendo para este curso, pero se basa en estos fundamentos, estados, transiciones, entradas y oyentes Entonces es momento de que tomes estos fundamentos y los pongas en práctica No puedo esperar a verla. 7. Proyecto de clase interactiva: Bien, ahora es el momento de practicar. Ver las lecciones es genial, pero si realmente quieres mejorar, tienes que ponerte manos a la obra. Probar cosas, estropeando, averiguando cosas, ahí es donde ocurre el verdadero aprendizaje Es la única manera de generar confianza y entender realmente cómo funciona todo. Entonces, para este proyecto de clase, elige uno de los diseños en los archivos de recursos e intenta crear tu propia animación interactiva desde cero. Aquí hay un lapso de tiempo completo del proceso de principio a fin. Es un rápido recapitular para ayudar a que todo haga clic y reforzar lo que hemos aprendido hasta ahora Asegúrate de organizar tu jerarquía, agrupar tus objetos y cambiar el nombre de las capas. Crear dos estados. Agregar transiciones. Agregar entradas. Agrega condiciones a las transiciones. Añadir oyentes y establecer los cambios de entrada. Añadir interacción de desplazamiento. Volví al modo de diseño y agregué un nuevo degradado de relleno para ser usado como mi punto culminante de hover Utilice una entrada de intimidación. Agrega dos oyentes para true y false. Y ya está hecho. Buena suerte. Te veré en la siguiente lección para mostrarte cómo puedes compartir tu trabajo. 8. Comparte tu trabajo: Así que acabas de crear tu primera animación interactiva. Bien hecho. Ahora es el momento de compartirlo con nosotros en la galería de proyectos. Empecemos con una imagen de portada. Aquí te explicamos cómo crear un RIV. Haga clic en añadir a Render Q. Elija el modo de diseño. Seleccione el formato PNG y haga clic en Inicio. Una vez hecho esto, ve a la pestaña completa y descarga tu imagen. Puedes subir este PNG como tu imagen de portada, elegir la escala de tu imagen y hacer clic en Enviar. Agrega un título de proyecto y algunas palabras en la descripción. Entonces tenemos dos opciones para compartir nuestro trabajo aquí. Opción uno, plan pagado. Si estás en el plan de pago de RV, haz clic en Generar Compartir enlace. Luego copia el código embed desde aquí. Después ve y pega ese código en la descripción. Es una excelente manera de mostrar tu animación interactiva en acción y dejar que el usuario interactúe con ella en tiempo real. Opción dos, el plan gratuito. Si estás usando la versión gratuita de RIV, no puedes crear un enlace para compartir Entonces, si quieres mostrar cosas como las interacciones de hover o hacer clic, puedes usar una herramienta de grabación de pantalla como Jiffy capture en Mac o en PC Puedes grabar tu pantalla y convertirla a JIF en el sitio web de Jiffy Simplemente abre tu animación en RIV Start Jiffy capture y coloca el fotograma de grabación sobre tu Asegúrese de habilitar el cursor de captura en la configuración para que sus interacciones sean visibles. Entonces recuerda tus interacciones y exporta como un Jif. Luego arrastra y suelta tu Jif o pega tu código de inserción. Cuando hayas terminado, haz clic en publicar y tu trabajo estará en vivo en la galería. Eso es. No puedo esperar a ver lo que has creado. Compartir tu trabajo es un gran paso adelante, así que no te lo saltes. 9. Reflexiones finales y próximos pasos: Bien. Enhorabuena. Tú lo hiciste. Lo has logrado a través del curso y aprendes los fundamentos de las animaciones interactivas usando la máquina RV State. Ahora deberías sentirte cómodo creando estados de animación, configurando transiciones y usando interacciones como hacer clic y pasar el ratón para dar vida a tus diseños Ese es un paso enorme, sobre todo si esta era la primera vez que trabajabas con RV. Por supuesto, como cualquier herramienta creativa, la clave para dominar RV es practicar práctica práctica Cuanto más experimentas y construyes, más confianza te vuelves. Así que sigue adelante. Un gran paso siguiente es explorar el mercado de Rives Se puede ver lo que otros están construyendo. Y si algo te llama la atención, puedes hacer clic en el botón de remix Se abrirá en el editor, y podrás mirar debajo del capó y revertir el motor cómo se construyeron las cosas. Honestamente, he aprendido mucho al ver cómo otros diseñadores resuelven problemas en sus archivos. Muchas gracias por acompañarme en esta clase. Espero que te hayas divertido y te sientas emocionado de seguir creando. No tengas miedo de jugar, romper cosas, probar ideas raras. De ahí viene todo lo bueno. Sigue animando, y te veré la próxima vez.