Adobe XD: animações | Matt Ward | Skillshare
Menu
Pesquisar

Velocidade de reprodução


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

Adobe XD: animações

teacher avatar Matt Ward, Product Designer

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Introduzir: animações Adobe XD

      0:43

    • 2.

      Faça login : animações básicas

      5:02

    • 3.

      Faça login : animação de texto

      5:31

    • 4.

      Faça login

      4:11

    • 5.

      Caixa de entrada: repita grade e rolagem

      4:43

    • 6.

      Sent: repita estados de grade e botão

      3:19

    • 7.

      Constituem novo email: estados de sobreposição e botão

      4:07

    • 8.

      Configurações:

      8:13

    • 9.

      Como receber novo

      5:14

    • 10.

      Como receber novo

      5:57

    • 11.

      Outro

      0:12

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

1.611

Estudantes

2

Projetos

Sobre este curso

Neste curso, vamos passar o recurso de animação automático no código xD para criar animações para nosso produto falso de e-mail: Snail Mail. Este curso abordará uma grande variedade dicas e truques para ser aplicado à outras outras utilizações com outras informações. Inclua os arquivos "começa" e finaliz, “finis" para o curso" então fique livre para pegar isso e aprender no seu próprio ritmo. Veja exemplos do que você vai aprender abaixo:

Obtenha o arquivo Start aqui: Animação de correio do cargo: Start -

Arquivo terminado: Animação de correio com carate: Finalizado

Animações deslizantes:

Micro-Interactions:

Animações de texto / máscara:

Prensadas com botões:

Conheça seu professor

Teacher Profile Image

Matt Ward

Product Designer

Professor
Level: Intermediate

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introduzir: animações Adobe XD: Ei, caras hoje estarão revendo algumas das dicas e truques wjxt para seu recurso de animação automática , então isso será útil se você quiser usá-lo para, como, como, um teste de usuário e você quer obter um protótipo em um maior fidelidade e começar a testar. As micro interações só faziam as coisas parecerem mais realistas. Isso também é valioso para apresentações. Se você quiser criar algo como um carretel chiado ou algo que vai deixar um cliente realmente animado. Eso qualquer um desses será bom para isso. É melhor se você tem algum conhecimento prático do Dhobi X'd aqui, também, também, mas eu vou e limpei os arquivos de início e fim para você. Se você não tem tanta experiência, não se preocupe. Você sempre pode abrandar e ir junto. Sim, Sim, acho que é isso. Então vamos começar 2. Faça login : animações básicas: Ok, então para começar, podemos abrir o arquivo de animação do caracol mail, mas eu incluí para que todos pudessem maximizar a tela. Então eu fiz isso só para não termos que perder tempo projetando um monte de elementos. E isso pode realmente ser sobre dicas e truques de auto inimigo. A primeira coisa que podemos fazer é arrastar essas outras placas de arte para baixo porque o que vai começar é a lei e tela aqui mesmo. Então, apenas é um fundo rápido sobre o que auto animate faz e por que é tão útil é que basicamente apenas muda os elementos entre as nossas placas. Então, se fizermos uma cópia do registro do quadro de arte em um, temos este caracol bem aqui. E se você olhar para trás neste aeroporto, ele tem o mesmo nome. Mas se nós movê-lo assim e então nós temos um protótipo, o multi ato este em qualquer transição de toque nós queríamos que dedo do pé para animar em vez disso e usando fora durações da coluna vertebral. - Tudo bem. Ainda assim, para ir o anterior que você clicar, você vai notar que temos que auto inimigo. E então um dos maiores benefícios deste programa é que você pode realmente fazer isso super rápido e você pode fazê-lo com todos os mesmos elementos em nosso quadro. Você não tem que projetar nada que vamos deletar este mês. Então eu meio que percorri algumas animações básicas e configurei algumas neste arquivo que poderiam ser usadas para um teste de usuário ou elas poderiam ser usadas em uma apresentação. Kallakis é um funeral para deixar as pessoas entusiasmadas com o seu trabalho, mas vamos começar a duplicar este aeroporto mais uma vez. Então vamos dizer que queremos que esses elementos deslizem um pouco para cima, certo quando alguém entra na primeira tela para que possamos soltar isso. Podemos largar o passatempo A mudará para zero. Então tudo o que você pode editar sobre esses elementos são coisas que podem ser auto animado. Então você pode fazer um passado um Você poderia fazer fronteira. Você faz uma cor de preenchimento, você pode fazer o tamanho. Você tem qualquer tipo de liberdade como essa. Só somos úteis para lembrar que se há algo que eu não tenha coberto aqui, você provavelmente pode animá-lo automaticamente. Só somos úteis para lembrar que se há algo que eu não tenha coberto aqui, , Na verdade,vou querer que este caracol comece por aqui. Eu também copiar e colar isso sobre porque eu não quero caracol para mover ainda. Então, o que aconteceu de estar na nossa prancha? Então, se você clicar no protótipo, todo o inimigo 0.2 geralmente é sobre onde eu gosto de ficar com a maioria das animações. Isso é tipo um padrão U.S. Você quer que ele seja bem rápido. O problema com eles, se parecer muito lento,é provável que seja muito lento, e precisa ser mais rápido. O problema com eles, se parecer muito lento, provável que seja muito lento, Eu gosto de ficar em torno de ponto para as coisas. Estou tentando ser mais dramático da minha jogada, tipo um segundo. Mas geralmente qualquer tipo de interação que o usuário vai ter Você vai querer que ele seja apontado para talvez 0.0.3 max menos porque nós não queremos que ninguém tenha elementos lentos. Aí está você. Eso vencendo apenas 2,2. Então isso animado como nós queríamos se fecharmos isso. Ok, então agora temos uma animação indo de Logan para logar em um. Mas digamos que queremos que nosso caracol mude para lá. Podemos entrar e arrastar estão sentados de volta para aquele lugar, e vamos querer animar entre lá também. Então, se você notar para você, eu estou clicando em todo o quadro de arte quando eu fizer isso de você tocar em qualquer lugar na transição do portal de arte para a próxima tela. E parte disso é que essas interações não são nada com o qual o usuário teria que interagir , então elas são mais para fins de apresentação. Então, é mais fácil clicar em qualquer lugar na tela. Ter animação continuar, mas se é algo como para um botão que vai entrar em mais tarde, Vou clicar no botão diretamente em vez de placa Lahore. Queremos que isso coma fora e porque é prego agora e ele é bem lento nós queremos que é um aspecto de marca realmente vai fazer quatro segundos para duração. Então, se jogarmos isso quando clicarmos, obter correio de caracol muito lento limpa isso, você olha para ele desde o início o seu pequeno seinen e vamos clicar novamente. Ok, agora que temos isso, podemos ir e adicionar elementos de texto aqui 3. Faça login : animação de texto: assim editar textos funciona da mesma forma que terminando como um inimigo de forma e auto, ele vai apenas gêmeo entre o para nossas fronteiras para criar efeito. Nós não vamos. Então o que eu fiz lá foi copiar e colar esse elemento e vamos colocar um e-mail aqui. Vamos transformar este fundo elemental Marselha Key Main e será a mesma coisa com uma senha para criar uma cópia dele. Mas é a senha que não queremos que ninguém veja. Então, juventude, muitas estrelas. Estou no escritório. Bem, maioria vai deixar o texto preto para você, então ele aparece um pouco melhor, então podemos deixar assim e deixá-lo animado automaticamente no meio. Ele está fora. Não quero que seja 2.2. Vamos ver como isso parece. Ok, ele aparece. Não é nada louco. E também é algo que você pode apenas fazer dio com as transições regulares da tela. Você nem teria que usar auto animate. Você poderia usar mais, deixar nossa transição em vez disso, e então simplesmente dissolver. Isso vai te dar exatamente o mesmo efeito. Mas queremos que isto seja, vamos ter um pouco de talento. Então vamos projetar. Vamos criar um retângulo aqui. Podemos ir ao júri, preencher, sempre gostar de desligar caiu. Quando eu criar algo que eu quero dizer usar máscara, ele irá selecionar esses elementos. Vamos ao objeto e fazer uma máscara com forma e, em seguida, dobrar rápido. Podemos editar a máscara e vamos atrasá-la até ela cobrir. A melhor pequena peça cobre todo o texto e aqui em cima, você vai notar que apenas nomeou massa Grupo Um Nós vamos fazer é nós vamos realmente entrar e nomear animação e-mail. É importante que você tenha nomeado as coisas muito bem nisso, porque um Dairy X'd identifica esses elementos pelo nome eso Se você entrar e você tem coisas que é chamado Grupo 123 Grupo 1000 é realmente fácil perder a noção sobre o que está animando, e se você fizer isso o suficiente, você pode ter coisas que animaram ao mesmo tempo de duas coisas. Você se chama Grupo 1, então é só um bom dedo do pé de prática. Sempre nomeie as coisas como você ir para que nós vamos fazer a mesma coisa irá criar um retângulo para a senha, desligar-nos novamente e todos selecionar ambos. Ir para o objeto mestres forma Una não encobri-lo todo o caminho. Isso é bom. Vamos clicar duas vezes. O que é isso? E a mesma coisa grupo de massa Will dio senha inovação também transformar esses dois elementos X de volta dessa maneira. Então o que vamos querer primeiro é temer que esses nomes desapareçam. Vamos definir a capacidade para zero e, em seguida, a partir desta forma de arte e irá copiar e colar. E uma vez que fizermos isso, podemos entrar e abrir esta animação para senha. Vamos ampliar realmente o quiz, talvez até mais perto. O que usaria irá arrastar esta caixa de volta para fora? Você vai fazer a mesma coisa para a animação de e-mail. É como aquela caixa Arraste-a para fora. Então o que isso vai fazer vai nos dar um efeito bem sutil, porque essa massa vai se abrir e fazer com que seja um pouco. Eles ficam mais limpos, um pouco mais divertidos, mais coisas acontecendo, você sabe, outros íntimos. Ele está fora. 0.2 está bem. E em vez de fazer tapetes, o que vamos ouvir aqui é tempo de manter o atraso a zero. Então, basicamente, o que isso significa é, uma vez que você clicar, ter esta animação completa. Ele vai se alimentar imediatamente nesta animação para que possamos dar uma olhada em como isso se parece . Então o texto desapareceu. E então obtivemos aquele efeito de tipo agradável que queríamos. Isso parece bom por enquanto. Vamos ver tudo do topo. Só para ter certeza de ser grampeado novamente. Isso aparece torneira novamente. A enfermeira Neil atravessou, então recebemos nossa mensagem, Sammy. Então a próxima coisa que vamos querer negociar é assinar. 4. Faça login: então não queremos apenas clicar em um botão. Queremos que o botão tenha, tipo, tipo, um saquê de imprensa. Então a primeira coisa que podemos fazer para fazer isso é copiar e colar esse botão de login. Eu sempre gosto de adicionar uma fronteira. Vamos usar isso é uma máscara em uma fronteira e depois desligar a venda só para que possamos ver para que serve a máscara. Claro. Então vamos tomar um círculo no lugar que no meio de um botão vai curar na tosse da fronteira . Vamos deslizar o botão de entrada por cima dos teus lábios e depois criamos uma máscara. Então nós temos o grupo de massa um, e vamos em frente e nomear que vamos nomeá-lo, assinar. Mas animação, vamos clicar duas vezes e desligar a passagem A e do círculo zero. Agora que temos isso configurado em nosso login, vamos copiar e colar todo este quadro de arte. E assim que entrarmos, podemos nos abrir, agarrar nossos lábios. O que vamos fazer é transformar a capacidade para, digamos, 70% e então vamos escalar isso. Estou usando a opção shift para escalá-la uniformemente até que ocupe todo o espaço dos botões. Você está bem? Agora parece bom. E então nós vamos rápido neste quadro de arte e nós poderíamos pegar um botão de sinal aqui, e nós vamos protótipo no Mas desta vez, em vez do seu quadro, você bate, embora íntimo, ele está fora, desta vez será estalado. Eu geralmente gosto de usar snap para respostas de botão porque é um pouco mais. É um pouco mais rápido, um pouco mais ativo. Vai acontecer bem rápido. Então, é bom dar um pouco de brilho, e isso acontece. Tornar um pouco mais óbvio que algo respondeu assim. E então vamos para o topo da página de login e vamos conectá-la. Teoh nossa página de caixa de entrada, pegue essa coisa toda. E de novo aqui, vamos cumprir pena. Será que ele quer que isso aconteça muito rápido? Na verdade, não vamos animar isto, vamos fazer a transição. A razão pela qual estamos fazendo isso é porque não há nenhum ponto para animar a honra, animar qualquer coisa aqui, se é uma transição de tela tão grande. Então apenas aponte para que é divertido. Veremos como fica e veremos mais uma vez. O que usar o teclado aqui é para voltar, e estamos recebendo um bom mas em resposta lá. Então a chave para isso é tudo sobre a sutileza dessas animações. É isso que chama a atenção das pessoas. Então é sempre bom ter um olho para os detalhes, como a França, vez que esta animação é um círculo que aumenta em vez de apenas um.Mas nós colocamos em cima disso que mudou de cores e, em seguida, apenas muda a qualidade do a animação. Não é apenas não é apenas uma transição, é algo que tem um pouco mais de profundidade e movimento que o torna mais interessante, mas para o próximo passo vai começar a trabalhar na caixa de entrada. 5. Caixa de entrada: repita grade e rolagem: Certo, assim que chegarmos à tela da caixa de entrada, vocês notarão que temos esses e-mails falsos aqui que não têm nomes, assunto ou tempo neles. Então, o que podemos dio é clicar neste elemento e, em seguida, ir para a grade de repetição. E uma vez que arrastamos isso para baixo, você obviamente receberá um monte de e-mails falsos. Mas o problema é, eles apenas dizem, nome, assunto no tempo, o que parece terrível. Então, quando o plug legal em que eu realmente amo e iria sugerir que todo mundo teste é repetidor aqui. Então, se você tem uma grade de repetição que permite que você coloque, como texto fictício e outros elementos que você pode reutilizar em toda a grade Então, se clicarmos sobre isso e, em seguida, clique repetidor Então nós obtemos todas essas opções e você vai notar nesta gota menu para baixo, você começa os elementos que estavam no crédito Europea. Então temos nome, hora do assunto e caminho da linha e retângulo. Isso é apenas o círculo de seleção à esquerda, então vamos começar com o nome. Então, se obtivermos uma categoria suspensa e ir para o nome e queremos primeiro e sobrenome, vamos aplicar. Então feche isso só para ver o que aconteceu. Então temos nomes que preenchem todos abertos para baixo o valor do nome dela. Ligue para eles. E se dobrarmos rápido em apenas uma nota rápida se você vai notar que a caixa de texto aqui é realmente muito maior do que o nome que é uma boa prática quando você está configurando uma grade de repetição que você tem texto fictício ele. Porque se eu fosse fazer isso para apontar, ele realmente iria jogá-lo fora se o nome fosse muito longo e ele iria começar a colidir com essas outras caixas de texto. Desculpe-me, vejo lá uma nova busca de volta. Por isso, é sempre útil fazer o imposto de área selecionando a mesma coisa com o assunto. Então usamos o texto da área para ir tão longe quanto quisermos, e tempo e tempo realmente escrever um longo tempo e, em seguida, dar-lhe algum espaço no caso das vezes um pouco mais do que planejamos para que apenas o equipamento para que possamos clicar de volta, voltar para repetidor. Neste tempo, queremos um assunto, a categoria. Então, há muitas coisas que você pode escolher aqui. , Na verdade, uma das melhores categorias. Eu acho que para e-mails, Internet e você pode apenas clicar frase aqui em baixo. Isso vai ser aleatório. Um, elogios ao desenvolvimento, mas eu acho que é muito útil para uma frase de e-mail que podemos aplicar a isso. E vemos que temos aquele pop lá em baixo. Mas também podemos ir ao tempo enquanto estamos aqui. Volte para o horário de namoro da lista e você pode selecionar o período de data, então vamos manter o tempo. Períodos de tempo recentes. - Tudo bem. Vamos comprar roupas. Responda. Agora. Nós temos nomes sujeitos no tempo tudo muito rapidamente, e isso se estendeu para esses elementos aqui em baixo. Mas já que temos todos esses elementos aqui embaixo, vamos querer rolar uma onda para que você possa clicar na prancha dela e arrastar para baixo, e vamos para lá. E uma coisa você vai notar. Então, se nós vamos e iria jogar aqui em mim pergaminho, nós temos este elemento que está se movendo com ele, e nós não queremos que a ação flutuante. Mas deve sempre ser consertado. Então vamos fechar, no entanto, e vamos clicar e querer voltar para esta camada sendo você. Então, se você acelerar os elementos e obter um protótipo, podemos corrigir a posição ao rolar e, em seguida, acelerou Você jogar rápido e apenas uma nota rápida para você normalmente teria que fazer isso com esses outros elementos também. Mas apenas neste arquivo, estes foram configurados para ser fixo posição ao rolar já. Então eu meio que muito rapidamente com grade de repetição e repetir o plug in. Nós realmente obtemos um feed de e-mail de alta fidelidade muito rapidamente com um pergaminho, que, como você pode imaginar entrando e digitando texto fictício, e tudo isso seria realmente um grande incômodo. Então, é bom ser capaz de fazer isso rapidamente e ter algo que parece bastante realista. 6. Sent: repita estados de grade e botão: Então agora o que podemos fazer é mover esses outros nossos portos, e a próxima coisa vai fazer suas idéias fora do caminho é realmente a caixa de entrada de e-mail enviado, para que possamos copiar e colar isso. Faça exatamente a mesma coisa de novo. Mas desta vez vamos querer que este ícone destaque em vez de nosso ícone na caixa para que possamos mudar de opção e fazer isso um pouco maior. E eu quero que a cor mude bem, então temos que preencher a marca dessa cor azul. Queremos que este ícone já que não foram selecionados aqui para voltar ao cinza. Eu também queria ser um pouco pequeno aqui, , bem ali,até que se alinhe com os outros elementos. Então o que podemos fazer é rápido neste elemento. Obter um protótipo jag isso durante a transição. Inimigo automático. Ele está fora. Espinha 0,2 está bem. Vamos ver como isso parece. Ok. Está parecendo bom. Isso anima do jeito que você quer, mas há alguns problemas. Um que não podemos clicar de volta. Dois. São todos os mesmos e-mails e informações, o que não parece muito realista, e ainda diz em dólares Woops, vamos mudar isso. Quero que diga “enviado”. Então, se clicarmos e selecionarmos nossa grade de repetição, podemos realmente entrar em nosso repetidor aberto plug and menu novamente, e podemos mudar essas coisas para que selecionemos o nome. Vamos terminar como nome de novo. É como, primeiro e perdeu muito o telefone. E isso vai mudar todos esses elementos, e vamos fazer o mesmo para o assunto também. Então eu tenho uma Internet, uma frase que vai mudar isso. E, em seguida, a última coisa é também atualizar os tempos que funciona comigo. Atualize os horários. Ok, bom. E se você vir você comparar entre estes dois são portas. Eles mudaram, nunca as coisas pareciam boas. E nós vamos realmente querer ser capaz de voltar para a nossa caixa de entrada para que possamos colocar predador apertado arrastar isso sobre auto animar. Ele está tudo bem. Então agora, quando passamos por cima, bem, nós temos o nome mudado um centavo e nós também temos todos os tipos de diferentes e-mails enviados apenas para torná-lo um pouco mais realista, como se você estivesse realmente falando alternando entre caixa de entrada e enviando meses. Então a próxima coisa que podemos fazer é protótipo. Como seria um novo e-mail ou uma nova composição de e-mail. E para fazer isso, vamos precisar clicar neste botão mais para obter a nova janela de e-mail para aparecer. 7. Constituem novo email: estados de sobreposição e botão: Eu incluí que você janela de e-mail aqui, mas teremos que ter a nossa resposta de botão antes de chegar a ele. Então copie e cole. Na verdade, antes de copiar colar, vamos adicionar essa máscara para criar a resposta do botão. Então, uma cópia e colar isso virar a borda no preenchimento através do escritório sombra. Bem, então agora que temos esse contorno, crie um círculo no círculo do meio para não ser borda em um Phil branco, e queremos que isso fique no topo, vamos selecionar Ben para esses elementos. Vamos criar uma máscara dupla rapidamente aqui, e vamos certificar-nos de que esta é a sua capacidade percentual porque não queremos que ela apareça quando o botão não está equipado e novamente é nomeada uma maestria de um. As cotas da Opel chamarão essa animação de botão de ação flutuante, e agora podemos copiar e colar isso. Hum, aquele erro que quase cometeu lá é, hum, você tem que lembrar que para auto animar algo, a animação tem que existir no primeiro quadro de arte, bem como no segundo, então é sempre bom para entrar e configurá-lo no primeiro e, em seguida, copiar e colar. Assim, os nomes serão sempre os mesmos. Porque se você começar a copiar e colar e criar novas animações mais tarde na estrada, o nome e pode se tornar um grande problema hum, vai garantir que tudo soletrado exatamente à letra. Correto. Vamos abrir isso, vamos para o Ellipse e museu em, e nós queríamos virar um 70% novamente para obter essa resposta rápida e então, bem, bem, escalá-lo para cima. E eu estou apenas segurando a mudança de opção para escalar uniformemente lá do centro precisa ir mais adoração, e então vamos protótipo. Então, quando você clica nisso, você quer que esta resposta para aparecer e você vai estalar porque é um botão Estado T foi divertido. Auto inimigo E nós não queremos que ele apenas para auto inimigo. Queremos a nossa nova mensagem quando eles chegarem também. Então o que podemos fazer aqui este dragão durante um bom tempo. O que eu fiz lá foi selecionar a arte de topless derramada. Não queremos essa animação automática. Na verdade, vamos usá-lo mais tarde aqui. Então, uma das razões pelas quais uma das quedas do auto animate é que tudo tem que estar neste quadro de arte original. Mas para uma sobreposição de símbolos, geralmente é melhor ir em frente e usar uma de suas predefinições para deslizar. Deslize para cima. Da esquerda para a direita são geralmente muito rápido e fácil de usar, e mantém tudo separado na placa ou porque não se torna um aborrecimento quando você tem grandes elementos como este se movendo no aeroporto original. Então, se puder, sempre tento usar todas as pernas para manter as coisas um pouco mais limpas. E nós queríamos. Ele está fora. 0.2 está bem. Vamos ver como isso se parece. Vamos clicar aqui. Temos a nossa resposta e a janela para subir. Tente mais uma vez. Está parecendo bom. Então, depois de recebermos a nossa nova mensagem um dia para chegar, quadrado isso sobre porque eu gosto que eles sejam 70 separados. Exatamente incrível. Então a próxima coisa que podemos fazer é obter o nosso menu para aparecer 8. Configurações:: por isso incluíram esse menu para nós aqui. Então, se olharmos a caixa de entrada e o que será Will Dio? Na verdade, vamos copiar e colar toda esta porta de arte porque não vamos usar este menu como uma sobreposição. E explicarei o porquê em um segundo. Então, copiamos e colamos toda a camada de caixa de entrada ou placa de arte lá. Desculpe-me? Então o que vamos fazer é pegar as configurações da caixa de entrada. Na verdade, basta copiar e colar isso em cima. Acho que temos alguns elementos escondidos lá atrás. Sim. Tempos escondidos lá atrás. Então podemos deletar isso. Então, copie e cole este menu no topo aqui, vamos arrastá-lo sobre a posição certa porque queremos vir para cima quando tivermos este ícone. Então, isso é bom. Apenas conecte isso. Então, temos uma volta muito apertada para a nossa caixa de entrada. Não lá. Então queremos lá em vez disso. Transição superior dissolvida sem apontar para tudo. Parece deitado ali. Uma coisa a saber sempre que você arrastar o protótipo. Lembra-se da última coisa que fez. Hum, então a última coisa que fizemos foi uma transição, então ele vai se lembrar disso, mas se nós fizemos auto animar e mudar o tempo que você lembra da última sopa selecionada Ellen, você clicou na engrenagem e, em seguida, temos este menu para vir acima que está funcionando como nós queremos que ele para você. Mas não queremos que eles apareça em você. Queremos interagir com a densidade de exibição aqui. Então o que podemos fazer é copiar e colar este aeroporto novamente, e então vamos criar um controle deslizante para a densidade de exibição. Então vamos voltar para nossa cidade de design, levantar um retângulo, arrastá-lo sobre a sombra. Se você notar que há, tipo, uma pequena sobreposição de sombra porque esses elementos em cima, hum, nós realmente vamos corrigir isso com uma máscara porque ele não está realmente no topo do menu. Então você Phil se desligou e nos arrastou para usar uma máscara. E o que isso vai fazer é apenas tirar esse elemento de sombra do menu porque é um pouco distrativo tê-lo lá. Porque isso realmente é exatamente como eu deslizar para fora da densidade de exibição. Então podemos criar um retângulo aqui. Este vai ser o fundo do nosso controle deslizante que era. Pegue este raio trazendo e então vamos mudá-lo para isto. Gray disse: “ Esse é o fundo do controle deslizante. Você também pode criar um círculo aqui, e este vai ser o nosso elemento deslizante. Este tamanho deve ser bom. Se encontrarmos o centro algures , queremos que isto seja azul. Então eu vou copiar e colar este ano de texto de exibição em vez de digitar algo novo. Então, será no mesmo pensamento. Tudo. Vamos levar um a menos. Na verdade, vou conseguir um ponto aqui. Eu acho que apontar para mim é um pouco mais fácil de arrastar por aí. Absolutamente Você é mais fácil arrastar elementos e remodelar coisas sobre 14. Encontre uma cópia e cole isso mais uma vez e depois mais. Então o que estamos fazendo é criar um controle deslizante aqui que vai mudar a densidade de exibição de nossos e-mails cada vez mais não muito complicado lá. Então, como vamos fazer isso é, assim que criarmos nossa cidra, podemos ir em frente e conectar isso. Então, se formos mostrar densidade, isso vai aparecer e não é excessivamente Oh, venha transição apropriada. Podemos usar o ponto de dissolver para você está bem. para que possamos verificar apenas para ter certeza de que quebra. Isso parece divertido. E assim que fizermos isso, vamos copiar e colar este quadro de arte mais uma vez. O que queremos é ver como seria o nosso conselho se houvesse menos densidade em nosso humano. Então, quais rádios? Vamos selecionar o botão deslizante, temos um protótipo de dragão. Nós vamos para Auto Enemy, na verdade, o que nós vamos fazer zero, eles disseram que uma torneira nós vamos fazer drag. Na verdade, quando você se arrastou rápido, você nem tem a opção. Teoh cumprir uma pena porque é qualquer que seja a resposta do dragão do rato. Então, se entrarmos e olharmos para isto nas notícias, podemos arrastar este elemento para a esquerda ou de volta para a direita. Então estes são os limites originais que definimos para auto íntima, e isso é apenas deixar-nos arrastá-lo em vez de fazer como uma animação de toque Pequeno fechar isso. Mas se você notar quando estamos arrastando isso, nada estava acontecendo. Então, o que podemos dio é entrar e alterar a densidade de exibição do nosso e-mail editando são repetição cred. Então este é um dos aspectos legais de ter grades repetidas intactas é que você pode fazer algumas coisas muito loucas como esta realmente facilmente, e porque nós queremos menos densidade em nosso e-mail para este exemplo, nós podemos trazê-lo para sobre lá e em seguida, clique duplo terminou a grade de repetição, e nós vamos mover esta linha para baixo um pouco apenas para espaçar um pouco mais realisticamente. E depois podemos largar isto. Um pouco de ondulação. Basta deixar cair a repetição Bom para baixo, apenas um cabelo disse. Baseia-se mais com base neste tempo de topo. E uma vez que esta é a mesma grade de repetição que esta placa de arte, ele vai auto inimigo quando arrastar este controle deslizante. Então, este é um dos benefícios sobre auto e eu em geral e usá-lo com um recurso de arrastar . Você poderia fazer algo assim muito rápido sem ter que mudar nada ou fazer coisa chique em outro programa. Você pode fazer tudo com elementos em seu quadro de arte, e nós vamos realmente nos livrar desses manuais como todo o quadro de arte aqui, ir para Predator e arrastar isso de volta para o primeiro quadro inicial. Faremos a transição da torneira. Há tudo ponto para. Então agora, se entrarmos poderia exibir densidade, usar seu controle deslizante. Poderíamos voltar ao menu principal da caixa de entrada. 9. Como receber novo: Então a próxima coisa que faremos é simular receber um novo e-mail este fim de semana. Copie e cole esta caixa de entrada original. E então queremos que esse novo e-mail apareça na parte superior desta grade de repetição para que possamos arrastar isso para baixo para esquecer o mesmo espaço, começar por um e-mail, pegar um retângulo e depois arrastá-lo para lá. O que podemos fazer é apenas ir em frente e estender a forma todo o caminho até o lado, e é um novo e-mail, então vamos torná-lo uma cor diferente como azul e quer elementos de texto para ele para que possamos apenas ir e dobrar, Clique em disse. Podemos copiar e colar aqui un. Selecione o ritmo da grade de repetição fora dele. Arraste-o para cima assim. Temos texto que é o mesmo que teorizou esses e-mails. Faremos a mesma coisa para o círculo seletor aqui. Copiar e colar de Selecione um dragão baseado em grade de repetição despertar. Maquiagem em seu nome para este primeiro e-mail apenas para que nós ficar ao longo das linhas de mantê-lo olhando muito riel e vai ajustar o tempo para. Então, agora que temos nosso novo e-mail aparecer lá realmente vai soltar essa comodidade você comando shift colchete esquerdo para deixá-lo todo o caminho para baixo apenas para ter certeza de que estamos por trás de todos esses elementos. E estamos perdendo uma linha aqui. E isso é porque a linha estava apenas na parte inferior e eles repetem grade. Então eu vou copiar e colar essa linha para o topo e reposicioná-la por baixo. Só temos o resto. Esse suporte de e-mail. Aqui vamos nós. Ok, então nós temos um novo e-mail configurado e o que nós vamos fazer é realmente agrupar todos esses elementos dessa maneira, nós podemos ajustá-los assim. Controle a renomeação, este novo e-mail. Então, o que podemos fazer é copiar e colar este grupo, voltar para a nossa caixa de entrada original colada, e vamos reduzi-lo rapidamente. Observe se você vai notar quando está encolhendo aqui. Este texto não está encolhendo. Qualquer um. Você pode realmente ajustar isso, como voltar e alterar esses dois pontos em vez de texto de área e a razão que será bom para essas instâncias. Nós não estamos colocando nenhum elemento repetidor nesses campos, então tudo bem se usarmos texto de ponto sobre eles e basicamente Tudo o que significa é que eles vão escalar quando escalarmos o grupo inteiro em vez de apenas manter a mesma área como seria para texto de área. Copie e cole isso aqui e nós minimizaremos. Bem, na verdade, basta ir em duas vezes escolhido estes minimizando o pouco É o que eles não têm que ser perfeitos porque nós vamos desligar esta opacidade de qualquer maneira. Mas eles precisam ser bem pequenos. Então não há estranho para o colo. Quando fazemos a animação, então vai mudar o todo Um passatempo sua 20 Vou certificar-me de fazer a mesma coisa para todo o grupo ali mesmo no texto foi selecionado. Parece o grupo inteiro. Caramba, isso é um zero fascinante. Então, queremos que isso animar automaticamente também, então vamos rápido em toda a placa de arte e arrastar também selecionar em vez de fazer como toque ou tempo. Vamos realmente usar teclas desta vez, então selecione que o que permite que você faça é usar qualquer tecla no teclado para acionar a animação. Então, se clicarmos aqui, podemos pressionar a seta para baixo em um sinal que queremos a transição para auto inimigo e ele está fora ponto para você está bem. Então, uma das razões para usar o teclado é útil aqui é que ele permite que você controle quando você pode acionar animações e não parece tão desajeitado é como clicar em algum lugar fora da página para acionar a animação. E também é útil. Se você quiser fazer um vídeo de captura de tela, basta usar as teclas do teclado para acionar algumas dessas animações. Então seu mouse e no quadro, vamos ver. Então, estamos na caixa de entrada principal pressionará a tecla para baixo. Obter esse novo e-mail para aparecer ali mesmo. 10. Como receber novo: então não queremos apenas um novo e-mail para aparecer, embora possamos adicionar um pouco de talento a ele. Vamos fazer com que este sino faça alguma coisa porque vamos ter o United Vacations que vamos querer um pouco. Alguma resposta aqui. Uma onda, então vamos criar outro círculo um pouco menor. Vamos nos livrar assim como temos um novo símbolo de identificação lá. Vamos copiar e colar isso sempre. E lembre-se, este é o elemento inicial. Então esta é a página principal que vamos querer que isso aumente a escala. Então, queremos torná-lo pequeno e desligar a capacidade. A menos que seja um Lips 5. Vamos mudar o alarme da campainha, eu acho. Alarmes. Melhor nome para o alarme, e eu tenho que voltar e lembrar de mudá-lo na tela também. Então vamos verificar para ver como isso parece, para que isso apareça uma onda. É um toque agradável para adicionar, mas vamos dizer que queremos fazer um pouco mais e adicionar um pouco de sutileza e realmente entrar, como ver uma micro interação para que possamos realmente excluir isso daqui. Então vamos dizer que queremos que o sino toque antes que a notificação vermelha apareça, então podemos realmente fazer é entrar e girar. Elemento vai servir. Gire para a esquerda cerca de 45 graus e depois vamos para aqui. Vamos duplicar este aeroporto mais uma vez, e vamos apagar isto daqui, e depois vamos para a direita 45 graus. E é aí que vai acabar por estar no centro. E porque eu mudei essas placas de arte e excluí esse elemento, na verdade vou adicioná-lo de volta a este, reduzi-lo, mudar a capacidade para zero. A razão pela qual eu fiz isso dessa maneira é porque este é o quadro de arte onde esses elementos começam a aparecer. Originalmente, era este, mas como adicionamos um pouco a ele, podemos dormir naquele momento. Então vamos ter certeza de que tudo está conectado bem apertado em um atalho legal. Aqui está o comando comprimido A para ver todos os pontos que os protótipos se conectaram. É útil verificar se você esqueceu algo ou não tem algo conectado, pode economizar um pouco de tempo em vez de tentar dar a volta e clicar em elementos para ver o que você se lembrou. Não se lembrou de animar. Então fique fora da seta para baixo vai acionar isso. E assim queremos que este quadro de arte vá automaticamente para o próximo a posição Bell para que vamos assinar tempo. Zero segundos 0,2. Bem, na verdade, faça este 0,4. E a razão disso é porque isso está realmente se movendo 90 graus. Então, deste quadro de arte, este, era 45. Mas porque você está balançando ao longo dessa arte de fundo, isso está realmente movendo 90. Então, para manter esse uniforme olhando vai realmente fazer 0.42 que estão entediados. E então, quando tivermos um suéter, vamos fazer apontar para você verificar para ver como isso parece. E novamente vamos bater o para baixo, continuar trabalhando e isso até mesmo obter aquela pequena animação balançando bem ali no topo. E você também pode brincar com o que as animações estão realmente fazendo entre mandados de arte . Quando você está criando um pouco de micro e interações como esta, eu uso estes aqui fora, que realmente funciona bem porque parece que o sino tem um pouco de show interno deve meio que abrandar quando atinge os Ozarks, mas você também pode brincar com, tipo, snap Artie e ele está fora e realmente apenas brincar e ver o que parece melhor porque muita animação desta forma é o que parece certo. Sei que essa é a coisa da Miss designer clichê para se dizer. Mas se algo se sentir lento ou desajeitado, é provável que pareça muito desajeitado e muito lento para quem o usa. Por isso, é sempre bom ter isso em mente e brincar com as coisas até que elas se sintam certas . Então podemos ir do topo para selar nossas animações mais uma vez e para garantir que tudo esteja conectado para que possamos. Rápido, nós poderíamos que para vir até Nórdico Neil para deslizar através quando nós entrar em bom ou enviar e-mails. Escreva um novo e-mail estava lá e são exibidos densidade e, em seguida, pressione que para baixo teclado T para ver a nossa nova animação pop-up no Awesome. Então parece que tudo está funcionando lá. Então é isso para este tipo básico de dicas e truques de auto inimigo 11. Outro: modo que encerra esta aula. Sinta-se livre para experimentar o exercício da aula e deixar alguns comentários e comentários. Avise-me o que funciona. Obrigado.