Figma: componentes interativos

1. 01 Introdução: Ei, bem-vindo a este curso. Neste curso, veremos como os componentes interativos funcionam. Visto fema, eles já estão por aí há algum tempo, mas em uma versão beta. E, finalmente, não há muito tempo eles foram implementados na versão final da Figma. Então, estaremos aprendendo o que estão interagindo componentes, como fazê-los e para que servem. Então, vamos fazer componentes interativos para botões, rádio sobre aqueles como litros, como iniciantes. Carregando barras, até animações, criação, criativo, todas elas com componentes interagindo. E você verá que eles tornarão seus protótipos mais vivos. Então, se você estiver interessado e se aprofundar em criar fluxos de trabalho mais consistentes na Figma me atraiu para este curso. 2. 02 botões: Ei, então, muito obrigado pelas pontuações da unidade dois. Como vimos na introdução, veremos algumas interações. Nós podemos fazer. Temos componentes interativos. Como você pode ver aqui no botão de opção, tenho todos esses estados como Holger quando clico o mesmo quando esses botões que tenho, o estado homozigoto e o estado em todos eles também. Eu tenho isso mais leve do que o fim de semana replicar e torná-lo interativo também. Estes como BGR aqui, ou essas pequenas animações que podemos acionar quando clicamos em alguns lugares também, essas barras de carregamento ou até mesmo esses nomes de entrada, como você pode ver, quando eu faço isso no estado do mouse ou no estado, temos essas animações legais com a barra de revestimento ou a escrita como se você estivesse digitando também, essas animações no nome da entrada e quando eu finalizar ou passar o mouse para fora ou eu perco o foco na entrada, isso fará estes. Então, vamos começar e vamos criar outra base aqui para criar nossos componentes. Este vai ser o tutorial ou ok? Então, para estes, vou começar a avaliar um quadro. Lembre-se que você pode simplesmente pressionar F. E eu vou adicionar esses MacBook Pro. Então, esses serão nossa interrupção dos componentes. E vou criar outro quadro aqui para começar essa coisa. Componentes de hora. Então, isso vai ser playground. Certo? Então, vamos começar com os botões, que eu acho que eles são. Haverá o mais parecido. Então, vamos começar criando um retângulo de altura será 40. E vou aplicar um raio de fronteira de quatro. E vamos criar algum teste aqui, que será uma garrafa. Isso não importa. E com isso, vou criar um layout automático. Lembre-se que você seleciona os dois elementos e pressiona Altoid, ok? Então eu vou fazer como uma bobina primária ou algo assim, azul. E isso vai ser branco. Só vou criar um componente com isso, ok? E esse será o nosso botão. Certo? Nosso botão como padrão de chicote, esse será nosso estado padrão. Vou duplicá-lo e o holandês porque queremos criar bárions com esse componente. Certo? E eu só vou aqui e esse é HSL e apenas seja excluído e este será o nosso estado de paira. Certo? Então criamos assim componente sim pessoa lá dentro. E agora vou anexá-lo novamente e vou criar uma propriedade de camarilha, ok, então, para B, então vou deixar um pouco mais escuro. Quase preto. É tão bom. Então, vou renomear estes para a propriedade Glick. E esse será o nosso estado de paira. Certo? Então, eu só vou, como aqui, como você pode ver, ainda não é um componente. Então, e agora é um componente. E lembre-se disso invariantes. O que você precisa fazer antes de criar corpo na semente, selecionando os elementos que você deseja. E aqui à direita, você sim, combina variantes de mama. E o que vai fazer é criar um componente com estados diferentes, ok, então, neste caso, a propriedade é essa data. E vou colocar o antes primeiro, depois o estado do mouse e o clique. E agora é onde os componentes interativos entram em jogo. E se pressionarmos aqui no protótipo, e selecionarmos nosso primeiro botão, o que queremos é quando passarmos o mouse para esse estado aninhado. Ok, então em vez de camarilha, o que queremos esses pairando selvagens vêm para essas propriedades, para o estado de paira dos dois V. Certo? E então uma coisa boa, é por padrão, acho que vem como um instante aqui em animação. E o que eu acho que é o melhor é você colocar em um animado inteligente. Então, vai fazer uma transição suave entre os dois estados. E podemos colocar aqui em vez de 300 milissegundos, sim, trazê-lo para 200. Certo. Então, vamos fazer a mesma coisa com isso. Quando nós metade, quando, quando nós geek no estado, o que queremos isso faz enquanto você está clicando em vindo para esse estado, ok? Então, enquanto pressiona, enquanto clica pressionando chega a esse estado, ok. Então verifique se Martin, ele fez esses ativados e 200 milissegundos, você tem que apenas nós como quiser. Mas acho que é um bom escuro. Então, vamos tentar nosso botão. Então, para isso, o que vamos fazer é apenas semear a velha chave para trazer gás. Ou poderíamos vir aqui para ativos. E em nosso tutorial, basta acertar nosso componente, nosso componente de botão, e arraste-o. E vamos ver se está funcionando. Vamos ao playground. E quando passamos o mouse, vemos que está fazendo isso. E quando clicamos, fica preto. Então, está funcionando. Nosso primeiro componente interativo. Ok, então vamos entrar no próximo. 3. 03 botão de rádio: Então, vamos para o rascunho de aninhamento dos componentes enquanto temos esse som interrompido e horrível lá fora. Então, o próximo será o botão de opção. Vai ser, vai adotar a mesma abordagem que está. Então, para estes, vamos criar como um círculo 24. E sim, e o que queremos é criar sempre o componente mais complexo possível. E então, e depois remova algumas partes. Então, vamos al-Banna derrame, vamos dizer algo assim. E o campo neste caso será branco. E coisa importante. Como mais tarde, teremos como um bom efeito de pairo legal. Só vou duplicar essa elipse. Vou começar a renomear. Portanto, este é o círculo selecionado. Este será o nosso plano de fundo, nosso círculo de fundo. E este, que está no, na parte inferior. Este será o nosso estado de paira. Ok, então vou arrancar como passar o fundo. Você verá agora. Então agora o que queremos, é também. Sim, selecione essa cor, coloque do lado de fora e coloque como três. Então, esse será nosso estado de pairar. Vamos conseguir algo mais e não tão duro. Então, este seria nosso selecionado com uma propriedade hover. Talvez eu coloquei como aqui como quatro em nosso fundo Hubbard aqui, como quatro para que possamos ver mais. E esse seria nosso grande componente com todos os elementos, com a seleção de hardware, tudo. Então, o que vamos fazer aqui agora é criar um componente e renomeá-lo para o botão de opção está selecionado. Passe o mouse. Certo? Portanto, temos nosso primeiro componente e o que queremos fazer é duplicá-lo como podemos ver alguma instância. Então, queremos obter Essa instância. E agora vamos começar a fazer alterações aqui. Então, isso vai ser branco. Vamos criar o estado de focalização, mas quando ele não for selecionado. Então, temos isso e também vamos criar. Agora, um componente no crânio, neste caso, não está selecionado. Ou padrão. Você pode renomeá-lo ou nomeá-lo como quiser. Certo? Então, vou duplicar novamente estes e agora vamos criar o estado em que o estado padrão não está selecionado e não é nada Hubbard. Então, para D é o que eu vou fazer é esse derrame, eu só vou trazê-lo para branco. Ok, então esse seria o nosso botão de opção padrão. Portanto, não selecionado. Padrão ou assim. E outro estado que não tenho é apenas um botão selecionado, não com o estado de focalização. Então, vou duplicar esses deduzidos. Então, temos isso como um componente independente a partir de agora. E novamente, esses antecedentes do porto que temos, e isso vai trazê-lo para branco. Portanto, temos o padrão desmarcado e o estado do mouse. E agora vou criar novamente, isso tem um componente. Este é o porto selecionado, não. Esse é o estado padrão, então vamos apenas renomeá-lo. E temos todas essas datas aqui para o Holober. Quero fazer algumas mudanças nesses dois porque nós, o pairar, gosto de marcar um pouco mais. Estes, você sabe, você sabe, esta fronteira aqui. Portanto, temos nossos quatro componentes criados. Então, vamos novamente combiná-los como variantes. E eu só vou reordenar isso um pouco porque geralmente você tem o botão de opção deles assim. Então você vem para o estado de horror. Quando você clica, você chega ao pico e ao estado do mouse. E então, quando você passa o mouse para fora ou sai do mouse, você chega a este estado. E se eu clicar aqui, ou você provavelmente tem aqui, ele vem aqui. Certo? Então, vamos começar de novo com nosso protótipo aqui. O que queremos é quando passamos o mouse Aqui, ele se trata deste. Então, em vez de clicar, tendemos a fazer um tempo pairando o smart animate para 100 milissegundos. Quando clicamos aqui. Isso é bom. Quando clicamos, queremos mudá-lo para o estado, ok? E a mesma coisa aqui. Quando abrigar, quando não estamos mais sem ponteiro aqui o que queremos, queremos chegar a este estado, ok, então aqui está a própria folha da boca. Certo, vem aqui. E o que queremos isso quando pairamos estes, se trata desse estado. Então, o que fazemos é arrastá-lo aqui. E enquanto a prostituta chega a essas esperanças selecionadas. Então, novamente, vamos ao nosso playground e vir aqui para os ativos e trazer nosso novo botão de opção de filosofia. E vamos ver se isso funciona. Quando eu pairo, ele faz o pairar. Quando clico, é perfeito. E eu perdi um. Perdi um estado é quando clico aqui, ele tem que voltar ao padrão em forma de S não selecionado. Então, viemos aqui novamente. Então, chegamos aqui e quando levamos aqui, o que queremos é chegar a esse estado, ok, então é isso que vamos, no clique vai mudar aqui. Então voltamos aqui nosso tutorial e agora clicamos e, como você pode ver, nós o temos lá, ok? E há algo faltando porque agora eu não estou pairando. E como você pode ver, o estado de paira está lá. Então, há outro passo que temos que fazer é que temos, estamos pairando. Mas quando o que queremos aqui é quando, quando a folha de Mao, quando não estamos mais nisso, vem novamente a esta. Ok, então vamos ver se funciona agora. Certo, isso está funcionando. E quando fazemos a folha do mouse, como você pode ver, ela tem um estado padrão. Portanto, temos nosso componente interruptivo agora funcionando perfeitamente. Então, vamos para outro componente. Vamos com o componente de entrada. Este é bastante complexo. Então, vamos em frente. 4. 04: Ok, então vamos começar a projetar nossa opinião também. Mais uma vez, deixe-me mudar aqui para o lado em vez de protótipo. Novamente, como fizemos com os botões, vamos colocar uma altura em 40. Vamos colocar nosso raio de fronteira para a lecitina um derrame. Aqui, você pode criar a entrada que você deseja e o estilo que você quer aqui, nós vamos com um branco. Geralmente. Como eu disse, que eu gosto de criar os componentes mais complexos e mais complexos no início e depois começar a remover peças. Então, vamos começar. Isso vai ter como um portador de lugar. E isso geralmente é um pouco, sim, não tão escuro. E também, outra coisa que queremos é ter aqui como, como o nome do titular do lugar, como o nome do ou esta entrada sabe, por exemplo, é o rótulo de importação, ok? Ou vamos chamá-lo de apenas rótulo. Em algumas entradas, como no material, o que ele faz é o suporte do lugar ou o rótulo geralmente está dentro e depois vem, torna-se o rótulo. Então, é o bebê de espaço reservado no início e correntes como o trabalho de parto. Então isso é algo que vamos fazer. E para .org nós vamos criar. Aqui está um layout automático. E para isso, basta pressionar Shift a e você vê que agora estamos, temos aqui agora o layout automático ou você pode vir aqui e entrar e pressionar o botão direito do mouse e Alfa e layout automático. E o que queremos aqui é colocar como um fundo branco sobre ele. Então, sim, peito plus. E podemos ver que isso é muito grande e não precisamos de tanto espaço aqui e ali. Então aqui vamos colocá-lo em dois. E isso vai ser em dois também. Então, neste caso, temos o rótulo aqui é que ele não polsurge no suporte do local. Então e assim como fizemos com esse botão de opção, quando passamos o mouse, queremos alguma borda, focar nos componentes. Então, vou duplicá-lo e vou entrar aqui em como isso é feito. Então, isso será chamado de rótulo. Temos o espaço reservado R aqui, então eu tenho nosso histórico. E este vai ser o pairar de fundo. Certo? Então este é o mais recente. Este não é o fundo que vai ter novamente esses quatro do lado de fora, como fizemos aqui. Só vou copiar o estilo. Então, para isso, você respira o Comando C. E aqui vamos colá-lo. Nosso plano de fundo pairou. Então , sim, ele pagou é baseado no estilo e apenas fazendo isso. Ok, então quase temos todos os elementos. Então, sim, vamos criar um componente já com isso. E estes serão o nosso pairar de entrada. Sim, o campo de entrada passa o mouse. Ok, então novamente, vamos duplicar isso e separá-lo. E o que queremos agora, é derrubar esses rotulados, que será nosso espaço reservado. Lembre-se de que nosso espaço reservado vai desaparecer. Então, vamos dar a ela a opacidade de 0. E esse rótulo terá o mesmo tamanho que um suporte de lugar. Então aqui temos 16, 24. Então, agora vamos aumentar isso para 16. Certo? E o que queremos que sejam, para tê-lo no mesmo lugar aqui que esses espaços reservados. Então, para isso, e isso vai se livrar disso para que possamos alinhá-lo bem. Então, removemos esses layouts automáticos. Então agora está no mesmo lugar, certo? E vemos aqui dizer data e facilitar esses SAP. Então, nós os temos no mesmo lugar. Certo. Então, esse seria o estado de pairar, mas não o campo ou o que quer que seja. Sim, este seria o padrão, o estado de focalização padrão, ok. E vou criar um componente com isso e depois duplicá-lo novamente. O conjunto de dados, lembre-se, eu gosto de fazer isso e duplicar esses componentes. Porque às vezes, quando você duplica esses componentes de detalhes, eles mudaram os nomes. E precisamos ter os nomes exatos aqui dentro do componente para fazer a transição também. Ok, então o próximo passo aqui será nosso estado padrão. Eles são muito básicos a entrada, ok? Então, neste caso, o traçado será o pass-through. A opacidade desse traço será 0. Certo? Portanto, esse é o nosso estado padrão. E esse seria o nosso campo, esse estado na verdade. Então, quando, quando a entrada já é campo e queremos outro passo aqui, é por isso que digitar. Então, vamos replicar quando clicarmos em uma digitação importante. Contanto que você comece a piscar. E queremos replicar isso também, certo? E, no início, temos esses espaços reservados, como nos ajudar. Então, vou copiar isso e colá-lo aqui. Então, isso é bom. E da mesma cor e, e esta será nossa propriedade de digitação. Certo? Veremos agora talvez isso seja um pouco louco. Agora mesmo o enredo vai ficar bem, então, sim. Certo. Então, então, quase já temos todos eles. Então liste, novamente, selecione todos os componentes combinados como variantes. Essa propriedade será o estado. Esse é o padrão. E nós temos o excesso de estado. Nós temos esses “whew” este. Eu não tenho como, desculpe. Esqueci de comer, é isso. Então, vou criá-lo como um componente e você pode arrastá-lo para aqui. E agora temos outro descanso. Nós vimos. Vamos ver que temos quatro estados. Eles são culpa, que é este. Temos o estado do mouse aqui ou o padrão. Então esse pode ser o campo quando, quando, quando a entrada for campo, aqui vamos ter esse pairar. E esse será o foco quando estivermos digitando. Ok, então vamos conectar esse protótipo para ver como ele funciona. E mais tarde, vamos adicionar mais algumas interações em seus componentes para, então, neste caso, o que queremos é enquanto pairamos, queremos voltar aqui. Onclick. Por quê? Quando, quando clicamos aqui, queremos voltar ao chiclete nesse estado. Então, honestamente, vamos aqui. E sim, On Click out quando pairava sobre isso, enquanto pairava sobre a folha de Mao, queremos vir a este estado, ok? E nesse estado, o que queremos isso, não queremos essa fronteira. Então, vamos obter a opacidade para 0. Então este é o campo desse estado, ok? E isso vai ser que eles foram patrimoniais. E para o Dia do Diabetes há algo interessante com esses efeitos piscantes. Então, para eles, vamos criar outros componentes interagindo. Vai consistir em apenas uma linha. Digamos que seja algo em torno disso. Vamos ver. Sim, algo em torno disso funcionará. E para estes, queremos apenas criar 22 componentes, um com o preto e outro com o Norba, uma largura 0 basicidade. Então, será como fazer essas mudanças. Vamos vê-lo. Então, vamos chamá-lo de piscar, sendo preto. E o outro vai ser, vou ajustar isso e mudar a opacidade para 0. E vamos criar um componente com ele, que é a luz piscante. E esses dois componentes, vamos combiná-los como o componente piscar. E nós temos aqui, isso vai ficar preto e esta vai ser a luz, e esta será essa data. E o que queremos que seja uma animação contínua entre esses dois elementos. Portanto, não é enquanto clicar não é um tempo pairando para fora. Só queremos o fim a placa sozinhos. Então, para isso, o que fazemos é chegar ao protótipo. E nós temos esses, o outro componente, componentes invisíveis. Então, o que vamos fazer, é apenas para conectá-lo. E em vez de clicar, vamos depois do atraso. Então, o que queremos estes quando esses componentes, ele está lá, na tela, vai começar por si só a funcionar após algum atraso. Nesse caso, o que queremos que isso comece imediatamente. Isso diz respeito a ser um milissegundo é o valor mínimo que podemos usar aqui. Não podemos colocar 0, então é um milissegundo e nas estrelas, a interação do dia. Ok, então o que estamos dizendo aqui é quando esses componentes estão na tela começarão em um milissegundo. Então, instantaneamente, ele vai começar e depois mudar para esse outro estado com um animado inteligente. E aqui vou aumentar esses 232300 milissegundos. E o que queremos isso depois de 300 milissegundos desse estado, queremos voltar ao primeiro. Então criamos essa ilusão de piscar como preto, opacidade, capacidade preta, preto. Você sabe, vamos ver como funciona isso agora. Então, em vez de clicar novamente, vamos atrás do atraso e colocamos aqui como um milissegundo. Certo. Então, vamos ver como isso funciona. Justin, nosso playground. Ok, então vamos ver como isso está funcionando. Então viemos aqui ao nosso playground, pressionamos Play, e podemos ver que não está fazendo nada. Não sei o que está acontecendo aqui. Sim. Agora está funcionando. Às vezes leva algumas vezes para esses dois funcionar, pois, como você pode ver, temos apenas um quadro e tudo está funcionando aqui. Temos nosso tipo piscando no estado. Então, está funcionando. Então, vamos voltar à nossa interrupção deste componente aqui. Então, vou me livrar disso. Não precisamos mais disso. Acho que vemos que está funcionando. E o que fazemos, é que estou no gás voltando a arrastar esses componentes de vinculação ou poderíamos vir aqui para ativos, trazer um piscar de olhos aqui, e vou adicioná-lo ao nosso intuito, esse componente, ok? É quando clicamos aqui e começamos a digitar. Digamos que tenhamos esse componente piscando aqui. Certo? Então, vamos ver em nossas camadas, sim, temos nosso piscar aqui. Certo? Então, vamos ver como nossa entrada, está funcionando até agora. Então por diante, vamos voltar e pressionar play. Então agora temos sim, há algo que eu não estou fazendo bem aqui. Esqueci de conectá-lo. Esta não é a propriedade. Eu quero que a propriedade que eu quero por padrão seja o estado padrão. Então, sim. E eu tenho algo aqui que não está funcionando corretamente. Então, sim, temos o estado padrão. Vamos ver nosso protótipo. Enquanto paira as cadeias aqui, enquanto clica em alterações na digitação, ok? E quando digitar aqui na folha do mouse vai mudar aqui. Ok, então sim, está funcionando, está funcionando bem. Então, exatamente quando passamos o mouse aqui, vemos que temos esse estado. Quando clicamos, é uma estrela como estamos escrevendo. E imagine que escrevemos algo dentro da entrada e quando passamos o mouse para fora do campo, ok? Portanto, a entrada está concluída. E aqui, a coisa mais interessante para mim, é como implementar essas propriedades piscando dentro dessas entradas, ok, então você pode criar uma interação mais complexa. Então, vamos com um S1. Neste caso, vai ser d um spinner. É muito bom. Então, vamos em frente. 5. 05 de rotador: Ei, então vamos parar que sem um spinner para estes, eu só vou criar um retângulo. Para ver nosso spinner também. Vou criar o círculo com você de 32 por 32 com este bom tamanho para ele. E eu só vou adicionar um derrame aqui. Bem, ainda não. Então aqui isso vai ser um traço branco. Então você pode ver que temos esses arcos aqui. Então, o que podemos vir aqui. E aqui, vamos fazer isso como 65%. Então vemos que temos isso e não precisamos mais de um derrame. Certo? Então você pode ver que você pode movê-lo e mais tarde é o que vamos fazer. E se você puder deixá-lo assim ou se quiser criar como um raio de fronteira aqui, basta pressionar então. Ou você pode fazer isso, você sabe, você pode fazê-lo como quiser, então é bom para mim. Então, este será o nosso Primeiro Estate desses spinner. Então, este será o spinner como o último. Ou você pode chamá-lo certo ou para cima ou o que quer que seja, digamos que escreva-os. Certo, este será o nosso primeiro estado. Mais uma vez. Nós peneiramos o peito ou Alt para duplicá-lo e depois separá-lo. Fazemos isso para que o nome permaneça o mesmo, ok? Elipse 1. E aqui vemos o nome desse elemento, o mesmo, porque se você duplicar no início, mudará o nome para elipse 2 e 3 e 8, 4, e mais tarde não vai escolher animação D. Portanto, é importante que quando você vai animar algo inteligente, você precisa dos mesmos nomes, ok? E o mesmo tipo de elementos aqui. Então, sim, o que vamos fazer é que no próximo estado vai girar para baixo. Então, para isso, o que vamos fazer, é girar este e este. Queremos isso como menos 90 graus. E este vai ser o nosso fundo, direito, fundo. Certo? Mais uma vez, duplicamos com isso, é isso. Selecionamos novamente o elemento e o relacionamos mais com um 180. E isso vai ser nosso arrependimento aqui. E este será o nosso canto inferior esquerdo. E precisamos do estado mais recente. Há, novamente, duplicar o holandês e selecionar o elemento e depois filme também, 90 graus. E, novamente, selecionamos isso e criamos um componente a partir dele. E isso vai ser o Leftop. E já temos tudo o que precisamos. Então deixe-me ajustar isso para que possamos animá-los melhor. Deixe-me alinhar isso um pouco. E esses, vamos trazer esses dois aqui. Certo? Então, vamos criar um corpo e com todos esses componentes que os combinarão como variantes, essa será a posição. Certo? Então, vamos começar com este. Queremos começar aqui, vir aqui, vir aqui, vir aqui, vir aqui. Certo. Ou você poderia começar aqui se quiser. Mas isso é, vamos começar com o a. Então viemos aqui para protótipo. E o que queremos, lembre-se do que fizemos com o estado piscando. Queremos ser autônomos, então ele anima por si só. Então, novamente, após um atraso de um milissegundo, queremos, em vez disso, S por animar este. Mas em vez de ISI entrar e sair, o que queremos é um movimento linear. Então, é linear. Não temos como invadir toda a propriedade, então temos, queremos o linear aqui. Vamos começar com 300. Agora, mais tarde, se virmos para algo mais baixo, podemos mudar esse valor. Então, o próximo passo seria mudar para essas propriedades. E novamente, vamos para após o atraso, um milissegundo, linear, 300 milissegundos no Smart Animate. E desse estado para este, novamente, após o atraso, um milissegundos negador ou 300. E novamente, nós fizemos, isso vai ser um loop. Então, novamente, temos aqui, queremos aqui depois de um atraso um milissegundos e 300 com um linear. Ok, então vamos tentar nosso spinner aqui. Então, viemos aqui ao nosso playground e muito menos do nosso spinner aqui. Ok, então, bem, vou fazer alguma coisa, vou me livrar disso. Bem, vou mudar esses azuis demais. Ou mesmo vou ser um pouco mais criativo. Digamos. E vamos tentar algo diferente aqui. Vamos escolher esse azul para que possamos nos livrar disso. E o que queremos isso quando esses movimentos vão mudar de cor. Então sim, dois, para ver uma animação melhor aqui. Animação mais fria, enquanto as cores não são as melhores. Mas sim, isso salvará nossos barbeiros. Ok, então aqui, eu quero começar com o DOP certo. Ok, então vamos começar com isso. Então, vamos ver como isso funciona. Mais uma vez, demora um pouco. Então, a animação para começar. E agora vemos que temos nosso spinner e ele está mudando sua cor sem falhas. É muito bom. Então, vamos voltar. E como você pode ver, é tão baixo. Então, se você quer que ele vá mais rápido, é bem simples. Vamos colocar esse pouco aqui. Então voltamos aqui para protótipo. E o que queremos fazer é mudar isso para, digamos 150. E novamente, vamos selecionar este, 150, 150, 150. Então voltamos aqui. Podemos ver que agora isso é muito mais rápido. É melhor. Ok, então criamos nosso spinner. Então, vamos com um S1, que será nossa barra de carregamento, que é bem semelhante a esse componente que criamos agora. Então, vejo você na próxima lição. 6. Barra de carregamento 06: Então, vamos criar uma barra de carregamento. Então, para isso, vou criar uma barra sobre os grandes associados estão certos. E o que queremos é ter como um histórico constante aqui. Então, o que queremos que eles criem? Sabe, um bar com, com nosso azul. Vamos selecionar nosso azul aqui. E temos que criar propriedades diferentes. O que queremos que isso, essa barra até o começo apareça, depois vá para aqui. E então o ano frágil aqui, algo assim. Certo? Então, sim, então é isso que vamos fazer. Então precisamos de estados diferentes para isso e essas barras, ok, isso vai ser, Vamos vir aqui em camadas. O cinza será nosso plano de fundo. E precisamos desses que será nossa barra de carregamento. Certo? Então eu vou criar, isso vai ser como o estado intermediário. Digamos. Vou duplicá-los neste caso, como você pode ver, é manter os nomes, então não é a adição de um ou dois ou três, então estamos bem para ir. E o nosso primeiro encontro, o que queremos é apenas um vazio e vazio sim. E barra vazia e vazia. Certo. Então, para estes, o que vou fazer, está trazendo isso aqui e fazer isso 0%, ok? E então, como um estado vai ser, o que queremos é que essa barra comece a carregar. Então, esse será nosso primeiro estado. Este será o nosso segundo estado. Então essa barra chegará a esse estado. Ok, então ele vai entrar no meio e ser maior. E o que queremos como estado final ou estado intermediário é este, e essa barra está chegando aqui, então a barra vai se esticar um pouco. E o estado final, é bem parecido com o primeiro. Mas à direita. Então, esses pontos de barra invisível, temos medo. Queremos isso, queremos que ele esteja alinhado com o, para o chegado. Então, vou me alinhar aqui à direita. E agora, como podemos ver, temos essa barra, barra invisível lá. Então, estamos prontos para ir. Vamos começar a criar componentes com ele. Vamos criar esse primeiro componente. Então, vamos criar este outro. Vamos criar este. Vamos criar este e este. Então, para isso, vou combinar isso como baryon agora e renomeá-los para carregar embarque. Certo? E esse será o primeiro estado. Isso vai acontecer, este será o segundo. Este será o terceiro. Vai ser o quarto, e este será o quinto estado. Certo. E essa será essa data. Então, vou reordenar isso. Não é importante e, na verdade, mas para manter as coisas arrumadas. E agora é hora de animar isso. Então, novamente, vamos usar o que usamos no spinner. Essa interação, que é 1 após o atraso, novamente, um milissegundo, queremos torná-la tão inteligente. E isso vai ser como 20 a 100, desculpe. E isso vai ser linear por enquanto. E novamente, fazemos as mesmas coisas depois atrasar um milissegundo que Martin, ele fez linear. Sim, então, e vamos ver, vamos ver como, como ele funciona. Um milissegundo. Lembre-se que isso é importante. Não sei por que não está mantendo o valor. Então eu tenho que mudá-lo toda vez que venho depois do atraso. Então, vamos ver se tudo está bem aqui. Sim, tudo é em um milissegundos. Então, novamente, chegamos aqui ao nosso playground, chegamos a ativos e trazemos nossa barra de carregamento aqui. Algo importante. Para fazer isso como um loop, precisamos conectar o último ao primeiro novamente. Ok, Então novamente, depois da camada um milissegundo, vamos ver como isso funciona. Novamente, tenho que pressionar R Para reiniciar o componente. Uau, isso foi muito legal. Você vê? Então, está fazendo esse tipo de escalar em animação no meio e está desaparecendo. É muito bom. Então, estou bastante satisfeito com o resultado. Então, vamos ver. Outro componente. Neste caso, vai ser e é mais leve. Então vejo você nisso tem menos que. 7. 07 de slider: Vamos continuar com nossa viagem de componentes interativos e vamos criar tênis mais tarde. Então, o controle deslizante é bastante parecido com este que criamos aqui. Então, novamente, vamos criar como um retângulo de uma grande fonte. Nesse caso, vamos para outro raio de fronteira de 10. Então, ele obtém esse tamanho de movimento lá. Então vamos criar como 24. Portanto, é grande o suficiente para nós trabalharmos com isso e com o controle deslizante. Exatamente a mesma coisa que faz. A barra de carregamento tem, precisamos de dois retângulos, um para o fundo e 14 quando, quando o controle deslizante estiver azul. Quando fizemos isso e você sabe, nós temos esses, esses como medidor. Certo? Então, vamos voltar aqui para nossas camadas e ver como isso está indo. Então, o que queremos aqui é o nosso passado. Para renomear isso para plano de fundo. Este será o nosso medidor. Você pode chamá-lo de tudo o que você acha que vai para você. E esta será a ária arrastável. Então, vou chamá-lo de droga. Certo? Então, com esses elementos, temos todos, bem, e estes, vou torná-lo um pouco mais suave e isso vai ser um pouco mais escuro, algo em torno disso. Ok, então temos nosso controle deslizante aqui. Então, novamente, o que queremos que isso tenha a nossa totalidade, é como se tivessem feito e depois começarem a resenhas. Para começar a mover os componentes e revisões ou dar-lhes opacidade ou para funcionar. Ok, então temos nosso controle deslizante completo aqui, então vamos criar um componente, ok? E neste caso, o controle deslizante estaria aqui. E o quê? E então vamos duplicar isso como uma instância. Lembre-se que nós fizemos, é isso. E novamente, vamos mover nossos componentes para o quadril para substituir o estado inicial, digamos, ok. Então, para d é o que fazemos é sim, grande barra R aqui e começar a revisá-lo aqui. Certo, então é o céu. E esses seriam o nosso patrimônio inicial. Criamos um componente novamente. E temos dois componentes, e este é o fim, então este é um estado orientalista, ok? E, novamente, selecionamos ambos, combinamos variantes de massa, um estado. E o primeiro será, então esta será a propriedade inicial ou via estrela, então isso se foi. Nosso n, está bem? E novamente, vamos protótipo do que eu quero este, esse círculo, quando eu começar a arrastar esse círculo, ele se torna aqui. Ele se torna o estado. Certo? Então, para isso, vamos animá-lo inteligente também. E em vez de camarilha vai estar drogada, certo? Quando começarmos a dirigir, eles entrarão no estado ou simularão como o que estamos dirigindo isso. E novamente, quando soltarmos essa bola ou círculo para a esquerda, começará a se tornar esse estado. Certo? Então, em vez de Glick, sua própria droga, ok, então vamos ver como esse desempenho novamente, chegamos aos ativos e começamos nosso ESL ou vou renomeá-lo agora. Então, este é o nosso mais leve. Ok, então nós viemos aqui, chegamos ao sinal e neste componente, vamos lê-los em um controle deslizante. Ok, então vamos ver como isso funciona. Mais uma vez. Então, se começarmos com o Dr., vemos que está funcionando perfeitamente. Certo? E se começarmos a arrastar e vermos que temos algum ECM aqui, o que é super legal. Então, já está feito. Então, vamos ao nosso próximo tutorial sobre como fazer animações. Todos os campos, três zonas ou ícones ou algo assim. Então, vamos em frente. 8. 08 ilustração: Ei, então vamos com nosso último componente interativo. Nesse caso, vou inserir um ícone para animá-lo. Nesse caso, vamos usar o ícone do Sparty que vou adicionar de um plugin quantificado. Então, vou animar um pouco de DES. Assim, podemos ver isso, como implementar essas animações em nosso, em nossos protótipos. Certo? Então, para isso, o que vou fazer é desagrupar isso e adicionar isso em um quadro maior para que possamos animar melhor. E podemos ver agora que temos esses elementos dentro de um quadro maior. Ok, então esta será nossa ilustração. Como o último. Este vai ser nosso, bem, eu só vou colocar um por enquanto. E como eu disse antes, é importante a nomeação das coisas. Então você pode ver que esse ícone é composto por muitos vetores, mas todos têm o mesmo nome. Então isso é bastante tedioso, mas você tem que renomeá-los para, mais tarde, ser animado apropriadamente. Então, neste caso, vou arrancar como ser grande onde você puder, basta usar o nome que você quer. Só vou me livrar disso. Este vai ser o bico vermelho. Você pode colocar o nome que você quer. Certo? Então eu já renomeei tudo com nomes exclusivos. Ok, então o que podemos fazer aqui é duplicar, duplicar nossa ilustração e ver quais são os estados que temos, queremos que ela tenha, ok? Então, desde o início, o que eu quero é que todo o seu elemento seja mais pequeno. Então eles virão daqui, certo? E eles vão ser metade como uma opacidade de 0. Então, ele virá daqui para aqui. E então o que eu quero é como uma explosão, digamos. Então, tudo vai ser um pouco maior e como sair. Alguns deles são menores. Então venha aqui. E este novamente, como algo assim. E se torne muito maior se quisermos. Novamente, vou ser aleatoriamente todos esses e derrubar um pouco maior e depois começar a posicioná-los aleatoriamente. Ok, então vamos ver como uma super parte D de confetes voando é bastante aleatória. Vamos ver como isso conta. Então, temos esses estados aqui. E vou adicionar outra propriedade final. Espero que as coisas não estejam mudando. Nomes não são. Então, o que queremos que isso caia, ok, então queremos como, como cair neste ano superior, algo em torno disso. Então isso vai ser feito como um turno. Então eu me sinto assim. Vamos ver como esses mapas K, porque outros como você pode ver, estou fazendo isso super aleatoriamente. E o que eu quero que isso seja chamado desses elementos e os faça desaparecer. Então eles começam como um tipo de atualização muito começando. Vamos ver como isso surge. Então, vou criar vários componentes disso. Então, para isso, vou arrumar. Vou fazer isso um pouco maior. Portanto, não somos constrangimentos aqui. E vamos fazer isso algo bem, seja lá o que for. Então, este é o nosso terceiro estado. Ok, então, de qualquer forma, vou usar e arrumar um pouco. E podemos selecionar todos esses quadros e criar vários componentes. E esses componentes, podemos recombiná-los como variância novamente. E essa será nossa ilustração. Portanto, esse é o estado inicial. Então eu só vou declarar, e este será o estado inicial, o estado dois, o estado três e o estado quatro. Ok, então isso é bom por enquanto. Então agora temos que voltar ao protótipo e começar a animar isso. Então, novamente, o que queremos é trazer o atraso. Então, após o atraso, um milissegundo essas estrelas começarão a funcionar. Então, queremos adicionar inteligente, animá-lo menos. Liderança. O lead é não linear por enquanto para ver como ele funciona. Novamente, aqui, após um atraso, um milissegundo chega a este. E novamente, depois de um milissegundo, queremos que ele chegue ao estado. E a mesma coisa que queremos fazer com o mais recente. Nesse caso, queremos criar um loop para algumas animações como essa. Você pode querer começar e meio e N. Então, nesse caso, você não quer um loop. Você importará essa última ação aqui, ok, mas neste caso queremos ver esse loop, como está funcionando? Então, vamos ver como essa ilustração vai surgir. Talvez seja horrível. Eu não sei. Vamos ver como ele funciona. Estou muito animado para ver como, como isso surge. Tão bem. É bem peculiar. Sim, você pode ver a ideia, certo? Não é tão legal. Ou de qualquer forma, espero ajudar a ser melhor, mas você tem a ideia às vezes quando entra em uma transição para uma página ou algo assim e quer ver algo assim. Talvez seja bom. Então, vou fazer algumas mudanças aqui. Para ver, bem, isso está começando a parecer muito melhor. E vamos tentar algo aqui. Vamos ver se, em vez de linear, colocamos algumas transições fáceis, facilitamos, como isso funciona. Então, vamos ver. Bem, isso está começando a parecer muito melhor. Fazemos isso estados mais intermediários para torná-lo mais natural, algo assim. Mas acho que você tem a ideia. Então, sim, esta foi a nossa última lição deste tutorial. Então, vamos ao final das pontuações para o vídeo de parabéns. 9. 09 de outro modo: Ei, parabéns, você chegou até o fim. Espero que a metade aprenda tudo sobre componentes interagindo. Eu encorajo você a tentar replicar a ciência que vimos no tutorial também que criam a sua própria para explorar outras possibilidades dos componentes interativos. Então, espero que você tenha gostado no geral e tenha gostado do vídeo, por favor, deixe um comentário. Você até gosta disso. Deixe um comentário também. E se você tem algum site sim, O ele para mais tutoriais ou você está interessado em algo que você não encontrou um tutorial lá fora, apenas me avise e eu escolherei fazer isso. E sim, se você quiser ser notificado quando outro pictórico aparecer sim. Espuma na plataforma e você será atualizado. Então, muito obrigado por seguir discurso e desejar um ótimo dia.