Transcripciones
1. Te damos la bienvenida a la clase.: Hola y Bettina. Soy diseñador principal, con sede en Vancouver, ER. Trabajo con experiencia de usuario y diseño de interfaz de usuario para aplicaciones Web, y también hago motion graphics para videos explicadores. En esta clase de cultura, te
estaré enseñando a crear animaciones para interfaz de usuario y firmar y estos cursos para ti. Yo diseñadores con poco o ningún fondo en los gráficos en movimiento. Empezaremos por hablar de los principios de la animación y las mejores prácticas para la interacción , diseño y para el proyecto de clase estará animando una página de aterrizaje en principio para Mac. Necesitarás un Mac para esta clase, y para el final de este curso, podrás crear una página de aterrizaje con animaciones, que es vertical y horizontal. Los efectos de desplazamiento exageran las transiciones y los labios. De esta manera, podrás aplicar el signo de movimiento a cualquier interfase en la que estés trabajando tanto para web como para móvil. Empecemos
2. Objetivos de aprendizaje: Hola y bienvenidos de nuevo a los motion graphics para ti. Diseño clase en este video, voy a explicar los objetivos de aprendizaje. Esta clase se divide en dos secciones. En primer lugar, hablaremos del futuro de la animación y de lo que hace una buena animación. Después llevaremos a la práctica la furia y animaremos una página de aterrizaje. Al final de esta clase, podrás entender los principios de la animación y cómo puedes usar esos para el movimiento en ti diseño. Aprenderás a usar el apt principal para crear
efectos de desplazamiento vertical y horizontal para crear prototipos sobre efectos e interacciones, para trabajar con múltiples pantallas para crear transiciones y tuvo que exportar y compartir tu prototipo. Para el proyecto de clase, se
te proporcionará una plantilla de una página de aterrizaje creada con fig MMA. Entonces empecemos.
3. Comprender la animación: De acuerdo, ahora empecemos por entender. Animación en esta sección hablará de los principios de la animación y cómo podemos traducir algunos de esos principios en movimiento. Tú diseño Los 12 Principios de la Animación fueron presentados por los animadores de Disney todos los Johnston y Frank Thomas en su libro La evolución de la vida. Esta más o menos es la Biblia de cualquier animador Judy y tres D por ahí ahora. Hay mucho recurso está en línea sobre este tema, pero hoy les estaré mostrando los ejemplos que se muestran en estos sitios web Los 12 Principios de Animación que tumbler dot com. Repasemos rápidamente, ¿
cuáles son estos principios? Número uno, Squatch y Stretch. Este principio tiene como objetivo enfatizar el elemento horno de velocidad y peso. Número dos Anticipación. Esto es para preparar al público para la inacción. Se trata de un movimiento que inicia antes de que ocurra la animación principal. Número tres Puesta en escena. Se trata de una presentación de un objeto de una manera que es clara. Esto permite al público enfocarse en el objeto y evitar la destrucción. Esto es más entrega en la interfaz de usuario. Cuando piensas en la entrada de una animación, ¿está ocurriendo en medio de la pantalla? o se estrella antes de que el objeto aparezca en la pantalla? De cualquier manera es importante que te asegures de que el usuario entienda lo que está pasando. Número cuatro recto por delante y posteó el aire del del dos enfoques diferentes de animación por
delante. Las escenas son animadas fotograma por fotograma, mientras que post se oponen a las escenas, comienzan con las poses clave y luego vuelve a sentir los fotogramas en medio. Esto vendrá más útil a la hora de animar ilustraciones o iconos número cinco seguir
y superponer la acción. Esto es, en cierto modo. Lo contrario de la anticipación es la animación que ocurre después de la acción principal. Um, este principio tiene como objetivo seguir la pérdida de la física para hacer que los objetos se vean más naturales, como si tuvieran sentido de peso o volumen. Número seis ralentizando y despacio thes discuten flexibilización, y él está fuera, y tú estarás usando mucho este principio. En diseño de movimiento y animación digital. El facilidad de entrada se puede ajustar fácilmente con una curva más ocupado, y vamos a repasar y más detallados con empezar a animar con
arcos de principio número siete . Por lo que los movimientos más naturales siguen un movimiento de curva que anima sin curvas generalmente se verá antinatural y menos fluida por lo que la piel de arco viene bien, fue animando pergaminos o barrida para un simple barrido a través de autos Izquierda y derecha. Número ocho. Acción secundaria. Una acción secundaria suele enfatizar la acción principal. En el caso de ustedes, yo estos podrían ser útiles, fui animando deslizadores o programas, barras o cualquier otro componente que haga más clara la interacción principal. Número nueve Temporización en animación Este principio se refiere al número de fotogramas o dibujos entre el inicio y el final de la inacción. Más cuadros fue baja. El marco interminable de acción hará que se vea rápido. Pero en cuanto a la interfase del usuario, um, velocidad se vuelve más importante al hablar de micro y micro animaciones. Número 10 Exageración. Esto mejora la acción pero haciéndola más evidente y evita que las animaciones se vean aburridas. Entonces, por ejemplo, las cosas pueden ser útiles a la hora de proporcionar retroalimentación al usuario en una ventana pública para ensamblado para y vengo como una campana de notificación. Número 11 dibujos tontos en animación. Alemanes solares significa agregar volumen y peso a los objetos de la escena, dándole a la escena un espacio tridimensional. Entonces en ti, puedo interpretar esto como la cantidad de elevación que tiene un componente y cómo mostrar claramente la jerarquía de elementos y el atractivo número 12, haciendo que algo parezca interesante y con carácter. Este será tu estilo de movimiento. Esto, en cierto modo, es una combinación entre las constreñencias en el diseño de movimiento y la personalidad de la marca con la
que estás trabajando.
4. Principios de recap de animación: Entonces ahora que estamos familiarizados con los principios de la animación, hagamos rápidamente una recapitulación de qué principios se pueden aplicar al diseño de interacción para que squash y el stretch se puedan aplicar a I conos e ilustraciones. escena se puede aplicar a la interfaz asignada para mostrar claramente un objeto en la pantalla. Seguir a través. puede usar una acción superpuesta al animar múltiples componentes, y también vienen cuatro I y las ilustraciones ralentizar y desacelerar pueden ser muy útiles para suavizar tus animaciones. Y este es probablemente el principio que vas a estar usando La mayoría de los arcos es bueno para iconos e ilustraciones y tal vez algunos tipos de diseños de interacción que puedes animar con los que puedes crear algunas curvas. El tiempo es interesante, porque normalmente cuando lo haces, cuando piensas en animación, estarás pensando en fotogramas. No obstante, cuando se trata de movimiento diseñado para la interfaz de usuario, vas a estar pensando en cuánto tiempo es una animación en milisegundos, y hablaremos con más detalle en un video posterior y por último atractivo. Entonces este es tu estilo y la personalidad sobre tus animaciones. Entonces ahora pasemos al siguiente video, donde estaré hablando de las cosas clave y las constreñencias que son específicas para moverte. Diseño
5. La illusion de una interfaz de usuario: ahora estás familiarizado con los 12º principios de la animación. Hablemos de los principios del movimiento diseñados para ti. Yo en los siguientes videos repasaré las cosas clave a tener en cuenta a la hora de animar una
interfaz de usuario . Hablemos de los principios del diseño de movimiento para ti. I Esto difiere de los 12 principios de la animación en que estos aviadores para la interactividad y realmente son las cosas más importantes a considerar. En primer lugar, sus animaciones deben ser eficientes. No deben sacrificar el rendimiento. En un mundo donde el lapso de atención de las personas es cada vez más corto, debes asegurarte de que tus animaciones no tarden mucho tiempo en cargarse en la pantalla. Segundo, tus animaciones deben ser intuitivas. Deben parecer naturales. Deben sentirse familiares y esperados y deben estar de vuelta por las leyes de la naturaleza. Ya sabes, deberían estar casándose con cosas como aceleración de wade, volumen, etcétera. Y por último pero no menos importante, tus animaciones no deben ser una distracción. El monto de la moción debe ser justo para ser significativo y justificado, y su único propósito es hacer cruzar la intención y nada más. Ahora fue bueno para el próximo mundo del video. Hablar sobre el A deal duración del horno animación en ti
6. Duración: al animar para ti, estaré hablando de milisegundos a diferencia de fotogramas. Y de acuerdo con estos estudios de investigación de un grupo normal de Nelson,
nada por debajo de 100 milisegundos no será lo suficientemente visible para el usuario. Y cualquier cosa más larga de 500 milisegundos tomará demasiado tiempo y mi costo aburrimiento o destrucción. Entonces con esto en mente, generalmente
me gusta quedarme entre 100 y 500 milisegundos, como así en movimiento. Sí, se
puede pensar en dos tipos de animación micro y macro, por lo que cualquier cosa entre 100 milisegundos y 300 milisegundos puede considerarse una micro animación. Esto podría ser desvanecimientos de color sobre efectos, acordeones, puntas de
herramientas, etcétera y cualquier cosa a partir de 400 milisegundos lo será. Considera una animación macro. Esto puede ser un Siris de componentes dentro de una sección y apareamiento por completo, o una transición de una página a otra o simplemente generalmente, cualquier movimiento grande en la pantalla. Aquí te dejamos un ejemplo de la diferente duración que se usará hoy. He animado estos cuadrados para que se muevan de lado a lado con los diferentes tipos de duración, y esto debería darte una idea de micro y macro animaciones como puedes ver aquí. Ahora pasemos a los efectos de flexibilización
7. Atenuación: flexibilizar es otro aspecto importante del diseño de movimiento. Este es tuyo que baja y baja ABT, y cambia la animación del horno de velocidad con el tiempo. Esto hace que un objeto parezca más natural, ya que en el mundo físico, los objetos aceleran y desaceleran otras varias veces de flexibilización. Pero por el bien de esta clase estará utilizando los tres tipos de flexibilización más comunes ese dirigido. Está fuera y está dentro y fuera. Puedes ajustar los valores para aumentar en la cantidad loca de usar, dependiendo del efecto que estés buscando. Pero principio por defecto utiliza el estilo de flexibilización predeterminado para IOS. Pero te recomiendo probar diferentes valores y ver cómo eso afecta el sentimiento fuera de tu animación.
8. Archivo de trabajo: Está bien. Entonces ahora miramos algo de furia. Es hora de iniciar enemigo. Yo lo sé. Por último. Correcto. Por lo que para esta clase han creado una presentación Sigma, que tendrás que seguir ahora, Principal también es compatible con sketch. Entonces si estás más familiarizado con él, siéntete libre de usar tu propio diseño y simplemente aplicar lo que estaremos haciendo en principio. De acuerdo, entonces echemos un vistazo rápidamente a un archivo de trabajo, y quiero mencionar algunas cosas son muy importantes a la hora de diseñar movimiento en principio. En primer lugar, asegúrate de que tus capas estén claramente organizadas. Te recomiendo organizar tus capas de arriba a abajo siguiendo la posición sobre las tuyas en tu diseño. Entonces, por ejemplo, tu barra de navegación estaría en la parte superior y tu pie. Sería la parte inferior, por lo que la capa de navegación estaría en la parte superior de la lista y la capa de pie de página estaría en la parte inferior de la lista. Y esto hará las cosas mucho más fáciles a la hora de animar en principio. Y segundo es muy importante nombrar correctamente tus capas. Si no animar un archivo que tiene muchas capas puede ponerse realmente desordenado muy rápidamente, y sería muy difícil actualizar tu archivo en el futuro. Por lo tanto, asegúrate de que todas las capas tengan un nombre claro y que estén organizadas por grupos o secciones porque duplicados principales de los años laicos que serán animados. Entonces no te gustaría estar trabajando con nombres como Lay your Want o 350 ya sabes? Así que asegúrate de nombrarlos intuitivamente, y eso está claro para ti. qué quejarse estás trabajando. Está bien, genial. Entonces ahora pasemos al siguiente video donde pasaremos por la interfaz principal y luego importaremos archivo.
9. Principle: importa nuestro archivo: en este video, vamos a tomar los principios de animación de los que acabamos de hablar, y los vamos a poner en práctica. Entonces, empecemos por familiarizarnos con la interfaz principal. Primero a la izquierda, tenemos nuestras propiedades de capa y tenemos nuestras capas y a la derecha, tenemos nuestra ventana de vista previa y aquí podremos jugar con nuestro prototipo. Y también vamos a poder ver nuestras animaciones jugando en tiempo real mientras editamos y cambiamos los valles y propiedades de las animaciones también. Entonces, en principio, hay dos tipos de línea de tiempo los conductores y el animate, que puedes hacer ir y apagar hace así. Por lo que las animaciones suceden entre tableros de arte y se airean desencadenadas por eventos como top o click o hover dentro y fuera. Y los conductores técnicamente no se clasifican como animaciones. En principio, um, suceden dentro y nuestro tablero, y son más como efectos de desplazamiento o arrastrar un ble. Más tarde. Entonces, para empezar, me gusta separar mi ventana de vista previa así, y me gusta tenerla a un lado porque de lo contrario está un poco en el camino de los
tableros de arte Thea . Y así voy a mover mi ventana así. Entonces de esta manera podemos enfocarnos y trabajar en los nuestros tableros aquí y ver qué está pasando en
tiempo real por aquí. Ahora vamos a seguir adelante y la importación son fig mi archivo. Demos clic en el botón de importación y lo pedirán conectarse a nuestra cuenta femenina. Entonces sigamos adelante y hagamos eso. Esto abrirá una nueva ventana en tu navegador, y necesitas permitir que los ejes se inicien. Entonces haremos clic en eso. Y con el fin de asegurarse de que fueran importantes el proyecto correcto. Volvamos a Fig MMA, y estos se pueden hacer tanto en la aplicación de escritorio como en la aplicación del navegador. Entonces vamos a seleccionar el marco que queremos importante y volver a principio, y vamos a hacer clic en la importación de marcos seleccionados. De acuerdo, entonces ahora estamos listos para empezar a animar
10. Principle: scroll de la página: De acuerdo, entonces aquí está nuestra página, y lo primero que quiero hacer es que quiero cambiar el tamaño del puerto de vista. Entonces para hacer eso, vayamos a los ajustes preestablecidos de tamaño y seleccionemos Ventana la parada y la web. Entonces como puedes ver aquí, ha actualizado
una ventana de vista previa en consecuencia. Y ahora echemos un vistazo a nuestra estructura de archivos por un segundo. Por lo que todo sobre secciones o agrupar individualmente y su oculto. Y si quieres verlos o acceder en elementos de rendimiento dentro, todo lo que tienes que hacer es revisar las subcapas de clip rápido aquí, así que las viviremos escondidas por ahora. Volveremos a estos estado posterior. Ahora, esta perra realmente no está haciendo nada en todo momento. Por lo que quiero asegurarme de que podemos hacer es desplazar desplazamiento vertical aquí. Entonces, para hacer eso, necesitamos cambiar la configuración vertical aquí para desplazarse en lugar de estático. Así que agrupemos todas las secciones presionando el comando G. Y cambiemos el nombre de estos grupos a ventana de ardilla, y puedes hacer esto presionando comando son así que ahora teniendo nuestras capas seleccionadas. Cambiemos
también el ajuste estático . Desplázate aquí ahora. Aquí ha pasado algo interesante. Principal ha creado aquí un controlador que especifica que la ventana de desplazamiento tiene un controlador fuera desplazamiento en el eje Y. Y si arrastras estas línea año que queda en novia, puedes ver el pergamino moviéndose hacia arriba y hacia abajo. Pero volvamos a esto más tarde. Y por ahora, llevemos estos de vuelta a cero. Entonces si vas a la ventana de vista previa, en realidad, nada está pasando aquí y comienzas, prueba Dragon esto Pero eso no es Realmente no quiere. Por lo que para solucionar esto, el grupo necesita ser del mismo tamaño de nuestra vista para el tamaño. Así que vamos, uh vamos a ajustar la configuración aquí. Entonces intercambiando noticias aquí y luego haciendo que los altos nueve pixeles como tú derramaran. Y así vas a la ventana de vista previa, luego tienes una página escalable. De acuerdo, así que eso fue fácil. Um, el siguiente video se animará. ¿ Cómo están Londres? Page se va a buscar
11. Princio: carga de página: De acuerdo, Entonces en este video, vamos a crear un efecto de carga para los elementos que están en la sección de héroes. Entonces lo que quiero hacer aquí es una animación muy simple donde estos elementos se desvanecen y flotan desde abajo en un estilo de cascada, así que algo así como uno por uno. Entonces para hacer eso, vamos a seleccionar aquí nuestra página de aterrizaje, y voy a renombrarla a en verdadera Transición. Está bien. Y voy a dar clic a estas cosita de la vida Bull,
icon y select auto,lo icon y select auto, que básicamente significa que nuestras transiciones aire van a jugar automáticamente para que podamos ver esta pequeña flecha azul aquí que, um, estará apuntando a la siguiente nuestra directiva. Pero como no tenemos ningún otro son jabalíes aquí seleccionaremos el que ya tenemos para que lo duplique así. Y como mencioné antes, la línea de tiempo animada funciona entre nuestras puertas. Entonces, como puedes ver aquí, el principal ha creado estas flecha, y si haces clic en ella, puedes ver la línea de tiempo animada fuera y cómo tiene todas nuestras capas aquí. Y por eso es importante tener un buen hábito de nombrar correctamente tus capas
porque será muy triste ver qué cosas estás animando aquí y simplemente básicamente, justo lo que está pasando aquí. Entonces, empecemos por cambiar el nombre de ser tablero de patio a página de ardilla. Ahora vamos a Creavy efecto flotante aquí. Voy a seleccionar estos elementos y moverlos 30 píxeles hacia abajo, y puedes hacerlo haciendo clic en Mayús y la tecla de flecha hacia abajo tres veces. Por lo que cada vez que haga clic logrado en una tecla de flecha se moverá. 10 picks se detiene en esa dirección. Por lo que si hago cargo de estos espía haciendo clic en este botón aquí, nos llevará a la primera nuestra pizarra. Y si colocas tu boca en cualquier parte de la pantalla de vista previa, podemos demostrar que eres animaciones por defecto. Principal te mantiene una duración fuera de 300 milisegundos y utiliza el estilo de flexibilización de tres D para nosotros. Ahora personalmente prefiero la facilidad. Ambos, Um, creo que hace que las animaciones sean un poco más suaves, pero siéntete libre de usar lo que prefieras. Aquí voy a cambiar todos estos para facilitar ambos, y también voy a seleccionar la barra de navegación aquí y cambiar todos estos
elementos selectos a cero prisión un equipo de pase. Entonces como puedes ver aquí, Principal ha creado automáticamente son animaciones. Y si mueve el ratón a la izquierda y a la derecha sobre la línea de tiempo, puede previsualizar su animación. Entonces de esta manera podemos ver como vienen las animaciones. Y como dije, quiero que los elementos entren uno por uno. Entonces voy a estar arrastrando estos y separándolos por 100 milisegundos cada uno. De acuerdo, así se ve así. Se ve bastante bonito y suave. Creo que podemos salirnos con la suya, um, tal vez extendiendo la animación de la posición sólo un poquito para darle una especie de hijos de los elementos siendo pero arrastrados en un poco. De acuerdo, Entonces voy a seleccionar estos aquí y extenderlos por otros 100 milisegundos, supongo. Veamos cómo se ve ahora. De acuerdo, algunos pasan con esto. Pasemos al siguiente video. ¿ Dónde animará cómo entrarán estos autos a la pantalla? Bueno, desplazándose hacia abajo por la página
12. Princio: efectos de talla: derecho. Entonces aquí estamos otra vez y lo que es sólo limpiar esto un poco. Entonces lo que quiero hacer ahora es que quiero animar estas cartas, y quiero que las cartas tengan un efecto Khobar. Y también quiero crear un efecto de desplazamiento para que cuando nos desplazemos hacia abajo, los carros aparezcan de una manera bonita, va fluida. Entonces para hacer eso, vamos a crear un nuevo arte para, y voy a seleccionar aquí. Empieza Scroll, y lo voy a duplicar de nuevo. Y luego voy a ejecutar estos efectos de desplazamiento. Está bien, así que vamos, um unclip son capas establecidas aquí. Simplemente quiero ver qué está pasando. Y aquí es donde vamos a empezar a usar a nuestros conductores aquí. Ahora, antes de empezar a animar estas cartas, quiero crear los efectos de Khobar. Para ello, voy a hacer un componente. Entonces vamos a seleccionar una de sus tarjetas aquí, y vamos a este botón aquí que dice crear componente. Y luego voy a dar clic aquí y seleccionar sobre insight va a duplicar esto y luego cuando usted por fuera va a volver al principio. Hemos creado un bucle aquí en este momento. En realidad no pasa nada porque no hemos cambiado nada. Voy a cambiar mi caballo de arte llamado aquí June active. Y luego aquí quiero que el auto hasta 10 pixeles arriba. Y también quiero tener una sombra aquí. Entonces voy a usar la misma sombra que realmente tenemos que encontrar aquí. Uh, sólo por el bien del ejercicio, Uh, vamos aquí a 16 año un en 4% cero apuntado en nuestros todos los fondos para Ok. Por lo que también quiero aprender más para tener una línea aquí, ese tipo de abuso de izquierda a derecha. Y si volvemos a su expediente
aquí, notarán que ya he preparado mucho. Estos componentes para ti. Si vas al componente aprender más, verás que ya tendría un grupo activo y un sobre. Y porque cuando importas un archivo al principal cada enfermo al año y agrupa que está oculto , aquí no va a ser importante, y lo hubiera hecho es que han hecho transparentes a los estados sobre. Entonces aquí, cambiemos nuestra capacidad de 0 a 200 y luego pongamos el estado activo a jarabe por ciento y yo estaba Ya puedes ver aquí tenemos una línea aquí ahora. Lo que yo quería es un uno thes líneas a trazar de izquierda a derecha. De acuerdo, entonces vamos a nuestro estado activo. Y luego cambiemos la línea aquí en el Estado de Khobar, 20 con. Entonces si pudiéramos ir y previsualizar que ahora está funcionando. Entonces, sólo cerremos su arriba. Volvamos a padres. Entonces ahora lo que quiero hacer es que quiero duplicar esto y para que tengamos tres autos que están haciendo lo mismo. Entonces primero voy a renombrarlo Tarjeta uno, y luego voy a duplicar veinte pero presionando comando profundo. Y entonces sólo voy a asegurarme de que sean una línea. De acuerdo con las tarjetas originales, solo
estoy eligiendo tarjetas y alineándolas, y ahora podemos seguir adelante y cumplir con nuestras cartas anteriores, y previsualizamos esto se puede ver que hay sobre efecto ahora está funcionando bien, ¿
verdad? Entonces eso es todo para estos video. En la siguiente, vamos a crear un efecto de desplazamiento para tres cartas
13. Principle: efectos de Scroll (parte 1): De acuerdo, así que ahora pongamos de acuerdo este creciente efecto aquí para nuestras tarjetas. Ahora, aquí es donde vamos a usar a nuestros conductores y lo que quería para ti. Es que cuando las cartas alcanzaron esta posición en la pantalla, te ves exactamente así. Vamos a seleccionar nuestros corazones y luego vamos a estos pequeño símbolo plus y selecto centro. ¿ Por qué? Y crear Cree Frenk y también quiero que se desvanezcan. Entonces voy a seleccionar capacidades bien abajo. Volvamos a cero, que es donde comienza nuestra animación y los voy a mover 100 píxeles hacia abajo. Este tiempo de uno va a ser un poco más drástico que los 30 píxeles. Y luego los voy a separar también por 100 píxeles cada uno, como siempre Prevue. Esto lo que se desplazaba hacia abajo? Ya puedes ver el efecto que viene ahora. Esto es genial, agradable y suave. Asegurémonos de añadir nuestro desvanecimiento también. Entonces cambiemos de nuevo lo que los está vendiendo todos y cambiemos la capacidad a cero. Entonces vamos a Proview está bien, eso sí, así que hagámoslo desde el principio. ¿ De acuerdo? Y o efectos homer siguen funcionando. Eso es genial. Ahora entremos al siguiente video donde vamos a animar la siguiente sección
14. Princio: efectos de desplazamiento (parte 2a): Entonces aquí estamos otra vez y pasemos a la siguiente sección y vamos a hacer algo muy parecido aquí. De hecho, vamos a hacer más o menos lo mismo para cada sección. Simplemente van a ser un poco diferentes en algunos pequeños detalles. Pero más o menos lo esencial de las animaciones y el estilo de las animaciones van a ser lo
mismo. Ahora, vamos a hacer lo mismo aquí convirtiendo estos en componentes. Y la razón por la que estamos haciendo los componentes primero es porque vamos a crear algunas interacciones para thes page. Pero para que Corea, esas interacciones vamos a tener que crear los nuestros tableros y cada vez se duplicarían en nuestro tablero e copias sobre cada componente y cada pobre bonita que tengas. Si duplicamos en la guerra del arte sin crear componentes, entonces vamos a tener que hacer nuestro trabajo dos veces. Entonces para sacarlo del camino, sólo lo vamos a hacer ahora. Ahora empecemos con éste. Entonces vamos con un gran componente. Y como dije, ya
he creado estos estados para ustedes estaba activo y sobre eso éste va a necesitar otro estado el cual va a ser el selecto en ST ahora. Primero quiero ver qué está pasando, porque cuando estaba demasiado oscuro, así que solo voy a crear un fondo para este fondo blanco. Entonces solo voy a presionar son por un rectángulo, y luego solo voy a crear un muy, ya
sabes, solo por el bien de ver lo que está pasando, solo voy a cambiar esto a Blanco, y luego voy a muévelo por aquí. Caso ahora puedo ver. Ahora vamos a cambiar el nombre aquí demasiado activo, y luego vamos a crear nuestro efecto sobre y luego nuestro regreso afuera y voy a cambiar estos dos más, y voy a duplicar este presente comando D y quitar eso demuestra en dirección. Yo quiero pasar, euforado porque no quiero trasladarme accidentalmente a diferentes estados cuando no pretendo hacerlo. Entonces va a haber cambio de uso como, Bien, ahora vamos aquí. Y luego vamos a mostrar nuestro estado activo, que es un pastis 100% eso es bueno. Y nuestro Khobar, es 0%. Pero en realidad quiero que estos dos se ven como están seleccionados estado, porque si nos fijamos en el diseño. Así es como se ve el estado seleccionado en el bistec activo saudita. Parece que así fue cambiado. Esto para ser en realidad Dube va a cambiar están mintiendo a cero, y luego te voy a cambiar. Pásalo aquí también. 60%. Y luego aquí, voy a hacerlo. Pero todo el 100% estás activo 0%. Y luego de nuevo, quiero que estas líneas se dibujen desde la izquierda. Correcto, Así que lo voy a cambiar aquí 20 y voy a dejar estos ya que está tan débil sobre ahora ya podemos ver que tenemos perfecto. Genial. Entonces volvamos con el padre. Y aquí, como pueden ver, ha cambiado la forma en que se ve, Pero podemos ir aquí y cambiar de activo a selecto. Ahora tenemos esto exactamente como lo diseñamos. Ahora vamos a hacer lo mismo por estos componentes. Vamos a renombrar este 1er paso 201 y luego las inundaciones crean componente para esto. Ir a crear un rectángulo aquí para ver demasiado tiempo cambiarlo a blanco. El movimiento hacia atrás cambió estos dos estados activos. Pero voy a duplicar el suyo dos veces. Y entonces éstos se van a terminar. Esto iba a ser seleccionado. Entonces el hecho titular va a cambiar este 200%. Tiene 1 a 0% y vamos a hacer el mismo primer estado electo. Por lo que el 100% y el 0%. Y entonces nuestro estado activo es un peso muy el que te ves. Entonces, asegurémonos de que estamos conectando. El arte aburre aquí y luego por sobre la columna vertebral. Y ahora funciona. Y no olvides cuando hagas esto, Linus. Bueno, entonces volveremos a por aquí, cambiaremos nuestra línea. 20 ¿Qué? Y redes? Genial. Entonces volvamos con nuestro padre. Y luego a vidas se les nombró este 202 paso, y luego se previsualiza esto. Esto está funcionando.
15. Princio: efectos de desplazamiento (parte 2b): Entonces ahora vamos a crear nuestros efectos de desplazamiento para esto. Entonces quiero que estos dos parezcan bastante similares. Yo varita el texto para deslizarme hacia arriba y desvanecerme, y me van a gustar todavía aquí también con estos. Y voy a crear un conductor aquí, un marco clave aquí y Sandra ¿por qué? Y también para el paso. Ahora volvamos a donde terminó la animación anterior y vamos a mover estos 100 píxeles. Voy a presionar la anarquía de turno y abajo 10 veces y luego los voy a separar por 50 píxeles cada uno. Simplemente no quiero que sea demasiado loco con 100% de células cada una porque de lo contrario va a tardar mucho tiempo en cargarse. ¿ Verdad? Entonces prevalecemos. Es ahora se ve muy suave. A mí me gusta. Ahora seleccionémoslos a todos y cambiemos la rapacidad. 20 Podemos ver aquí. Eso es lindo. Haremos lo mismo. Excepto que esta vez usaría el centro X para esto. Entonces vamos aquí y vamos a dar click en Centro X y capacidad. Volvamos aquí y luego movamos 100 píxeles y cambiemos la capacidad a cero. Por lo que revisamos nuestra información aquí. Esto se está acercando juntos. Muy bonito. Está bien, así que eso es todo para esta sección. En el siguiente video, haremos algo muy parecido para la siguiente sección. Y luego vamos, señor, Saludos o interacciones más complejas.
16. Princio: efectos de Scroll (parte 3): Muy bien, entonces aquí estamos con esta sección. Ahora, vayamos con nuestros conductores aquí y pongamos estos en la posición correcta. Entonces de nuevo, cuando la sección llegue a punto de tesis, quería verme así. Ahora, aquí sólo vamos a ajustar nuestras tarjetas porque hay tres autos que tenemos aquí son solo marcador de posición. Aquí están las cartas rial, y vamos a usar principio, pero para asegurarnos de que estén en la posición correcta. Entonces sólo voy a eliminar estos de aquí, y voy a cambiar esto a 200%. Y voy a cambiar la escala aquí a 0.9 en estos 12 0.8. Y la razón por la que los más antiguos donde un marcador de posición es porque el texto es diferente. Y quería usar la propiedad scaling aquí porque después te voy a mostrar cómo
vamos a crear una interacción para voltear a través de estas tarjetas. De acuerdo, así que vamos a asegurarnos de que estén alineados al fondo de la primera carta, y luego los voy a mover 20 píxeles hacia abajo cada uno y sólo te dejaré ver cómo se ven. Ahí sólo tienen texto diferente. Por supuesto, este es el texto de Demi pero sólo quiero que se vean diferentes. Entonces ahora que
lo sacamos de camino, está cerca esto y vamos a ver cómo vamos a hacer esta siguiente sección. Entonces nuevamente gané las etiquetas a desvanecerse y deslizarse, y quiero animar este fondo para destapar los autos y luego, en una thes dos horas para animar también. Se va a encontrar de izquierda y derecha. Entonces, empecemos con el texto. Voy a seleccionar esto y voy a crear un marco clave. Creo que Aquí está bien para Sandra Y y opacidad. Volvamos a donde terminó nuestra animación anterior y saludemos aquí a nuestros fotogramas clave. Entonces volvamos a bajar por 100 píxeles. Solo quiero asegurarme de que todo sea consistente y de uso. Lo mismo está basando aquí, Así que separemos estas palabras por 50 píxeles también. Ups. De acuerdo, vamos a previsualizar este Moran. Eso es bastante suave. Ahora vamos a nuestro desvanecimiento en efecto cambiando la capacidad a cero. Entonces vamos aquí Ahora les vemos una reunión. Está bien, así que pasemos a estas partes. Entonces aquí voy a crear un marco clave cuatro centro X y con algo con ellos
así . Y revisemos aquí, Así que está bien, creo que aquí quiero que los antecedentes terminen un poco antes. Entonces para hacer eso, voy a hacer esto más grande aquí y voy a mover su ronda. Entonces creo que quiero final. Sólo vamos a ver. Entonces quiero terminar justo sobre lo suyo. Esa sería la A d on. Entonces veamos aquí. Sí, entonces podemos ver mejor las cartas ahora? Sí. Ahora animemos estas dos horas aquí. Entonces de nuevo, voy a crear una clave desde un centro X, y luego quiero que escalen un poco. Voy a agregar un marco de habilidad que y luego un pasado dos clave libre. Ahora volvamos al inicio de la animación, y luego voy a ir a de los 20 píxeles cada uno al sitio. Y luego voy a cambiar la escala a 0.8 y hay pasajes tu así que vamos a ver cómo se ve
esto. De acuerdo, así que quiero que los Teoh terminen justo antes del texto. Nosotros? Bueno, y no quiero que comiencen después de temprano, tampoco porque parece no debe que solo estén flotando ahí. Y quiero que estén más cerca de la línea de la animación del cuarto trasero aquí. Entonces pasemos por aquí. Cambia esto a un alcance un poco más temprano, probablemente por ahí, solo un poco más. Y luego quiero que terminen solo un poco antes también. Tal vez por ahí. Vamos a verte. De acuerdo, creo que solo queremos asegurarnos de que no podemos decirle al usuario que conoces estos
botones de aire y puedes hacer click por aquí, y quiero que lo entiendan de inmediato. Entonces creo que esto está funcionando por ahora. Entonces en el siguiente video, terminaremos los efectos de desplazamiento, y luego pasaremos a crear algunas interacciones más complejas para las cartas y nuestro caballo hasta efectos garabatos.
17. Princio: efectos de Scroll (parte 4): Está bien. Entonces pasemos a la siguiente sección aquí y solo queremos ver más de esto. Entonces vamos a hacer esto igual que lo hemos estado haciendo. En realidad iban a ir a las secciones anteriores, vamos a agrupar estas cartas mando G, y voy a cambiar esto para probar. Simplemente siente que son mis tarjetas. Y vamos así también. Voy a adicto marco para centro. ¿ Por qué? Y mantener marco tiene un equipo. Y por aquí con el fin de nuestra provincia la innovación aquí va Teoh arregla eso. Ese es un hombre valiente. Um, 15. Echemos un vistazo. Sí, no
quiero que estos en realidad sean demasiado porque los quiero para que cuando nos desplazemos hacia abajo , estos autos se estén moviendo automáticamente desplazando hacia los lados. Entonces no quiero que estos se conviertan en una distracción Y que estén pasando demasiado aquí, Así que vivan así. Y luego Alice acaba de poner todo a cero positivo. ¿ De acuerdo? Hace bonito. OK, así que ahora pasemos a esta sección aquí con mucho va y éste va a ser realmente similar de nuevo. Sólo vamos a asegurarnos de que los tengamos bien. Entonces, elijamos aquí nuestros logotipos y estos componentes. Y luego pinchemos sobre el vino central y luego la opacidad. Volvamos aquí. Mueve estos 100 píxeles hacia abajo. De acuerdo, entonces por el mi 50. Y haremos lo mismo con estos botones aquí. Y también quiero que se vean como estilos en cascada. Aparecen uno por uno. Y podemos hacer esto de una manera diferente también. Por lo que fue justo en nuestro pasado t aquí solo para tener este marco clave hecho. Entonces podemos seleccionar nuestros logotipos aquí y luego simplemente mover los fotogramas clave. Entonces dejemos así al ABC Lobel. Y en estos, vamos a simplemente moverlos. Pero así, luego el siguiente. Yo sólo estoy haciendo esto por I. Pero, quiero decir, si de verdad quieres ser realmente específico, puedes consumir aquí y luego simplemente siendo literalmente tan pixel perfecto como quieras
ser , yo supongamos. Y luego, por último, se perdió
el beso desmayado. Repite eso. Sí, esto parece Sí, creo que probablemente esto es demasiado menos sólo un poco menos aquí. Igual que esa Lucy otra vez. Caso de esto mas So Así que estoy bien. con eso. Y entonces sólo quiero asegurarme de que la comida o no está en el camino para que puedas ver aquí no se puede vestir a comida ganarse. Entonces, solo movamos esto también. Es solo,
um, um, crear clave desde aquí para centro ¿Por qué? Y vamos a empezar. Y con esos 100 píxeles abajo, y creo que podemos hacerlo para que empiece mucho más tarde, tal vez ahí, Sí, eso es más bonito. A lo mejor hasta renta. Sí. De acuerdo, entonces ahí lo tenemos. Analicemos desde el principio. Son efectos de desplazamiento o peleas de Khobar por cartas. Tarjetas testimoniales son logotipos en el pie reservando grandes que hemos hecho. Terminamos con nuestros efectos de desplazamiento en los próximos videos. Vamos a crear más atractivos interesantes aquí y animaciones van a. Hice las secciones de eso. Podemos dar click aquí e ir al siguiente paso, y luego vamos a crear un años de indirección que pueda dar la vuelta a través de nuestros autos haciendo clic en su flecha. Y entonces sólo vamos a crear curso automático hasta desplazarnos aquí, que cuando nos desplazemos hacia abajo estos aire moviéndonos de lado y podamos verlos Muy bien, genial. Entonces pasemos a los próximos videos
18. Princio: desplazador de interacción (parte 1): De acuerdo, entonces aquí estamos en la siguiente sección. Ahora lo que quería escuchar es que quiero una made thes botón para que al hacer click en él, podamos ver el futuro Paso número dos entrando desde la derecha. Entonces vamos a limpiar aquí. Sólo ropa, las carpetas de las y voy a recortar mis capas aquí. Ahora voy a ir a Voy a volver a esta sección aquí, y lo que quiero hacer primero es crear mi interacción. Entonces vamos a dar click en estos botones y vamos a dar click en tap y duplicar nuestra tarjeta. Y lo primero que habría que hacer sería cambiar thes estados de do activo, seleccionados en estos de seleccionados a actuar. Y luego vamos a crear y tocar para volver a la página anterior. Entonces en este momento, nada realmente está pasando. A veces las cosas pasan. Uh, una cosa que hago cuando esto sucede es que solo hago esto bien. Entonces ahora nada está pasando realmente es que puedes ver aquí, pero empecemos por crear nuestra animación. Entonces Así que vamos a desrecortar nuestra sopa más tarde para que podamos ver qué está pasando aquí. Y este es el futuro paso número dos que quieren cualquier carne. Entonces abramos nuestra línea de tiempo enemiga, y voy a cerrar la línea de tiempo de los conductores por un segundo. Ahora hay algo que quiero mencionar aquí. Como se puede ver aquí, hay dos iconos, por lo que el agua tiene estas tres líneas. Significa que esta animación se ha creado en la línea de tiempo del conductor, y el Wanda tiene thes copo de nieve significa que la animación se ha creado en la línea de
tiempo animada . Ahora, desafortunadamente, si has cambiado una propiedad y la línea de tiempo de los conductores, no
puedes cambiar la misma propiedad en la línea de tiempo de animación. Entonces vamos a ver un ejemplo aquí va a seleccionar thes layer aquí, que representa la animación de estos bloques de imagen entrando desde la derecha, entrando y desvaneciéndose desde la derecha. Entonces vamos a identificarnos aquí. Ahora puedes ver aquí el Centro X y una pastie están siendo controlados por los conductores y porque queremos animar esta sección para que se mueva de derecha a izquierda, básicamente en el eje X. Técnicamente, no
podemos hacerlo porque éstos están controlados por los conductores. Pero aquí hay un pequeño truco que me gusta hacerlo. This propiedad sólo se aplica al grupo, pero no a los elementos dentro. Entonces vamos a seleccionar los elementos dentro y cada otro elemento que vamos a animar. Entonces vamos a seleccionar todos estos también y también vamos a seleccionar el fondo porque me
va a ayudar a alinear los elementos correctamente. 30. Ve. Entonces si vemos aquí ahora, Theo Enemy Timeline ha creado una animación para la propiedad Centre X para ambos elementos. Entonces echemos un vistazo a lo que tenemos. Aquí retrocedemos características del museo que uno pincharía aquí con las características Paso dos.
19. Princio: desplazador de interacción (parte 2): ahora creo que aún podemos hacer esto un poco más suave, y quiero hacerlo para que cuando cambiemos a la función Paso dos, la animación fuera de los componentes dentro, sea como suavizar y suavizar. Y quiero que salgan de la pantalla una por una y aparezcan en la pantalla una por una manera similar, a lo que hemos estado haciendo para las secciones anteriores. Entonces vayamos a esto ahora. Otra cosa que quiero mencionar sobre la línea de tiempo enemiga es que los copos de nieve que están en azul significan que aquí no se puede cambiar la animación. Él básicamente significa que es un componente. Y si quieres cambiar la animación, tienes que cambiar dentro del componente. Entonces, por ejemplo, la tarjeta número uno del del es un componente, así que si hago doble clic en ella, puedo ver mi línea de tiempo aquí, y puedo cambiar bien tesis a cualquier flexión que quiera por extendido tanto como quiera. Pero sólo voy a dejarlo como antes, porque me gusta la forma en que se ve hasta ahora. Entonces volvamos a las cosas. Otra cosa que es importante mencionar aquí es que todas estas capas, Básicamente casi todas las capas tienen una animación aquí, pero no necesariamente significa que sea información que es útil para estos tableros de arte. Por lo que en estos gays sólo estaban preocupados por estos elementos en la pantalla. Por lo que técnicamente podemos seleccionar todas estas animaciones y simplemente eliminarlas haciendo clic. Ya sabes, animación y nada realmente cambia aquí. Entonces sé que puede volverse un poco desordenado aquí y estos usan porque técnicamente, cada vez que duplicamos un a bordo, cada elemento que cambió de principal automáticamente crea una intimidad aquí, a
pesar de que está incluyendo el conductores o sabes algo que hemos cambiado aquí. Entonces sé que podría ser Estás confundiendo aquí, pero tratemos de limpiar esto tanto como podamos. Entonces ya he tenido estos engañados, y voy a empezar por animar los componentes que necesito. Uhm, voy a eliminar básicamente todo lo que tiene aquí el icono del conductor para
que sepa que no necesitamos estos. Está bien, genial. Entonces empecemos a animar nuestros componentes. Empezaremos con este, y lo que sí quiero hacer tenga algún tipo de aparecer uno por querer. Sólo voy a separarlos por 0.2 milisegundos cada uno. Por lo que esto sería seis. Entonces podemos ver aquí cómo se ve, y esto es lo que quiero. Ahora lo siguiente que quiero hacer es cambiar los tés de estilo relajantes. Está bien. Y luego hagamos la característica Paso dos. Entonces ese sería este de aquí, y los voy a separar de nuevo. Mi punto, Z sala Chew Mills Aiken discurso. Está bien. Y realmente no nos importan los antecedentes, así que Ok. No, está funcionando. Ahora cambiemos a Thies para relajarnos. Y a menos que haga que cada puntera de componente dure alrededor de 500 milisegundos aquí. Entonces sobre el 0.50. De acuerdo, Y ahora ajustémonos. Esta es para empezar. A lo mejor alrededor de 0.20. Ahí vas. Entonces juguemos esto volviendo atrás. Y así es como aparecen nuestras características Paso dos por lo que es bastante agradable. A mí me gusta. Y la razón por la que hacer esto que ha visto a estos se relajan es porque estoy viendo estos como un todo. Automatización. Básicamente, esto es ah, toda transición, y yo quería ser fácil de entrar y salir. Por lo que los primeros componentes están viviendo la pantalla para un fácil y los que están llegando son básicamente y está fuera. Y como mencioné en la sección Fury en cuanto a duración, porque esto hay muchos componentes moviéndose en la pantalla, querías ser 500 milisegundos o más en total. Por lo que se juega de nuevo. Sí, eso es lindo. Ahora solo lo voy a dejar así. Voy a pasar a la siguiente sección. Pero por qué no intentas hacer lo mismo para las características Paso uno y básicamente lo que
tendrías que hacer ahí es más o menos lo mismo excepto en reversa y luego ver cómo lo haces y publicado en la sección de proyectos.
20. Princio: tarjetas de interacción: De acuerdo, así que hagamos nuestra próxima interacción aquí. Y lo que quería escuchar es una interacción que muestre a los autos volteando cuando hago clic en este brazo. Entonces, empecemos por cerrar. No son fuerza que no necesitemos. Y voy a recortar mis capas aquí y me voy Teoh, ve a mis conductores también. Encuentra la posición fuera de la siguiente sección, como aquí y luego voy a seleccionar mi flecha y voy a dar click en tap y voy
a duplicar y voy a dar vuelta nombre esta no son tarjeta de tablero ser actual Y Ok, entonces lo primero que quería es que quiero sólo mis tarjetas aquí, Así que voy a aumentar el lado de talla, estaban aquí para que pueda ver correctamente y voy a ganar mi tarjeta A al fondo. Y luego voy a cambiar la escala de carta beat 21 y voy a asegurarme de que esté en línea para carnet a. Entonces puedo cambiar autos e a habilidad 9.9 y carta ocho a escala 80.8. Ahora puedo seleccionar de nuevo el centro comercial. Voy a alinearlos a la parte superior de la tarjeta ser y luego otra vez a la carne de cartulina de fondo. Entonces voy a seleccionar mis dos carros desde abajo y moverlos por 20 píxeles cada uno. Muy bien, Lo siguiente que quería iss quiero cambiar estos selectores aquí. Entonces me voy Teoh, copia estos color. Y esto es sólo 3333 Así que cambia estos dos alondra gris como Genial! Y estos, va a ser lluvia oscura. Y eso es algo que vamos a hacer con las horas. Entonces estos, va a esperarse que vaya a ir 33 y el otro esté bien. Entonces vamos a ver cómo se ve esto suficiente volver a mi anterior tablero de arte y luego
voy a previsualizar mi animación. De acuerdo, así que no a ti. Mala manera puede. Todavía no podemos pulir un poco más. Entonces lo que quiero hacer ahora es que quiero crear algo entre estos dos socios
porque todavía no está claro que estamos volteando las tarjetas. Por lo que sangre haga clic en otro en tracción aquí, va a seleccionar botón mente y haga clic en tap. Voy a duplicar esto ahora voy a quitar el toque anterior que estaría antes, y en su lugar voy a crear una auto transición. Entonces básicamente, significa que cuando hacemos clic en la flecha, se va a ir a estos no se aburren. Y cuando termine la animación aquí se va a ir a estos no son tan aquí. Cuando quiero hacer es cuando selecciono mi tarjeta A y los voy a mover 40 píxeles hacia arriba y 40 píxeles hacia la izquierda. Pero entonces voy a cambiar el ángulo a menos dos. Entonces voy a cambiar mis selectores aquí para ser,
um, um, 40 por ciento alfa en estos 12 Entonces voy a seleccionar mi asiento de tarjeta y cambiar el pasaje A e 20 Ahora te enteras parecer. Y si volvemos a nuestro tablero de arte anterior y jugamos esto, se ve así. Está bien, así que no está mal. Pero aún podemos pulirlo un poco más. Y lo que quiero hacer aquí ahora es que sólo quiero el tiempo va a cerrar el tiempo de los conductores de estas animaciones. Entonces, ¿dónde se estaban cambiando aquí? Es selectores de la Corte A y C y C. Entonces me voy a Teoh, asegúrate de que no voy a cambiar nada aquí, así que voy a quitar eso
y también todo esto, y voy a cambiar todo esto demasiado fácil que voy a ir a la siguiente no son bordo, y yo voy a hacer lo mismo. Excepto que me voy a cambiar con estos también. Por favor. Fuera. De acuerdo, entonces revisemos esto. Sí, no está mal. Genial. Por lo que podemos hacer lo mismo para la próxima guardia. ¿ Qué? ¿ Intentaste hacer eso por tu cuenta y posteaste en la sección de proyectos? Entonces ahora pasemos al siguiente video. Donde estará animando este cochecito y esta va a ser una animación muy, muy sencilla. Simplemente vamos a hacer que se vea para que los testimonios parezcan que se
desplazan automáticamente hacia la izquierda.
21. Princio: desplazamiento automático: Entonces esta es la última sección que vamos a animar. Y antes de llegar a eso, sólo
quiero mostrarles rápidamente que he completado el último auto que necesitábamos para animar . Ahora, si tuvieras la oportunidad de hacer eso por tu cuenta, eso es impresionante. Yo solo quiero mostrarles rápidamente lo que he hecho aquí. Entonces, primer lugar, he renombrado todas mis palabras de arte. Por lo que tarjeta sea transitada. Este es el que estábamos trabajando en el pasado. Tarjeta de video, sea fin. Y entonces he creado dos nuevas guerras de arte aquí. Tan actual Ver transición y carrito. Ver fin. Y si vemos nuestras animaciones aquí para tarjeta ver transición. He ajustado todos estos para facilitar dentro y bifurcación artsy y todo esto para suavizar para
que coincidan con la carta anterior. Está bien, genial. Entonces pasemos ahora a la siguiente sección. Aquí vamos, Teoh, ve a la línea de tiempo del conductor y éste va a ser muy sencillo. Vamos, uh, oro el camino al mar o carros testimoniales. Y voy a mover el pulgar. Uh, 23 cerca de tres cartas como esta. Dos cartas, tres cartas. Me encanta ir a moverlas el 3 de junio tarjetas así y luego ir a mi enemigo oportunamente y ir a encontrar tejido de línea sección nil aquí, tarjetas
testimoniales y este centro. ¿ Por qué es la que queremos conocer? Entonces voy a lograrlo. Voy a extenderlo todo el camino a unos 12 segundos, y voy a cambiar en la animación a Linear. Entonces volvamos al tablero de arte anterior y aún desplazándonos, y podrás ver las tarjetas desplazándose automáticamente por ahí. Genial. Entonces juguemos todo desde el principio. Tenemos nuestro efecto de carga desplácese hacia abajo y tenemos nuestras tarjetas. También tiene todo un efecto para nuestras cartas. Y entonces tenemos un pergamino, er aquí a nuestra característica Paso número dos. Y luego tenemos bonito desplazamiento hacia abajo sección aquí y podemos voltear a través de nuestras tarjetas así. Y entonces no podemos bajar. Sarah, sólo dinero, ALS, y luego ver a nuestros clientes y la comida. Eso es todo. Genial. Entonces pasemos al siguiente video donde vamos a revisar lo que has aprendido, y vamos a revisar cómo guardar tu archivo y exportar tu archivo a dribble o a un
archivo de película , o incluso como programa para cualquier programador u otro diseñadores, y quieres que jueguen con tu prototipo y obtengan algunos comentarios.
22. Conclusión: Muy bien, felicitaciones por completar estas clases y crear tu página de aterrizaje animada. Repasemos lo que has aprendido hasta ahora. En primer lugar, aprendes a hacer animaciones simples para crear un efecto de carga para estas secciones de héroes. Después aprendes a usar controladores para crear efectos de desplazamiento vertical. Entonces cómo trabajar con componentes para crear efectos Khobar. También aprendes a usar la línea de tiempo de animación para crear animaciones suaves y cómo
animar interacciones complejas. El uso de múltiples son aburridos. Por último, has creado un efecto muy simple que parece un caballo infinito sobre erudito. Impresionante. Entonces, cuando estés listo para exportar tu archivo, por favor restablece tu ventana de vista previa y pulsa el control y la letra V para Victor, y empezará a grabar cualquier cosa que hagas en la ventana de vista previa. Así que repasa todo lo que has creado. Y cuando termines, vuelve a hacer
clic en Control V para detener la grabación. Ahora puedes exportar tu archivo como un archivo de video o un archivo de regalo, um, o progreso, pero honestamente, en realidad nunca han usado la última opción. Otra cosa genial que puedes hacer aquí es si vas al archivo y seleccionas app explorada para Mac. Esto creará un archivo de aplicación que sólo puede estar reproduciendo en el Mac, pero puedes compartirlo con desarrolladores o diseñadores con los que estés trabajando. Por lo que ahí lo tienes. Tu tipo porta. Es como impresionante. Entonces esta es mi primera clase, y me encantaría escuchar sus comentarios. Y si quieres, la clase juega compartida con un amigo. Además, no
olvides presentar tu proyecto a la galería y dejar tu opinión. A mí me gustaria geniales mas clases como estas en animación, y tú Yo Y si te gusta escuchar de ellas, click en el Fuller pero gracias.
Bettsina Walkinson, Senior Product Designer
