Adobe XD: animaciones

1. Intro: animaciones de Adobe XD: Oye, los chicos de hoy estarán repasando algunos de los consejos y trucos de wjxt para su función de animación auto , por lo que esto te será útil si quieres usarlo para, como, una prueba de usuario y quieres conseguir un prototipo en un mayor fidelidad y empezar a probar. Las micro interacciones solo hacían que las cosas parecieran más realistas. Esto también será valioso para las presentaciones. Si quieres crear algo así como un carrete chisporroteado o algo que va a conseguir que un cliente realmente emocionado. Eso cualquiera de esos será bueno para esto. Es mejor si tienes algún conocimiento de trabajo del Dhobi X'd aquí también, también, pero lo haré y te despejaré los archivos de inicio y fin. Si no tienes tanta experiencia, no te preocupes. Siempre puedes simplemente ir más despacio y acompañarlo. Um, sí, creo que eso es todo. Entonces, empecemos 2. Registrarse de inicio: animaciones básicas: De acuerdo, Así que para empezar, podemos abrir el archivo de animación de correo caracol, pero he incluido para todo el mundo podría maximizar la pantalla. Entonces hice esto solo para que no tengamos que perder el tiempo diseñando un montón de elementos. Y esto realmente puede ser sobre consejos y trucos de auto enemigo. Lo primero que podemos hacer es arrastrar estos otros tableros de arte abajo porque lo que empezará es la ley y la pantalla aquí mismo. Entonces solo es un fondo rápido de lo que hace auto animate y por qué es tan útil es básicamente solo cambia los elementos entre nuestros tableros. Entonces si hacemos una copia de nuestro tablero de arte iniciar sesión en uno, tenemos este caracol aquí mismo. Y si miras hacia atrás en este aeropuerto, se le llama exactamente lo mismo. Pero si lo movemos así y luego conseguimos un prototipo, el multi acto este en siempre tap transition queríamos dedo del pie para animar en su lugar y usar las duraciones de la columna vertebral fuera. Bien. Aún así, por ir lo anterior haces click, notarás que obtenemos a ese auto enemigo. Y así uno de los mayores beneficios de este programa es que en realidad puedes hacer esto súper rápido y lo podrías hacer con todos los mismos elementos en nuestra pizarra. No tienes que diseñar nada que vamos a eliminar este mes. Por lo que tipo de caminé por algunas animaciones básicas y configuré algunas en este archivo que podrían usarse ya sea para una prueba de usuario o podrían usarse en una presentación. Kallakis es un rial para que la gente se entusiasme con tu trabajo, pero empezaremos a duplicar este aeropuerto una vez más. Y así digamos que queremos que estos elementos se deslicen un poco, justo Cuando alguien sube a la primera pantalla para que podamos bajar esto. Podemos dejar caer el pastie A lo cambiará a cero. Por lo que todo lo que puedes editar sobre estos elementos son cosas que podrían ser auto animadas. Para que puedas hacer un pasado a Podrías hacer frontera. Haces un color de relleno, podrías hacer tamaño. Obtienes cualquier tipo de libertad así. Um, solo somos útiles para recordar si hay algo que no he cubierto aquí, probablemente puedas animarlo auto. Um, en realidad voy a querer que este caracol empiece por aquí. También copio y pego esto porque no quiero caracol para moverme todavía. Entonces, ¿qué pasó a estar ahí mismo en nuestra pizarra? Entonces si haces clic en prototipo, todo el enemigo 0.2 suele ser sobre donde me gusta quedarme con la mayoría de las animaciones. Eso es algo así como un estándar U S. Quieres que sea bastante rápido. Um, la cosa con ellos, si alguna vez se siente demasiado lento, lo más probable es que sea demasiado lento, y tiene que ser más rápido. A mí me gusta quedarme a punto para las cosas. Estoy tratando de ser más dramático de mi go como un segundo. Pero generalmente cualquier tipo de interacción que el usuario va a tener Vas a querer que sea puntual a tal vez 0.0.3 max menos porque no queremos que nadie tenga elementos lentos encendidos. Ahí estás. Eso ganando a la baja apenas 2.2. Entonces que animados como quisiéramos si cerramos esto. De acuerdo, entonces ahora tenemos una animación yendo de Logan a iniciar sesión una. Pero digamos que queremos que se mude a nuestro caracol. Podemos entrar y arrastrar están sentados de espaldas a ese lugar, y vamos a querer animar entre ahí también. Entonces si te darás cuenta, estoy haciendo clic en todo el tablero de arte cuando hago esto de ti toca en cualquier parte del portal de arte transición a la siguiente pantalla. Y parte de eso es que estas interacciones no son nada con lo que el usuario tendría que interactuar , por lo que son más para fines de presentación. Por lo que es un poco más fácil simplemente hacer clic en cualquier parte de la pantalla. que la animación continúe, pero si es algo así como para un botón que entrará más tarde, haré clic en el botón directamente en lugar de tablero de Lahore. Queremos que esto se coma fuera y porque es clavo ahora y es bastante lento queremos que tipo de es un aspecto de branding en realidad va a hacer cuatro segundos ahí mismo de duración. Entonces si jugamos esto cuando hacemos clic, conseguir caracol realmente lento correo borra esto, lo miras desde el principio el tu pequeño seinen y volveremos a hacer clic. De acuerdo, ahora que tenemos eso, podemos ir y agregar elementos de texto aquí 3. Entrada: animación de texto: por lo que editar textos funciona de la misma manera que terminando como una forma y auto enemigo solo se gemela entre el a nuestras fronteras para crear efecto. No lo haremos. Entonces lo que hice ahí fue copiar y pegar ese elemento y vamos a poner un correo aquí. Volvamos este fondo elemental Marseille Key Main y será lo mismo con una contraseña para crear una copia del mismo. Pero es contraseña que no queremos que nadie vea. Entonces, juventud, gran parte de estrellas. Yo estoy en el cargo. Bueno, en su mayoría te va a hacer negro el texto, así que aparece un poco mejor aspecto, Así que podríamos simplemente dejarlo así y dejarlo auto animar en el medio. Está fuera. No querrá que eso sea 2.2. Ya veremos cómo se ve eso. De acuerdo, aparece. No es nada loco. Y también es algo que podrías apenas dio con las transiciones de pantalla regulares. Ni siquiera tendrías que usar auto animate. Podrías usar más, dejar nuestra transición en su lugar, y luego simplemente hacer disolver. Eso te va a dar exactamente el mismo efecto. Pero queremos que esto sea sólo tendremos algo de estilo. Entonces vamos a diseñar. Vamos a crear un rectángulo aquí. Podemos ir en jurado, llenarnos, siempre como apagar se cayó. Cuando creo algo que me refiero a usar máscara, seleccionará estos elementos. Iremos a objeto y haremos una máscara con forma y luego doblaremos rápido. Podemos editar la máscara y la vamos a ralentizar hasta que cubra. El mejor pedacito cubre todo el texto y aquí arriba, te darás cuenta de que acaba de llamarlo masa Grupo Uno Lo haremos es que en realidad vamos a entrar y nombrar animación de correo electrónico. Es importante que hayas nombrado bastante bien a las cosas en esto, porque un Dairy X'd identifica estos elementos por nombre eso Si vas y tienes cosas que se llama Grupo 123 Grupo 1000 es realmente fácil perder la pista sobre lo que está animando, y si lo haces lo suficiente, puedes tener cosas que animaron al mismo tiempo de dos cosas. Se te llama Grupo uno, así que es solo dedo del pie de buena práctica. Siempre nombra las cosas como vas por lo que haremos lo mismo creará un rectángulo para la contraseña, nos apagará de nuevo y todos seleccionarán ambos. Ir a maestros de objetos forma Una no lo cubrió todo el camino. Eso está bien. Haremos doble click en. ¿ Qué es? Y lo mismo grupo de masas Will dio la innovación de contraseñas también vuelven a encender estos dos elementos X de esa manera. Entonces lo que vamos a querer primero es temer que estos nombres de marcador de posición desaparezcan. Estableceremos la capacidad a cero y luego a partir de esta forma de arte y copiaremos y pegaremos. Y una vez que hagamos eso, podemos entrar y abrir esta animación por contraseña. Acercaremos realmente quiz, tal vez aún más. ¿ Qué usaría arrastrará esta caja de nuevo hacia fuera? Vas a hacer lo mismo a la animación de correo electrónico. Es como esa caja, arrástrela hasta el final. Entonces lo que eso va a hacer nos va a dar un efecto bastante sutil como tipo porque esa masa se va a abrir y simplemente hacerlo un poco. Se van más limpios, un poco más divertidos, más cosas pasando, ya sabes, otras íntimas. Está fuera. 0.2 está bien. Y en lugar de hacer tap, lo que vamos a escuchar aquí es el tiempo vamos a mantener el retraso a cero. Entonces básicamente lo que eso significa es, una vez que haces clic, tener esta animación completa. De inmediato se va a alimentar en esta animación para que podamos echar un vistazo a cómo se ve eso . Por lo que desapareció el texto. Y luego conseguimos ese bonito efecto tipo que queríamos. Eso se ve bien por ahora. Vamos a verlo todo desde arriba. Sólo para asegurarme de nuevo de ser golpeado. Eso vuelve a aparecer tap. La enfermera Neil cruza, así que y luego recibimos nuestro texto, Sammy. Entonces lo siguiente que vamos a querer tratar es firmar. 4. Firm de iniciación: estado del botón prensado: por lo que no queremos solo hacer clic en un botón. Queremos que el botón tenga, como, un sake de prensa. Entonces lo primero que podemos hacer para hacer eso es copiar y pegar ese botón de inicio de sesión. Siempre me gusta agregar un borde vamos a usar esto es una máscara en un borde y luego apagar la venta solo para que podamos ver para qué es la máscara. Seguro. Después tomaremos un círculo en su lugar que en medio de un botón se curará en la tos fronteriza . Vamos a deslizar el botón de inicio de sesión por encima de tus labios y luego crearemos una máscara. Entonces tenemos grupo masivo uno, y vamos a seguir adelante y nombrar que lo vamos a nombrar, iniciar sesión. Pero animación, vamos a hacer doble clic y apagar el pasaje A e de ese círculo cero. Ahora que tenemos esa configurada en nuestro log in, copiaremos y pegaremos todo este tablero de arte. Y luego una vez que entremos, podemos abrirnos, agarrarnos los labios. Lo que vamos a hacer es convertir la capacidad a, digamos, 70% y luego vamos a escalar eso hacia arriba Estoy usando el cambio de opción para escalarlo uniformemente hasta que ocupe todo el espacio de botones. ¿ Tienes bien? Ahora se ve bien. Y luego vamos a apurarnos en este tablero de arte y podríamos agarrar un botón de inicio de sesión aquí, y vamos a prototipo en el Pero esta vez, en lugar de tu tablero, ¿golpeas, Aunque íntimo, él está fuera, esta vez se romperá. Normalmente me gusta usar snap para respuestas de botón porque es un poco más. Es un poco más rápido, un poco más activo. Va a pasar bastante rápido. Entonces es agradable dar un poco de llamarada, y sucede. Hacer un poco más obvio que algo sí respondió así. Y luego iremos a la parte superior de la página de inicio de sesión y lo conectaremos. Teoh nuestra página de la bandeja de entrada, agarra todo eso. Y otra vez aquí, vamos a hacer tiempo. ¿ Quiere que esto suceda realmente rápido? En realidad, no vamos a animar esto, vamos a transitar. El motivo por el que estamos haciendo eso es porque no tiene sentido animar el honor, animar algo aquí si es una transición de pantalla tan masiva. Entonces solo apunta a que es divertido. Ya veremos cómo se ve y lo veremos una vez más. De qué uso el teclado aquí es para volver, y estamos consiguiendo un bastante bonito pero en respuesta ahí. Entonces la clave de esto es que todo se trata de la sutileza de estas animaciones. Eso es lo que llama la atención de la gente. Por lo que siempre es bueno tener ojo para el detalle, como Francia, ya que esta animación es un círculo que escalando hacia arriba en lugar de sólo una.Pero ponemos encima de esto que cambió de colores y luego en realidad sólo cambia la calidad de la animación. No es solo que no es solo una transición, es algo que tiene un poco más de profundidad y movimiento que lo hace más interesante, sino que para el siguiente paso comenzará a trabajar en la bandeja de entrada. 5. Caja de entraña: Repetición y Scrolling: De acuerdo, Entonces una vez que lleguemos a nuestra pantalla de bandeja de entrada, notarás que aquí tenemos estos correos ficticios que en realidad no tienen nombres, tema o tiempo en ellos. Entonces lo que podemos dio es hacer click en este elemento y luego ir a repetir cuadrícula. Y una vez que arrastramos eso hacia abajo, obviamente estás consiguiendo un montón más de correos electrónicos ficticios. Pero el problema es, simplemente dicen, nombre, nombre, sujeto en el tiempo, que se ve terrible. Entonces cuando el enchufe fresco en que realmente me encanta y sugeriría que todos prueban es repetidor justo aquí. Entonces si tienes una cuadrícula de repetición que te permite poner, como texto ficticio y otros elementos que puedes reutilizar en toda la cuadrícula Así que si hacemos click en eso y luego hacemos clic en repetidor Así obtenemos todas estas opciones y te darás cuenta en esta gota menú abajo, se obtienen los elementos que estaban en Europea cred. Por lo que tenemos nombre, tiempo de sujeto y camino la línea y el rectángulo. Eso es solo el círculo de selección a la izquierda, así que empezaremos con nombre. Entonces si obtenemos un desplegable de categoría y vamos a nombre y queremos nombre y apellido, vamos a aplicar. Entonces cierra eso solo para ver qué pasó. Entonces nos dieron nombres poblando todos abiertos su valor de nombre. Llámalos. Y si doblamos rápido en solo una nota rápida si notarás que el cuadro de texto aquí es en realidad mucho más grande que el nombre lo cual es una buena práctica cuando estás configurando una cuadrícula de repetición que tienes texto ficticio él. Porque si fuera a hacer esto a señalar, realmente lo tiraría si el nombre fuera demasiado largo y empezaría a tropezar estos otros cuadros de cuadro de texto. Disculpe, Ver ahí alguna nueva búsqueda de vuelta. Por lo que siempre es útil hacer impuesto de área seleccionando lo mismo con tema. Por lo que usamos el texto de área para llegar tan lejos como queramos, y el tiempo en realidad escriben mucho tiempo y luego le damos algo de espacio en caso de que los tiempos un poco más largos de lo que planeamos para ese solo equipo para que podamos volver a hacer clic, volver a entrar repetidor. En este tiempo, queremos un tema, la categoría. Por lo que hay muchas cosas que puedes elegir desde aquí. Um, en realidad, una de las mejores categorías. Creo que para correos electrónicos, Internet y solo puedes hacer clic en frase aquí abajo. Eso será como al azar. Um, el desarrollo alaba, pero creo que es bastante útil para una frase de correo electrónico que podemos aplicar a eso. Y vemos que tenemos ese pop allá abajo. Pero también podemos ir al tiempo mientras estamos aquí. Vuelve a la lista Hora de citas y puedes seleccionar el periodo de fecha y hora, por lo que vamos a pegar tiempo. Um, periodos de tiempo recientes. Bien. Compraremos ropa. Contestar. Ahora. Tenemos nombres sujetos en el tiempo todo bastante rápido, y se extendió a estos elementos aquí abajo. Pero como tenemos todos estos elementos aquí abajo, vamos a querer desplazar un oleaje para que puedas hacer click en ese su tablero y arrastrado hacia abajo, y vamos a ir justo por ahí. Y una cosa te darás cuenta. Entonces si vamos y jugaríamos aquí en mi scroll, tenemos este elemento que se está moviendo con él, y no queremos que la acción flotante. Pero siempre debe arreglarse. Entonces cerraremos, sin embargo, y haremos click y queremos volver a pasar a esta capa siendo tú. Entonces, si aceleras los elementos y obtienes un prototipo, podemos fijar posición al desplazarte y luego acelerado Te juego rápido y solo una nota rápida a ti normalmente tendría que hacer eso con estos otros elementos también. Pero justo en este archivo, estos fueron configurados para ser posición fija al desplazarse ya. Por lo que tipo de realmente rápido con la grilla de repetición y repetidor el enchufe en. En realidad obtenemos una alimentación de correo electrónico bastante alta fidelidad bastante rápidamente con un pergamino, que, como se puede imaginar entrar y escribir texto ficticio, y todo esto sería en realidad una molestia bastante grande. Por lo que es agradable poder hacer eso rápidamente y tener algo que se vea bastante realista. 6. En: Repetición de cuadrícula y los estados y botones: Entonces ahora lo que podemos hacer es mover estos otros puertos, y lo siguiente hará que sean ideas fuera del camino es en realidad la bandeja de entrada de correo enviado, para que podamos copiar y pegar esto. Hazlo exactamente igual otra vez. Pero esta vez vamos a querer que este ícono resalte en lugar de nuestro icono en caja para que podamos cambiar de opción y hacer esto un poco más grande. Y quiero que el color cambie bien, así que tenemos que llenar make de ese color azul. Queremos este ícono ya que no fueron seleccionados aquí para volver a ese gris. Yo también quería ser un poco pequeño aquí, también, también, ahí mismo hasta que se alineara con esos otros elementos. Entonces lo que podemos hacer es rápido en este elemento. Consigue un prototipo jag esto sobre transición. Auto Enemigo. Está fuera. columna vertebral 0.2 está bien. Vamos a revisar para ver cómo se ve eso. Está bien. Se ve bien. Ese tipo anima de la manera que quieres, pero hay un par de problemas. Uno en el que no podemos hacer clic atrás. Dos. Todos son los mismos correos electrónicos e información, que no se ve muy realista, y todavía dice en dólares Woops, vamos a cambiar esto. Yo quiero que diga enviado. Y así si hacemos clic y seleccionamos nuestra cuadrícula de repetición, en realidad podemos volver a entrar en nuestro repetidor de enchufe y menú abierto, y podemos cambiar estas cosas para arriba así seleccionaremos el nombre. Vamos a ir termina como nombre otra vez. Es como, primero y perdió mucho su teléfono tanto. Y así eso va a cambiar todos esos elementos, y haremos lo mismo para el tema también. Entonces me dieron un Internet, una frase aplicar que va a cambiar esos. Y luego lo último es actualizar también los tiempos que me funciona. Actualizar los tiempos. Está bien, bien. Y si ves que comparas entre estos dos son puertos. Ellos sí cambiaron, nunca las cosas se veían bien. Y en realidad vamos a querer poder volver a nuestra bandeja de entrada para que podamos poner depredador apretado arrastre que sobre auto animate. Él está Eso está bien. Entonces ahora cuando vamos, bueno, bueno, nos cambiaron el nombre un centavo y también tenemos todo tipo de correos electrónicos enviados diferentes solo para que se vea un poco más realista, como si realmente estuvieras hablando alternando entre la bandeja de entrada y envío de meses. Entonces lo siguiente que podemos hacer es prototipo. Cómo sería un nuevo correo electrónico o como una nueva composición de correo electrónico. Y para hacer eso, vamos a necesitar hacer clic en este botón más para que salga la nueva ventana de correo electrónico. 7. Componer un nuevo correo electrónico: superposición y los que se topes y botones: He incluido que tu ventana de email por aquí, pero tendremos que tener nuestra respuesta de botón antes de llegar a ella. Entonces copiar y pegar. En realidad, antes de copiar pegar, vamos a seguir adelante y añadir esa máscara para crear esa respuesta de botón. Por lo que una copia y pega esto gire la frontera en el relleno a través de sombra Oficina. Bueno, entonces ahora que tenemos ese contorno, crea un círculo en el círculo medio para no ser borde en un Phil blanco, y queremos que esto esté arriba, seleccionaremos a Ben para estos elementos. Vamos a crear una máscara doble rápido aquí, y nos aseguraremos de que esta sea tu capacidad por ciento porque no queremos que aparezca cuando el botón no está equipado y de nuevo se llama dominio de uno. Las cuotas de Opel llamarán a esta animación de botón de acción flotante, y ahora podemos copiar y pegar eso. Um, ese error que el alto casi se comete hay, um, tienes que recordar que para auto animar algo, la animación tiene que existir en el primer tablero de arte así como en el segundo, por lo que siempre es bueno para entrar y configurarlo en el primero y luego copiar y pegar. De esa manera, los nombres siempre van a ser los mismos. Porque si comienzas a copiar y pegar y crear nuevas animaciones más tarde por el camino, el nombre y puede convertirse en todo un tema um, voy a asegurarte de que todo deletreado exactamente a la letra. Correcto. Abriremos eso, iremos a la Ellipse y al museo en, y queríamos voltear a un 70% de nuevo para obtener esa respuesta rápida y luego, bueno, escalarla. Y solo estoy sosteniendo cambio de opción para escalar uniformemente ahí desde el centro necesita ir más culto, y así vamos a hacer prototipos. Entonces cuando haces clic en esto, quieres que aparezca esta respuesta y te enganches porque es un botón de botón Estado T fue divertido. Auto enemigo Y no lo queremos sólo para auto enemigo. Queremos nuestro nuevo mensaje cuando vayan a subir también. Entonces lo que podemos hacer aquí este dragón sobre un buen momento. Lo que hice ahí fue solo seleccionar el arte en topless vertido. No queremos este auto animado. En realidad lo vamos a usar hasta tarde aquí. Entonces una de las razones por las que una de las caídas del auto animate es que todo tiene que estar en este original tablero de arte. Pero para una superposición de símbolos, suele ser mejor seguir adelante y usar uno de sus presets para deslizarse. Deslízate arriba, abajo. izquierda a derecha suelen ser bastante rápidos y fáciles de usar, y mantiene todo separado en el o tablero porque no se convierte en una molestia cuando tienes elementos grandes como este moviéndose en el aeropuerto original. Entonces si puedes, siempre trato de usar cada pierna solo para mantener las cosas un poco limpias. Y queríamos hacerlo. Está fuera. 0.2 está bien. A ver cómo se ve eso. Daremos click aquí. Obtenemos nuestra respuesta y la ventana para subir. Pruébalo una vez más. Se ve bien. Entonces después de que tengamos nuestro nuevo mensaje un día para subir, sq esto más porque me gusta que estén 70 separados. Exactamente impresionante. Entonces lo siguiente que podemos hacer es conseguir que surja nuestro menú 8. Ajustes: deslizador: por lo que han incluido ese menú para nosotros aquí mismo. Entonces si repasamos la bandeja de entrada y ¿qué es Will Dio? En realidad vamos a copiar y pegar todo este puerto de arte porque no vamos a estar usando este menú como una superposición. Y te explicaré por qué en un segundo. Por lo que copiamos y pegamos toda la capa de bandeja de entrada o tablero de arte ahí. Disculpe? Entonces lo que vamos a dio es tomar ajustes de la bandeja de entrada. En realidad, solo copia y pega eso encima. Creo que tenemos algunos elementos de un par escondidos ahí atrás. Sí. Tiempos escondidos ahí atrás. Por lo que sólo podemos borrar eso. Entonces una copia y pega este menú arriba por aquí, lo arrastraremos sobre la posición correcta porque queremos subir cuando tengamos este ícono. Entonces eso es bueno. Simplemente conéctate eso. Entonces nos dieron un retroceso bastante apretado a nuestra bandeja de entrada. Ahí no. Entonces queremos ahí en su lugar. Transición superior disuelta sin punto a todo. Se ve tirado ahí. Algo que debes saber cada vez que haces drag en prototipo. Recuerda lo último que hiciste. Um, así que lo último que hicimos fue una transición, así que va a recordar eso, pero si lo hicimos auto animamos y cambiamos la hora que recuerdas lo que sea que la última seleccionada soping Ellen, hiciste clic en el engranaje y luego conseguimos que salga este menú que está funcionando como te lo queremos. Pero no sólo queremos que suban en ti. Queremos interactuar con la densidad de visualización aquí. Entonces lo que podemos hacer es copiar y pegar de nuevo este aeropuerto, y luego vamos a crear un deslizador para la densidad de visualización. Por lo que volveremos a nuestra ciudad de diseño, levantaremos un rectángulo, lo arrastraremos sobre la sombra de gota. Si notan que hay, como, una pequeña superposición de sombra de gota porque estos elementos en la parte superior, um, realidad vamos a arreglar eso con una máscara porque en realidad no está encima de ese menú. Por lo que Phil apagó se cayó y luego nos arrastró hasta usa una máscara. Y lo que eso va a hacer es simplemente sacar ese elemento drop shadow de este menú porque es un poco distraído tenerlo ahí. Porque esto realmente es igual que me deslice de la densidad de pantalla. Entonces podemos crear un rectángulo aquí. Este va a ser el fondo de nuestro slider que era. Toma este radio trayendo y luego lo cambiaremos a esto. Gray dijo: Ese es nuestro fondo deslizante. También puedes crear un círculo aquí, y este va a ser nuestro elemento deslizante. Este tamaño debe estar bien. Si podemos encontrar el centro en algún lugar, entonces realmente queremos que esto sea azul. Entonces voy a copiar y pegar este año de texto de visualización en lugar de escribir algo nuevo. Entonces será en el mismo pensamiento. Todo. Nos vamos a llevar uno menos. En realidad voy a conseguir un punto aquí. Creo que apuntar a mí es un poco más fácil de arrastrar por ahí. Absolutamente. Eres más fácil arrastrar elementos y remodelar las cosas alrededor de 14. Encuentra una copia y pega eso una vez más y luego más. Entonces lo que estamos haciendo es que estamos creando un slider aquí que va a cambiar la densidad de visualización de nuestros correos electrónicos cada vez más no demasiado complicado ahí. Entonces cómo vamos a hacer eso es, una vez que tengamos nuestra sidra creada, podemos seguir adelante y conectar esto. Entonces si vamos la densidad de visualización, esto surgirá y no es demasiado Oh, venga apposite transición. Podemos simplemente usar punto de disolver para ti está bien. para que podamos comprobar sólo para asegurarnos de que eso se rompe. Eso se ve divertido. Y una vez que hagamos eso, vamos a copiar y pegar esta pizarra de arte una vez más. Lo que queremos es ver cómo sería este nuestro tablero si hay menos densidad en nuestro humano. Entonces, ¿qué radios? Vamos a seleccionar el botón deslizante, Tengo un prototipo de dragón sobre. Vamos a ir a Auto Enemy, en realidad, lo que vamos a hacer cero, dijeron un toque que vamos a hacer drag. En realidad, cuando arrastras rápido, ni siquiera obtienes la opción. Teoh hace un tiempo porque es lo que sea la respuesta del dragón del ratón. Entonces si entramos y miramos esto en las noticias, podemos arrastrar este elemento a la izquierda o de vuelta a la derecha. Entonces estos son los límites originales que establecemos para auto íntimo, y eso es solo dejarnos arrastrarlo en lugar de hacer como una animación de tap Pequeño cerrar eso. Pero si te das cuenta cuando estamos arrastrando esto, no pasaba nada. Entonces lo que podemos dio es entrar y cambiar la densidad de visualización de nuestro correo electrónico editando son repetir cred. Por lo que este es uno de los aspectos geniales de tener cuadrículas repetidas intactas es que puedes hacer algunas cosas bastante locas como esta realmente fácilmente, y debido a que queremos menos densidad en nuestro correo para este ejemplo, podemos sacarlo a por ahí y luego doble clic terminó la cuadrícula de repetición, y vamos a mover esta línea un poco hacia abajo solo para espaciarla un poco más realista. Y entonces podemos bajar esto. Un poco un oleaje. Simplemente deja caer la repetición Bueno hacia abajo, sólo un pelo dicho. Se basa más en base a este top time. Y como esta es la misma grilla de repetición que este tablero de arte, se auto enemigo cuando arrastremos este deslizador. Entonces este es uno de los beneficios sobre auto y yo en general y usarlo con una función de arrastre . Podrías hacer algo así bastante rápido sin tener que cambiar nada ni hacer nada de fantasía en otro programa. Puedes hacerlo todo con elementos en su tablero de arte, y en realidad vamos a deshacernos de estos manuales como todo el tablero de arte aquí, ir a Predator y arrastrar esto de nuevo al primer tablero de inicio. Haremos transición de tap. Ahí hay todo punto. Entonces ahora, si entramos podríamos mostrar densidad, usar su deslizador. Podríamos volver a salir a ese menú principal de la bandeja de entrada. 9. Recibir un nuevo correo electrónico: animación de Notificación: Por lo que lo siguiente que haremos es simular recibir un nuevo correo este fin de semana. Copia y pega esta bandeja de entrada original. Y así vamos a querer que ese nuevo correo electrónico aparezca en la parte superior de esta cuadrícula de repetición para que en realidad podamos arrastrar esto hacia abajo para olvidarnos del mismo espacio, comenzar por un correo electrónico, agarrar un rectángulo y luego arrastrarlo allí. Lo que podemos hacer es simplemente seguir adelante y extender la forma todo el camino hacia un lado, y es un nuevo correo electrónico, así que lo haremos de un color diferente como el azul y queremos elementos de texto para ello para que solo podamos ir y duplicar, Click dijo. Podemos copiar y pegar aquí un. Seleccione el ritmo de la cuadrícula de repetición fuera de ella. Arrástrelo de esa manera. Tenemos texto que es lo mismo que teorizados estos correos electrónicos. Haremos lo mismo para el círculo selector aquí. Copiar y pegar de Seleccione una rejilla de repetición basada dragón arriba waken. Maquina tu nombre para este primer correo solo para que nos mantengamos a lo largo de las líneas de mantenerlo luciendo bastante riel y ajustaremos el tiempo a. Entonces ahora que tenemos nuestro nuevo correo electrónico aparece ahí en realidad va a soltar esta amenidad le mandas cambiar corchete izquierdo para dejarlo caer todo el camino hacia abajo solo para asegurarnos de que estamos detrás de todos esos elementos. Y en realidad nos falta una línea aquí. Y eso se debe a que la línea sólo estaba en la parte inferior y repiten grilla. Entonces voy a copiar y pegar esa línea para la parte superior y reubicarla debajo. Ahí solo conseguimos el resto. Ese soporte de correo electrónico. Aquí vamos. De acuerdo, entonces tenemos un nuevo email configurado y lo que vamos a hacer es agrupar todos estos elementos de esa manera, podemos ajustarlos así. Controlar el cambio de nombre, este nuevo correo electrónico. Entonces lo que podemos dio es copiar y pegar este grupo, volver a nuestra bandeja de entrada original pegada, y vamos a encogerlo rápido. Ten en cuenta si notarás cuándo lo estás encogiendo aquí. Este texto no se está encogiendo. O bien. En realidad puedes ajustar eso, como volver a entrar y cambiar estos dos puntos en lugar de texto de área y la razón que estará bien para estas instancias. No estamos poniendo ningún elemento repetidor en estos campos, así que está bien si usamos texto puntual en ellos y básicamente Todo eso significa es que van a escalar cuando escalemos todo el grupo en lugar de simplemente mantener la misma área como sería para el texto de área. Copia y pega eso aquí arriba y minimizaremos. Bueno, realidad, solo ve en doble recogido estos minimizando lo poco Es lo que Ellos no tienen que ser perfectos porque vamos a apagar esta opacidad de todos modos. Pero sí necesitan ser bastante pequeños. Entonces no hay raro para la vuelta. Cuando sí hagamos la animación, así va a cambiar el todo Un pastie su 20 me aseguraré de hacer lo mismo a todo el grupo ahí mismo en el texto fue seleccionado. Se parece a todo el grupo. Dios, que un cero fascinante. Por lo que queremos que esto también se anime automáticamente, por lo que vamos a acelerar en todo el tablero de arte y arrastrar también seleccionar en lugar de hacer como tap o time. En realidad vamos a usar teclas esta vez, así que selecciona que lo que te permita hacer es usar cualquier tecla de tu teclado para activar la animación. Entonces si hacemos clic aquí, podemos presionar la flecha abajo en un letrero que queremos la transición a auto enemigo y él está fuera apuntando a ti está bien. Entonces una de las razones por las que usar el teclado es útil aquí es que te permite controlar cuándo puedes activar animaciones y no se ve tan torpe es como hacer clic en algún lugar fuera de la página para activar la animación. Y también es útil. Si alguna vez quieres hacer un video de captura de pantalla, solo puedes usar las teclas del teclado para activar algunas de estas animaciones. Entonces de tu ratón y en el marco, Vamos a ver. Entonces estamos en la bandeja de entrada principal presionaremos la tecla abajo. Consigue que ese nuevo correo electrónico aparezca ahí mismo. 10. Recibir un nuevo Email: micción: por lo que no sólo queremos que aparezca un nuevo correo electrónico, aunque podemos agregarle un poco de estilo. Hagamos que esta campana le haga algo porque estamos consiguiendo las Vacaciones Unidas que vamos a querer algunas. Alguna respuesta aquí. Un oleaje, por lo que crearemos otro círculo un poco más pequeño. Nos desharemos igual que conseguimos un nuevo símbolo de identificación ahí. Copiaremos y pegaremos eso siempre. Y recuerda, este es el elemento de inicio. Entonces esta es la página principal que vamos a querer que eso escale. Por lo que queremos hacerla pequeña y apagar la capacidad. A menos que sea un Labios cinco. Adelante y cambiemos esa alarma de campana, supongo. Alarmas. Mejor nombre para ella alarma, y tengo que volver y recordar cambiarlo en la pantalla también. Entonces vamos a revisar para ver cómo se ve eso, para que eso salga un oleaje. Es un bonito toque de agregar, pero digamos que queremos hacer un poco más y agregar un poco de sutileza y realmente meternos en, como ver una micro interacción para que realmente podamos eliminar esto desde aquí. Y así digamos que queremos que suene la campana antes de que aparezca la notificación roja, así que en realidad podemos hacer es entrar y rotar. Elemento servirá. Gírala a la izquierda unos 45 grados y luego iremos por aquí. Vamos a duplicar este aeropuerto una vez más, y lo borraremos desde aquí, y luego iremos a la derecha 45 grados. Y entonces es cuando terminará estando en el centro. Y debido a que he cambiado estos tableros de arte y he borrado este elemento, en realidad lo voy a volver a agregar a éste, reducirlo, cambiar la capacidad a cero. El motivo por el que lo hice de esa manera es porque este es el tablero de arte en el que empiezan a aparecer estos elementos . Originalmente, era éste, pero como le agregamos algunos, podemos dormir ese momento. Así que vamos a asegurarnos de que todo esté conectado bastante apretado en un atajo fresco. Aquí está el comando comprimido A para ver todos los puntos que conectaron los prototipos. Es útil comprobar si olvidaste algo o no tenías algo conectado, te puede ahorrar un poco de tiempo en lugar de intentar dar la vuelta y hacer clic en elementos para ver lo que recordabas. No recordaba animado. Por lo que mantente alejado de la flecha abajo activará esto. Y así queremos que esta pizarra de arte vaya automáticamente a la siguiente posición de Bell por lo que firmaremos tiempo. Cero segundos 0.2. Bueno, en realidad, haz este 0.4. Y la razón que es porque esto en realidad se está moviendo 90 grados. Entonces de este tablero de arte, éste, eran 45. Pero debido a que estás balanceando por ese arte de fondo, esto en realidad está moviendo 90. Entonces para mantener ese uniforme de aspecto hará en realidad 0.42 que se aburren. Y luego cuando tengamos un suéter, haremos punto para que revisen para ver cómo se ve eso. Y de nuevo vamos a golpear el abajo, seguir trabajando y esto hasta conseguir esa pequeña animación de balanceo ahí mismo en la parte superior. Y también puedes jugar con lo que realmente están haciendo las animaciones entre órdenes de arte . Cuando estás creando un poco de micro e interacciones como esta, uso aquí afuera, que en realidad funciona bien porque parece que la campana tiene un poco de show interno debería tipo de ralentización cuando golpea a los Ozarks, pero también podrías jugar con, como, como, chasquear a Artie y él está fuera y realmente simplemente jugar alrededor y ver qué se ve mejor porque mucho animar de esta manera es algo que se siente bien. Sé que eso es lo de la diseñadora de Miss cliché para decir. Pero si algo alguna vez se siente lento o se siente torpe, lo más probable es que vaya a parecer muy torpe y muy lento para cualquiera que lo use. Por lo que siempre es bueno tener eso en mente y jugar con las cosas hasta que se sientan bien . Entonces podemos ir desde arriba para sellar nuestras animaciones una vez más y para asegurarnos de que todo esté conectado para que podamos. Rápido, podríamos eso para subir Norse Neil a deslizarse a través cuando nos registramos bien o enviamos correos electrónicos. Escribe un nuevo correo electrónico estaba ahí y se muestran densidad y luego presiona ese teclado T para ver nuestra nueva animación pop up en Awesome. Entonces parece que todo está funcionando ahí. Entonces eso es todo para este tipo básico de consejos y trucos de auto enemigo 11. Outro: para que eso envuelve a esta clase. Por favor siéntete libre de probar el ejercicio de clase y dejar algunas opiniones y comentarios. Hazme saber qué funciona. Gracias.