Transcrições
1. Sobre o curso: Estou fazendo isso por você. I designer baseado no Quênia hoje eu vou estar levando você através de como qualquer fez um esboço
usando o princípio Slash é mais adequado para designers que esboçou gota lá você sábio e quer levá-los para o próximo nível. Coisas ruins em movimento e interação. Sem experiências fritas. Princípio negro para tomar esta aula. A única coisa que você vai precisar fazer é ir para este site de formato principal
para baixo para ver na sala de aula.
2. Como preparar o curso: materiais: para acompanhar facilmente, recomendo baixar o juiz de arquivo anexado alocado na seção de seu projeto desta classe. Instale os dois tipos de formulários e abra o arquivo de esboço para ser o que estou vendo na tela. Isso é opcional, claro. Você mais do que livre para usar seu próprio esboço para divulgação tão completa o esboço original vales do Sr. Stefan e foi disponibilizado para nós em apuros. Eu gostei porque eu achei básico o suficiente para demonstrar os fundamentos da animação usando o princípio para cima. Então, vendo a próxima aula, explicamos como preparar arquivos de esboço para exportação para princípio.
3. Elaborar ativos para importação para o princípio: Então, antes de importarmos nosso esboço cai no diretor, há algumas coisas que queremos
pregar em nossa seção de esboços. E a primeira coisa é a nomeação fora da saída. Você vai te dar manchas de sangue que fazem sentido para o meu frio aqui. Visto no centro. Então, se você tem um você eu voei em um fluido de embarque como o inimigo pode querer ter todas as telas que lidam com isso em uma tela ascendente um acordo com assinar em outra bota e assim por diante e assim por diante. Outra coisa é o agrupamento de nossos barcos que você deseja importar. Tenha isso em uma página. Agora repita isso de novo. Certifique-se de que você tem todos os aeroportos que deseja importar. Dois diretores em uma página. Isso é realmente importante e vai economizar uma tonelada de tempo puxando o cabelo. Certifique-se de que todos eles I em uma página. Se você tem, digamos, uma página, outra página extra aqui, tem uma página para, e você tem outra saída aqui. Ele não será importado se a página nele selecionou as maçãs na página um dos que serão importados em princípio. Outra coisa iria querer ajoelhar-se. Isso é garantir que você tem as cenas que vão ser animadas em agrupamentos separados dentro da saída? Então você tem estado regional em seu próprio agrupamento seu estado de transição em seu próprio grupo e seu estado final em seu próprio grupo. Isso tornará mais fácil quando você importar seus arquivos em princípio. Por
favor, por favor, organize seus ativos assim para economizar tempo no futuro. Outra coisa é isso Você pode querer considerar projetar todos os estados de sua animação . Agora, na medida em que só podemos ter o estado original e tipo de visualizar como será
o fim . Ele sempre nos dará uma vantagem se tivermos nossos estados de transição e nossos estados finais com Então uma coisa que você precisa entender é a transição e o estado final definitivamente lhe dará uma vantagem. Eles não são necessários. Também pode ter o seu estado regional e importar isso. Então vá fazer o resto em princípio. Mas depois, se eu os desenhar em voz alta, eles sofrem um bom ponto de referência. A última coisa que vamos sair daqui é que você vai precisar nomear seus bens uma maneira sensata, de uma forma que você vai ser capaz de se referir a eles. Em princípio, eu geralmente recomendo fazer isso. Basta nomeá-los da mesma forma que você chamá-los na vida real. Quando recebi os bens no início, eles pareciam assim. Então, grupo para oval, mais Leah importada. Se importarmos isso em princípio, não
há como saber o quê. Mas se nós renomeá-los como esta ação mas na resposta Mas no botão compartilhar como manteiga Boda em vez de ter algo aleatório vendo o que é o Buda chamado aqui? Este retângulo frio sete retângulo sete não vai rebolar quando importamos para o princípio . Vai nos dar um tempo difícil. Então, uma coisa que você quer garantir é que seus estados e quaisquer elementos dentro de um dado nomes
sensatos, como você os chama na vida real. Então, para aqueles de vocês não sabem que os arquivos mais cedo e os seguintes, eu gostaria que vocês fizessem algo pequeno com relação a me nomear. Você vê a pasta chamada Grupo Apenas Renomeie cada pasta lá demais. O grupo de estados de transição. É muito fácil, e se você tiver algum problema. Você sempre pode comentar na seção do projeto abaixo, e eu estarei pronto para ajudar com essas dicas. Essa é a próxima lição em que importamos essa captura enquanto príncipes.
4. Como importar para o princípio: Oi, pessoal. Bem-vindos de volta à aula. Então hoje vamos lidar com como importar esse arquivo de esboço em princípio. E a primeira coisa que vamos fazer é abrir nosso diretor. Sim. Então a primeira coisa que você deve ver aqui é deixe-me apenas minimizar que isso não é bom. Você tem um popa em branco. Você tem uma tela anterior aqui. Então qualquer coisa que você faz aqui, você pode ser capaz de visualizar aqui. A tela anterior também vem com um retorno ao início da animação ou indo para a primeira saída. Então, se você tem C A não seria, em seguida, pressione comandou o para duplicar. Se você está nisso para cima e você os uniu, você pode ver isso e ele leva de volta ao seu primeiro estado. A outra coisa emitida nota é principal dá-lhe a capacidade de trabalhar com formas. Isso é um retângulo. E como você pode ver, parece que ele está em uma prévia. E se você apenas movê-lo para cima, algo que você faz notar é o Atwood atual que selecionou ISO um, que está atualmente na caixa de visualização. Então, no caso de você ter um cenário onde você não está vendo algo que você
acabou de editar neste lado da tela aparecendo aqui. Só saiba que é provavelmente você não selecionou que eu topo faria. Então você pode trabalhar com formas. Você pode trabalhar com texto. No entanto, texto que não recomendamos que você trabalhe com texto se você quiser um texto de imagem. Então você até mesmo um cenário no texto de anime Basta usar algo como Adobe após efeitos. O diretor não lida com animações de texto tão bem da minha experiência passada e também
da experiência da comunidade principal. Então use algo como após efeitos para isso. Vou deletar isso. Além disso, realmente isso faz isso. Então você só tem uma saída. Então, para importar um arquivo do esboço, basta chutar a importação e o que acontece é ele já pré-selecionar o arquivo que está aberto? E mais especificamente, se voltarmos para ah, Sketch Mile, ele vai realmente selecionar este arquivo e vai importar esta página. Isso está no tutorial anterior. Eu digo que no caso de você ter algum barco de arte que precisa de importação tê-los em uma página. Então, o que vamos fazer é voltar em princípio. O que acontece é isso? Então este valor de 2 x é o que é ciência de qualidade que você queria para renderizar os restaurantes? Então, uma das coisas que você precisa entender é que quando você importa seus ativos em princípio, eles são pasteurizados, que significa que qualquer coisa que fosse um texto no esboço agora se torna uma imagem e você não tem nenhum imagens vetoriais. Na verdade, esse é o problema. Você não tem nenhuma imagem vetorial em princípio, exceto as que dizem, se você selecionar um retal, que será uma imagem vetorial dentro de princípio. Mas se você trazê-lo de outro lugar, que será descansado. Agora ele está dizendo que a qualidade em que ele queria um X é para visualização normal, e eu prefiro trabalhar para que esse problema de pixel em particular seja mais adequado para a direção
nisso , por favor. Mas eu realmente animado antes que eu gosto da qualidade que você pode usar. Três. Executar uma praia mais detalhes do esboço, mas para mim x apenas faz isso bem. Então, vamos clicar em nossa importação. Então, se eu apenas movi isso para o centro, então no momento em que todos eles foram importados em um a bordo, todos eles vão aparecer na tela anterior. Se só queremos vender comando de imprensa como mudança eleitoral como eu selecionar e eu vou mover estes fazer fora da saída diz que você pode ver que desapareceu e então eu vou limpar na cena configurar para
cima e eu vou redimensionar este bom. Então, ele vai ver aqui? Temos um Fitch bonito ali. Então, só para confirmar o que eu disse, se você olhar para este ativo em particular, como você pode ver, nós não podemos editá-lo. Ele foi vestido, levantou seu não diretor. Esta é a mesma coisa o efeito tia-avó, e você pode ver onde o bom nome entra. Então, não estamos
muito confusos. Então, com isso, temos nosso horário importante em princípio e você pode visualizá-lo aqui. Você aprendeu como importar seu arquivo de esboço para o principal, como criar um não bode como usar o creme anterior. E vamos começar a trabalhar em como animar esta batalha em particular para nos assemelharmos algo próximo ao nosso estado final. Vejo-te no próximo
5. Nossa primeira animação: o botão de ação: Então, olá. Bem-vindo de volta a outra aula sobre como animar um esboço. Você eu estou usando o princípio. Então, para recapitular a última lição aprendemos como importar nosso arquivo de esboço para o principal
como criar um não entediado como usar elementos como o retângulo e o texto. Por que deveria usá-los? Eu não deveria. Aprendemos que ao clicar em importar, ele nos oferece a opção de importar o arquivo de esboço aberto do esboço para cima. Também discutimos sobre a qualidade que você deseja renderizar suas camadas de restaurantes. Isso e hoje vamos olhar para como executar a animação real. Então, por hoje, queremos animar este fundo em particular e tê-lo neste ex tê-lo do
estado final neste fundo particular, e nós não vamos tocar em mais nada por enquanto, mesmo esses ícones. Então o que vamos fazer é Foster começará duplicando esta obra de arte. Então selecione a cena configurar e pressione o comando D, o que criaria uma nova saída. E como você pode ver, está bem aqui. Então, basta selecionar o ícone de mais no segundo acima seria, de fato, o que eu vou fazer eu vou apenas nomear isso? Eu só vou dizer Iniciar estado e eu vou chamar este estado final. Então, no estado final, o botão disparar, o ícone X deveria realmente ter girado em tal número de graus. Então este é o painel, que você pode usar para alterar as propriedades dos elementos, que você vê na tela. Você pode manipular a propriedade X. Por que, Se você clicar no rótulo fora de sua propriedade específica, você pode apenas dirigir para ah duas posições ou alterar essa propriedade com maior posição. Vou devolver tudo a como está. Então a propriedade que queremos animar neste caso é o ângulo. Então vamos começar apenas girando para, e isso é 45 graus legal. Então, se formos para cá, esse é o nosso estado de partida. Em nosso estado final, você verá que está refletido. Mas como fazemos para animar isso e fazer a transição para aquilo? Precisamos de um evento que responda idealmente, quando você supera
isso, é suposto fazer a transição desse ícone para este ícone X aqui, então nós clicamos duas vezes no botão de ação e clicamos no botão relâmpago para adicionar um evento. Então você vai selecionar a parte superior e apenas segurar o mouse e arrastá-lo todo o caminho para o estado final que você deseja. Então, se clicarmos, você pode ver que ele realmente animado. E provavelmente não é tão visível agora, porque os graus que eram irritantes estão em muito. Então o que eu vou fazer é selecionar o ícone de mais e eu provavelmente vou girá-lo um pouco mais, hum, para alguma coisa. Vamos ver, da próxima vez que parecer que alguém 33 foi verificado. É assim tão simples. Então, se você clicar na seta, você pode realmente ver que você não tem opção dedo jogar ao redor com a flexibilização e o tempo fora desta animação. Então veja, eu quero uma tia de animação que ele está fora para começar rapidamente. Andi, então vamos ver, como você pode ver. Mas eu meio que gosto dos padrões. Vou ficar com isso. Mas só para você saber, você pode realmente mudar essas atenuações em particular. Você pode usar o gráfico de uma pesquisa para criar tal Isso é uma enseada personalizada. Então vamos voltar para a animação original e sim, hum, não é suave, mas você entendeu a idéia. Então vamos voltar para um padrão. Eu gosto de como isso funciona, como como isso parece e várias coisas. Então, digamos que nesta animação, isso é ação. Mas certo E nesse outro estado, vamos chamar essa ação, mas vamos chamar isso de ícone mais dois e ver qual será o resultado. Como vocês podem ver, já não anima o que estávamos acostumados, porque o que acontece é que suas camadas devem ser nomeadas da mesma maneira em ambos os lados . Para que a animação seja totalmente,
totalmente bem sucedida para o dedo da animação realmente transição todas as suas camadas têm que ser idênticas e você não pode sequer ver que estamos sendo informados aqui. Sim, como você pode ver dizendo animar, nomeando Leon tanto em placas, botão de
ação mais ícone e assim por diante e assim por diante. Então, o que vamos fazer para ter neste quadro de arte em particular? Precisamos ter o botão de ação, uma vez que estamos começando lá que o estado inicial é manteiga de ação e ícone mais no estado
final, ele vai procurar uma camada chamada botão de ação e mais ícone toe. Aplique o efeito de transição. Então, se clicarmos novamente vai notar que agora ele anima bem. Então a outra coisa que queremos fazer é quando você clicar no X novamente, ele precisa voltar. Então isso é bastante simples. E o que você faz é que você basta clicar no clique sobre a ação, mas selecione parar e apontou para o destino que queremos. E quando
clicamos, temos o efeito que pode ter um estado final, e você pode alternar entre os estados do fundo, que é o que essencialmente queremos. Em breve, nossa próxima aula, vamos olhar para o uso de componentes para que não precisamos criar um novo motor de popa para cada transição final. E é um corte curto como economizar tempo ao animar. Então, com isso, vou te dar um pequeno desafio. Você pode adicionar outro elemento à tela e apenas tentar animar de maneiras diferentes. Você pode mudar a posição desta garrafa, provavelmente movê-la de, digamos, ter a posição inicial ali e dizer que a posição final deve estar aqui. E se eu fizer isso, como pode ver, será movido para lá. Então o desafio que eu dou a vocês é apenas brincar com os diferentes tipos de flexibilização
nesse jogo com os diferentes tipos de efeitos. É muito, muito simples e familiarize-se com eles com isso, vejo vocês na próxima aula.
6. Animação final: os botões de opção: Oi. Hoje, vamos ver como animar esses três botões. Desculpe por isso. Como animar esses três botões e tê-los vindo de baixo do botão mais e aparecer neste lado Semelhante a como temos o marcado fora em transição. Então, a maneira como vamos fazer isso é primeiro, precisamos de cada um dos ícones de uma origem. Então a idéia deve ser quando eu clicar nisso, eles devem sair de baixo deste botão. Então lá do estado, isso é no estado original que eu vou fazer. Vamos ter uma mudança aqui. Então eu vou fazer é eu só vou tomar isso as opções revelando e o que eu vou fazer. Vou copiar. E eu vou colar isso e eu vou mover isso aqui mesmo. Eu só vou enfilmar isso. Está bem. Incrível. Vou desligar isso por enquanto, porque não precisamos ver isso em ação. E se nós notamos, se você se lembra da última vez por menos 20 carne, bem, eles realmente precisam ser nomeados da mesma forma. Então, na final, onde é isso? Sim, nos estados finais estão entediados. Também precisamos das mesmas camadas do outro lado. Então eu vou para isso eu vou. Vou escondê-los da vista e eu vou copiar e besta. Sim. Então, logo após copiar colar, podemos agora começar a animar esses estados e eu posso começar a reorganizar esses elementos abaixo deste botão específico. Então agora eu vou pegar isso no momento em que eu vou apenas fazer isso manualmente. Oh, deixe-me apenas adicioná-los aqui quando você empilhá-los em cima do outro e empilhá-los em cima e, em seguida, eu vou mover o botão de ação acima de modo que ele fica em cima deles e eu vou também, de fato, já que já feito isso, eu vou apagar Copiar isso. Na verdade, não
há necessidade para essa ação, mas em mais agora também, excluir o botão de ação e sim, lá vamos nós. Portanto, há uma coisa que precisamos mudar. No entanto, isso está no ângulo de zero grau. Sim. Então vamos ver. é nada exatamente. Tal como esperado. Então, quando fazemos animação de quando eles clicam aqui para aqui, então duas coisas vão acontecer. Primeiro, devemos obter o botão de ação de transição para no ícone X. E a segunda coisa é que estes Icahn devem aparecer divertidas as teclas de seta para apenas
movê-los ao redor. Mas eles deveriam aparecer. E nós apenas alinhamos isso exatamente. Então eles devem realmente vir de baixo do ícone também. Então, quando clicarmos que estes também vão aparecer. Então, a primeira coisa que precisamos para garantir que nossas camadas realmente nomearam o mesmo. E como você pode ver, o nome é diferente. Então isso não vai funcionar. Então vou tirar um tempo e limpar isso. Não animar isso tudo vai fazer é apenas se pressionarmos muito tempo sobre ele, o evento padrão que será selecionado é um top. Então, se desistirmos, o que vai acontecer é bem, uh, mas há uma coisa que precisamos para animar o e que é o ícone X. Então vamos correr direto para o ícone mais novo, o Waas 133 mais novo e com aquele boo e como fizemos lá, embora em meninas vamos adicionar um top back. E assim como aquela animação suave de todos os ícones ali
7. Animações reutilizáveis usando os componentes e encerramento: Portanto, há um recurso em princípio chamado componentes que nos dá a capacidade de criar animações
reutilizáveis. Então, quero dizer, tais componentes como estes não precisam essencialmente ter um fundo inteiro por trás deles o tempo todo. Você pode apenas ter este item em particular como seu próprio componente, apenas animando por conta própria. Então, para criar um componente ou alegado sobre isso em um componente, o que vamos fazer, eu vou clicar sobre isso. E se o seu próprio princípio três. Basta clicar no componente de criação e isso deve cronometrar sua camada em um componente. Então a razão pela qual ele tem este endereço porque há um evento
ao qual ele já foi anexado , então ele em vez disso vai fazer
bem, bem, não toque nele. Não precisamos mais dele. E vamos voltar para a instância e o que eu vou fazer. Eu vou levar isso e para editar você selecionar os componentes, que tem o ícone de engrenagem e clique em editar componente, e eu vou criar uma nova arte seria onde eu vou colar. Deixe-me apenas garantir que eles estão alinhados. Ok, os estão alinhados. Vou aumentar o tamanho disto para cima. Deixe-me cheirar isso e centralizar isso também. Certo, então a mesma coisa. E se eu selecionei lá porque você pode ver. Mas parece que está avançando. Então isso significa que há uma parte dela que não está alinhada. Sim, essa é a coisa sobre animação. Você tem que garantir que o chili está se movendo o mínimo possível para criar a estática. Eu sinto que nós desejamos ganhar apenas um pouco mais e estavam lá. Ok, então só para renomear, vou chamar isso de opções. Sim. Então, se você voltar para a instância, podemos agora ver que não precisamos ter qualquer relação com isso apenas. Clique aqui. E assim, não
precisamos ter dois estados, especialmente para pequenos componentes como aquele que você precisa para animar em
telas diferentes . E, como de costume, renomeie seus componentes. Sim, então é isso. E você pode deletar isso, faria. Não está mais sendo usado, e é isso. Então você aprendeu a fazer animações sem os componentes. dedo do pé do mal aprendeu como os componentes podem entrar para permitir que você crie animações reutilizáveis e acelere seu trabalho. Gripe Então eu definitivamente encorajo você a verificar o próximo curso que eu vou ter, que vai mergulhar mais profundamente em princípio em coisas como efeitos de paralaxe rolagem como usar diferentes eventos para criar animações bem conhecidas que são encontrados no drible. E eu definitivamente encorajo você a ficar sozinho. Fora isso, eu encorajo você a compartilhar seu projeto, compartilhar o que você vem acima com, e eu vou ter certeza de comentar sobre ele. Com isso, eu tenho um bom dia e obrigado por ouvir.
Dennis Muthuri, UI Designer, UX Lover and Saxophonist
