Cómo animar un boceto en UI usando Principle

1. Acerca de la clase: Yo estoy haciendo esto por ti. Yo diseñador radicado en Kenia hoy voy a estar llevándote a través de cómo a cualquier hecho un boceto mediante el uso del principio Slash es el más adecuado para diseñadores que dibujaron gota ahí sabio y quieren llevarlos hasta el siguiente nivel. Cosas malas en movimiento e interacción. No hay experiencias de freír. Principio negro para tomar esta clase. Lo único que vas a necesitar hacer es dirigirte a este sitio web de formato de principio abajo para ver en el aula. 2. Prepararte para la clase: materiales: para poder seguirlo fácilmente, te recomiendo descargar el juez de expedientes adjunto asignado en la sección de tu proyecto de esta clase. Instala los dos tipos de formularios y abre el archivo de boceto para ser lo que estoy viendo en la pantalla. Esto es opcional, por supuesto. Su más que libre de usar su propio boceto para tan completa divulgación el boceto original valles del señor Stefan y se puso a disposición de nosotros en problemas. Me gustó porque me pareció bastante básico para demostrar los fundamentos de la animación usando el principio arriba. Por lo que al ver la siguiente clase, te explicamos cómo preparar archivos de boceto para exportarlos a principio. 3. Preparar recursos para la importación a principio: Entonces antes de importar nuestro boceto cae en principal ahí un par de cosas que queremos clavar en nuestra sección de bocetos. Y lo primero es el nombre de la salida. Te vas a dejar manchas de sangre Eso tiene sentido el frío mío aquí. Visto centro. Entonces si tienes un tú volé en fluido de abordaje como al enemigo podría querer tener todas las pantallas que tratan con eso en una pantallas ascendentes un trato con apuntarse en otra bota y así sucesivamente y así sucesivamente. Otra cosa es la agrupación de nuestras embarcaciones que desea importar. Ten eso en una sola página. Ahora repite eso otra vez. Asegurarse de que cuenta con todos los aeropuertos que desea importar. Dos principales en una página. Esto es realmente importante y te ahorrará una tonelada de tiempo tirando de tu cabello. Asegurar que todos ellos yo en una sola página. Si tienes, digamos, una página, otra página extra aquí, tienes una página para, y tienes otra salida aquí. No se importará si la página en ella seleccionó las manzanas en la página una de las que se importarán en principio. Otra cosa querría arrodillarse. ¿ Esto asegura que tengas las escenas que se van a animar en agrupaciones separadas dentro de la salida? Entonces, ¿tienes estado regional en su propia agrupación tu estado de transición en su propio grupo y tu estado final en su propio grupo? Esto hará que sea más fácil cuando importe sus archivos en principio. Por favor, por favor, organice sus activos así para ahorrarse tiempo en el futuro. Otra cosa es esto Quizás quieras considerar diseñar todos los estados de tu animación . Ahora, en la medida en que sólo podemos tener el estado original y tipo de visualizar cómo se verá el final . Siempre nos dará una ventaja si tenemos nuestros estados de transición y nuestros estados finales con Así que una cosa que debes entender es la transición y el estado final definitivamente te dará una ventaja. No se requieren. También puede tener su estado regional e importar eso. Entonces ve a hacer el resto en principio. Pero después, si los dibujas en voz alta, sufren un bonito punto de referencia. lo final de lo que vamos a caminar es de esto que vas a necesitar nombrar tus bienes manera sensata de una manera que vas a poder referirte a ellos. En principio, normalmente recomiendo hacer esto. Basta con ponerlos de la misma manera que los llamarías en la vida real. Cuando conseguí los activos al principio, se veían así. Por lo que grupo a oval, más importado Leah. Si importamos esto en principio, no hay forma de saber qué. Pero si les renombramos como esta acción pero en la respuesta Pero en el botón compartir como la mantequilla boda en lugar de tener algo al azar viendo cómo se llama aquí el Buda? Este rectángulo frío siete rectángulo siete no va a cabaña cuando importamos a principio . Nos va a dar un momento difícil. Entonces una cosa que quieres asegurar es que tus estados y cualquier elemento dentro de un determinado nombres sensatos, como los llamas en la vida real. Entonces para los de ustedes no saben que los expedientes antes y los siguientes a lo largo, me gustaría que hicieran algo pequeño con respecto a nombrarme. Se ve la carpeta llamada Grupo Just Renombrar a todas y cada una de las carpetas allí demasiado. El grupo estatal de Transición. Es muy fácil, y si te encuentras con algún problema. Siempre puedes comentar en la sección de proyectos a continuación, y estaré listo para ayudarte con esos consejos. Eso es cumplir con la siguiente lección donde importamos esta captura mientras que en príncipes. 4. Importar al principio: Hola chicos. Bienvenido de nuevo a la clase. Por lo que hoy vamos a tratar de cómo importar este archivo de boceto en particular en principio. Y lo primero que vamos a hacer es abrir a nuestro director. Sí. Entonces lo primero que debes ver aquí es dejarme solo minimizar eso es un no bueno. Se obtiene un fueraborda en blanco. Tienes una pantalla previa por aquí. Entonces cualquier cosa que hagas aquí, podrás previsualizar aquí. La pantalla anterior también viene con un retorno al inicio de la animación o yendo a la primera salida. Entonces si tienes C A no sería entonces presionar comandó el duplicar. Si estás en esto hacia arriba y los has ligado juntos, puedes ver eso y él lo lleva de vuelta a su primer estado. La otra cosa emitida nota es principal te da la capacidad de trabajar con formas. Eso es un rectángulo. Y como puedes ver, aparece él en un adelanto. Y si solo lo mueves, algo que sí anotas es el Atwood actual que seleccionó ISO uno, que actualmente se encuentra en el cuadro de vista previa. Entonces, en caso de que alguna vez tengas un escenario donde no estés viendo algo que acabas de editar este lado de la pantalla que aparece aquí. Sólo tienes que saber que probablemente no has seleccionado que yo top lo haría. Para que puedas trabajar con formas. Se puede trabajar con texto. No obstante, texto no recomendamos que trabajes con texto si quieres un texto de imagen. Así que incluso un escenario en el texto de anime Simplemente usa algo como Adobe after effects. Principal no maneja animaciones de texto tan bien de mi experiencia pasada y también de la experiencia de la comunidad principal. Entonces usa algo así como después de efectos para eso. Simplemente borraré eso. Además, realmente eso hace eso. Por lo que solo tienes una salida. Entonces, para importar un archivo del sketch, solo patea la importación y qué pasa ¿ya pre selecciona el archivo que está abierto? Y más específicamente, si volvemos a ah, sketch mile, en realidad va a seleccionar este archivo y va a importar esta página. Eso está en el tutorial anterior. Yo digo que en caso de que si tienes algún barco de arte que necesite importar tenerlos en una sola página. Entonces lo que vamos a hacer es retroceder en principio. ¿ Qué pasa es esto? Entonces este valor de dos x es lo que es ciencia de calidad ¿querías renderizar los restaurantes? Leah's Así que una de las cosas que sí necesitas entender es que cuando sí importas tus activos a principio, se pasteurizan, lo que significa que cualquier cosa que fuera un texto en boceto ahora se convierte en una imagen y no tienes ninguna imágenes vectoriales. En realidad, eso es lo que pasa. No tienes ninguna imagen vectorial en principio, aparte de los que dicen, si seleccionas un rectal, esa será una imagen vectorial dentro de principio. Pero si lo traes de otra parte, eso será el descanso despertado. Ahora te está diciendo la calidad a la que quería una X es para la visualización normal, y prefiero los trabajos de dedo para que ese tema particular de píxel sea más adecuado para la dirección en esto, por favor. Pero en realidad me emociona antes de que me gusta la calidad que puedes usar. Tres. Ejecutar una playa más detalle desde boceto, pero para mí a x solo lo hace bien. Así que vamos a dar click a nuestra importación. Entonces si acabo de trasladar eso al centro, por lo que en el momento que todos ellos han sido importados a uno a bordo, todos ellos van a aparecer en la pantalla anterior. Si sólo queremos vender comando de prensa como turno electoralmente como selecciono y voy a mover estos hacen fuera de la salida dice se puede ver que desapareció y luego voy a limpiar en la escena configurada al alza y voy a redimensionar este bien. Entonces, ¿se va a ver aquí? Tenemos un Fitch guapa por ahí. Entonces solo para confirmar lo que dije, si miras este activo en particular, como puedes ver, no podemos editarlo. Ha sido vestida, levantada su no director. Esto lo mismo el efecto de la tía abuela, y se puede ver de dónde entra el buen nombre. Entonces no estamos realmente, realmente confundidos. Entonces con eso, tenemos nuestro horario importante en principio y puedes previsualizarlo por aquí. Aprendiste a importar tu archivo de boceto en principal, cómo crear un no presagio cómo usar la crema anterior. Y vamos a empezar a trabajar en cómo animar esta batalla en particular para parecerse a algo cercano a nuestro estado final. Te veré en el próximo último 5. Nuestra primera animación: el botón de acción: así que hola ahí. Bienvenido de nuevo a otra clase sobre cómo animar un boceto. Tú yo usando principio. Entonces para recapitular la última lección aprendimos cómo importar nuestro archivo de boceto al principal hasta cómo crear un no aburrido cómo utilizar elementos como el rectángulo y el texto. ¿ Por qué debería usarlos? Yo no debería. Aprendimos que al hacer clic en importar, nos ofrece la opción de importar el archivo de boceto abierto desde el boceto hacia arriba. También discutimos sobre la calidad que quieres renderizar tus capas de restaurantes. Eso y hoy vamos a ver cómo realizar la animación real. Entonces para hoy, queremos animar a este particular un fondo y tenerlo en este ex tenerlo del estado final en este fondo particular, y no vamos a tocar nada más por ahora, ni siquiera estos iconos. Entonces lo que vamos a hacer es que Foster empezará por duplicar esta obra de arte. Por lo tanto, seleccione configuración de escena y presione el comando D, lo que crearía una nueva salida. Y como puedes ver, está justo aquí. Entonces solo selecciona el ícono más en el segundo arriba lo haría de hecho, lo que incluso voy a hacer sólo voy a nombrar esto? Simplemente diré Estado de inicio y llamaré a este estado final. Entonces en el estado final, la toma de botón, El icono X en realidad debería haber girado por tal número de grados. Entonces este es el panel, que puedes usar para cambiar las propiedades de los elementos, que ves en la pantalla. Se puede manipular la propiedad X. Por qué, Si hace clic en la etiqueta fuera de su propiedad específica, sólo puede conducir a ah dos posición o cambiar esa propiedad con mayor posición. Simplemente le devolveré todo a cómo waas. Por lo que la propiedad que queremos animar en esta instancia es el ángulo. Entonces empecemos por solo girarlo a, y eso son 45 grados cool. Entonces si nos dirigimos por aquí, ese es nuestro estado de partida. En nuestro estado final, verás que se refleja. Pero, ¿cómo conseguimos que realmente anime esto y lo transición a eso? Necesitamos un evento que responderá dedo idealmente, cuando arriba esto, se supone que transita ese ícono a este icono X por aquí, así que hacemos doble clic en el botón de acción y hacemos clic en el botón de rayo para agregar un evento. Entonces vas a seleccionar la parte superior y sólo tienes que aferrarte a tu ratón y arrastrarlo todo el camino hasta el estado final que quieras. Entonces si hacemos clic, se puede ver que en realidad se animó. Y probablemente no sea tan conspicuo en este momento, causa los grados que fueron irritantes está en tanto. Entonces lo que haré es seleccionar el icono más y probablemente lo rote un poco más, um, a algo. A ver, la próxima vez que parezca que alguien 33 está comprobado. Es así de sencillo. Por lo que si haces clic en la flecha, realidad puedes ver que no tienes opción dedo del pie jugar alrededor con la flexibilización y el tiempo fuera de esta animación. Entonces mira, quiero que una tía de animación que está fuera para empezar rápidamente. Andi, entonces y así veamos, como puedes ver. Pero como que me gustan los predeterminados. Simplemente me quedo con eso. Pero sólo para que lo sepas, en realidad puedes cambiar estas relajaciones particulares. Puedes usar el gráfico una búsqueda para crear tal Eso es una cala personalizada. Entonces volvamos hacia atrás la animación original y sí, um, no una suave, pero te das la idea. Entonces volvamos a uno predeterminado. A mí me gusta cómo funciona esto, como se ve esto y una serie de cosas. Entonces digamos en esta animación, esto es acción. Pero correcto Y en este otro estado, solo llamemos a esta acción pero adelante y llamemos a este icono más dos y veamos cuál será el resultado. Como puedes ver, ya no anima a que estuviéramos acostumbrados, porque lo que pasa es que se supone que tus capas deben ser nombradas de la misma manera en ambas hacia afuera . Para que la animación sea totalmente, totalmente exitosa para el dedo de animación realmente transición todas tus capas tienen que ser idénticas y ni siquiera puedes ver que nos están diciendo aquí. Sí, como se puede ver diciendo animar nombrando a Leon tanto en tableros, botón de acción más icono y así sucesivamente y así sucesivamente. Entonces, ¿qué vamos a hacer necesitamos tener en este tablero de arte en particular? Tenemos que tener el botón de acción, ya que estamos empezando por ahí que el estado inicial es la mantequilla de acción y el icono más en el estado final, se va a buscar una capa llamada botón de acción y más icono dedo del pie. Aplicar el efecto de transición. Entonces si volvemos a hacer clic en eso notará que ahora se anima bien. Por lo que la otra cosa que queremos hacer es cuando vuelves a hacer clic en la X, tiene que volver atrás. Entonces esto es bastante simple. Y lo que haces es simplemente dar click en el se dará click en la acción, pero seleccionar parar y apuntar al destino que queremos. Y cuando hacemos clic, tenemos el efecto que puede tener un estados finales, y se puede alternar entre los estados del fondo, que es lo que esencialmente queremos. Pronto nuestra próxima clase, vamos a ver el uso de componentes para que no necesitemos crear un nuevo fueraborda para todas y cada una de las transiciones finales. Y es un corte corto cómo ahorrar tiempo al animar. Entonces con eso te voy a dar un pequeño reto. Puedes agregar otro elemento a la pantalla y simplemente tratar de animar de diferentes maneras. Se puede cambiar la posición de esta botella, probablemente moverla de, digamos, tener la posición inicial ahí y decir que la posición final debe estar aquí. Y si hago eso, como pueden ver, sólo se va a mover allí. Entonces el reto que les doy es simplemente jugar con los diferentes tipos de flexibilización en ese juego alrededor con los diferentes tipos de efectos. Es muy, muy sencillo y familiarizarse con ellos con eso, veré en la siguiente clase. 6. Animación de la opción: hola. Vía hoy, vamos a estar viendo cómo animar estos tres botones. Perdón por eso. Cómo animar estos tres botones y hacerlos venir de debajo del botón más y salir de este lado Similar a cómo tenemos los marcados en transición. Entonces la forma en que vamos a hacer eso es primero, necesitamos todos y cada uno de los iconos de un origen. Por lo que la idea debe ser cuando haga clic en esto, deberían salir por debajo de este botón. Entonces ahí desde estado, eso está en el estado original que voy a hacer. Aquí vamos a tener un cambio. Entonces lo voy a hacer es que sólo voy a tomar esto las opciones reveladoras y lo que voy a hacer. Voy a copiar. Y voy a pegar eso y voy a mover eso aquí mismo. Sólo voy a alinear eso. Está bien. Impresionante. Voy a apagar eso por ahora porque no necesitamos ver eso en acción. Y si nos dimos cuenta, si recuerdas la última vez por menos 20 carne, bueno, en realidad necesitan ser nombrados igual. Entonces en la final, ¿dónde está esto? Sí, en los estados finales se aburren. También necesitamos las mismas capas del otro lado. Entonces lo haré a esto lo haré. Esconderé esos de la vista y voy a copiar y bestia. Sí. Entonces justo después de copiar pegado, ahora podemos empezar a animar estos estados y puedo empezar a reorganizar estos elementos debajo este botón en particular. Entonces ahora sólo me lo tomaré en el momento sólo lo haré manualmente. Oh, déjame simplemente agregarlos aquí cuando los apilas uno encima del otro y los apilar arriba y luego moveré el botón de acción arriba para que sea se sienta encima de ellos y yo también de hecho, ya que ya hemos hecho eso, eliminaré Copiar eso. En realidad, no hay necesidad de esa acción, pero en más ahora también, borra el botón de acción y sí, ahí vamos. Entonces hay una cosa que necesitamos cambiar. No obstante, esto está en ángulo de cero grados. Sí. Entonces vamos a ver. Es algo nada exactamente. Justo como se esperaba. Entonces cuando sí animamos desde cuando hacen clic en esto de aquí a aquí, así sucederán dos cosas. En primer lugar, deberíamos obtener el botón de acción transitando al icono en X. Y lo segundo es que estos Icahn debería aparecer entretenidos las teclas de flecha para simplemente moverlas . Pero en realidad deberían aparecer. Y acabamos de alinear eso exactamente. Por lo que en realidad deberían venir de debajo del icono también. Entonces cuando hacemos clic que estos también saltarán. Entonces lo primero que necesitamos para asegurarnos de que nuestras capas en realidad llamen lo mismo. Y como se puede ver, el nombramiento es diferente. Entonces esto realmente no va a funcionar. Entonces me tomaré un tiempo y limpiaré eso. No animar esto todo va a hacer es solo si durante mucho tiempo presionamos sobre él, el evento por defecto que se seleccionará es un top. Entonces si dejamos caer, lo que va a pasar es Bueno, uh, pero hay una cosa que necesitamos para animar el y ese es el ícono X. Entonces, apresurémonos justo al ícono más, el más joven Waas 133 y con ese boo y como lo hicimos ahí, aunque en las chicas vamos a añadir un top back. Y al igual que esa animación suave de todos los iconos ahí mismo 7. Animaciones reutilizables con componentes y cierre: Por lo que hay una característica en principio llamada componentes que nos da la capacidad de crear animaciones reutilizables. Entonces quiero decir, tales componentes como estos no necesitan esencialmente tener todo un trasfondo detrás ellos todo el tiempo. Simplemente puedes tener este artículo en particular como componente propio, simplemente animando por sí mismo. Entonces para crear un componente o presunto sobre esto en un componente, lo que vamos a hacer, voy a dar click en eso. Y si tu propio principio tres. Basta con hacer clic en el componente crear y eso debería tiempo a tu capa en un componente. Entonces la razón por la que tiene esta dirección porque hay un evento al que ya estaba apegado , por lo que en su lugar va a ir bien, bueno, no lo toques. Ya no lo necesitamos. Y volvamos a la instancia y a lo que voy a hacer. Voy a tomar esto y a editarte selecciona los componentes, que tiene el icono de engranaje y haga clic en editar componente, y voy a crear un nuevo arte haría donde voy a pegar. Déjame asegurarme de que están alineando. De acuerdo, los están alineando. Voy a aumentar el tamaño de esto hacia arriba. Déjame oler a esto y centrar esto también. De acuerdo, entonces lo mismo. Y si seleccioné ahí porque se puede ver. Pero parece estar avanzando. Entonces eso significa que hay una parte de ella que no está alineada. Sí, esto es lo que pasa con la animación. Tienes que asegurarte de que el chile se mueva lo menos posible para crear la estática. Siento que deseamos ganar solo un poco más y estuvimos ahí. De acuerdo, así que solo por renombrar, llamaré a estas opciones. Sí. Entonces si vuelves a la instancia, ahora podemos ver que no necesitamos tener ninguna relación con esto solamente. Haga clic en esto. Y así, no necesitamos tener dos estados, especialmente para componentes pequeños como el que necesitas animar a través de diferentes pantallas. Y, como de costumbre, renombra sus componentes. Sí, Entonces eso es todo. Y se puede borrar eso, sería. Ya no se está usando, y eso es todo. Por lo que has aprendido a hacer las animaciones sin los componentes. Evil toe aprendió cómo pueden entrar los componentes para permitirte construir animaciones reutilizables y acelerar tu trabajo. Gripe Así que definitivamente te animo a revisar el siguiente curso que voy a estar teniendo, que se sumergirá más profundamente en principio en cosas como efectos de paralaje desplazamiento cómo usar diferentes eventos para crear animaciones bien conocidas que se encuentran en dribble. Y definitivamente te animo a que te quedes sola. Aparte de eso, sí te animo a que compartas tu proyecto, compartas lo que se te ocurra, y me aseguraré de comentarlo. Con eso, sí tengo un buen día y gracias por escuchar.