Como animar com a API Web Animations via JavaScript

1. Introdução: Animações simples são fáceis o suficiente com CSS. Mas assim que você quiser animar algumas coisas de uma só vez ou em sequência, breve pode se tornar problemático. Não há nenhuma maneira simples de CSS dizer quando esta animação é concluída, executar, esta outra, por exemplo. No entanto, isso é algo que você pode fazer facilmente com a API JavaScript Web Animations. E é sobre isso que vamos aprender neste curso. Agora, se você é um iniciante completo com desenvolvimento web, este provavelmente não é o curso para você, mas se você conhece HTML e CSS e tem uma compreensão moderada de JavaScript, eu acho que você tem que fazer muito bem. No entanto, estou me adiantando. Eu sou Ben Frain, um desenvolvedor web e autor do best-seller Responsive Web Design com HTML5 e CSS. Se você fizer este curso, vou mostrar-lhe como escrever animações com JavaScript Web Animations API. E vamos fazer tudo, desde animações simples que você estaria acostumado a usar e CSS até um número de animações sequenciadas em um pedaço de interação que irá construir juntos. Tudo o que você precisa para este curso é um editor de texto, um navegador e uma tolerância para piadas de qualidade inferior. Então fique confortável, pegue uma boa bebida. E começaremos no próximo vídeo. 2. A criação de projetos: Antes de construirmos isto, quero mostrar-vos onde vamos acabar. Então você pode ver aqui na minha tela direita, nós temos esse tipo de que eu estou esfriando grandemente a área do palco. E temos um conjunto de botões na parte inferior. E à medida que clicamos, você pode ver onde estamos executando algumas sequências, tipo de texto de Star Wars que estão atravessando foguetes. E você pode ver que como número de animações em execução soma juntos e alguns também em sequência. Então, as três cenas de batalha, e você pode ver nosso Rocky tipo de entra e atravessa. E então nossa cena final no final, estes são foguetes Londres. Os Jets explodem. E depois de apenas um pequeno atraso, UCL amiguinho aparece que amorosamente chamaram Eddy. O que você constrói não tem que ser o mesmo que isso. Pode ser isto. Pode ser algo semelhante a isto, ou pode ser algo completamente diferente. Tudo o que é importante é que você aprenda e entenda a API de animações da Web bem o suficiente para que você possa começar a mover coisas pela tela com JavaScript. Agora, antes de avançarmos, acho que vale a pena ver por que queremos fazer isso com JavaScript em vez de CSS. Agora eu sou um grande fã de CSS. Às vezes, trata-se de escolher a ferramenta certa para o trabalho certo. Então vamos dar uma olhada nisso no próximo vídeo. 3. Por que não apenas usar CSS?: Vamos dar uma olhada em uma animação muito simples com CSS. Eu tenho recarga ao vivo acontecendo aqui e eu tenho uma ferramenta chamada mais bonita, os reformatos, esse imposto vai? Chegaremos a isso muito em breve. Por enquanto, vamos fazer uma animação muito simples. Então ela vai fazer, vamos dar um div na página. Vamos dar-lhe uma classe de coisas. E então vamos ver se com o poder do CSS, podemos antes de tudo, fazer uma boa caixa. Na página. Largura, 100 pixels de altura, 200 pixels, cor de fundo. Teremos uma laranja brilhante. Isso é só verificar. Temos R-quadrado, certo? E agora vamos fazer uma animação. Então eu só vou escrever a declaração de animação primeiro e então vamos escrever o quadro-chave depois. Então não se preocupe com o fato de que não há nenhuma chave no momento. Então Animação, e vamos chamá-lo de movimento, certo? Vai levar um segundo e seguir em frente. E vamos aliviar. Essa é a função de temporização. Se você não sabe o que 0s dentro, fora é, estaremos cobrindo isso em breve, não se preocupe com isso. Ok, então agora precisamos escrever o movimento real, certo? Quadros principais. Vamos fazer isso um pouco rápido. E nós vamos embora, isso vai mudar para. Então, quando você usa para, nesta situação, você pode escrever nada por cento 200% ou algo assim. Mas é mais fácil se, se você quiser apenas passar em animação para algo novo. Se você escrevê-lo assim, ele vai apenas se mover direto para onde ele, onde você quer que ele termine. Então, neste caso, eu só quero mudar o nosso pequeno quadrado. Vamos traduzir, e vamos, vamos 300 pixels para a direita. E eu vou descer. E enquanto estivermos aqui, vamos mudar o raio da fronteira para 50%. Então, com um pouco de sorte, o que ajuda a enlouquecer? E vamos mudar a cor de fundo. E nós vamos para, vamos para um bom cinza escuro. Ok, vamos ver o que isso faz para nossas fortunas. O que quer que Dúnia faça não quer isso em regra ou esperava que desaparecesse. Preciso escrever uma jogada de quadros-chave, certo? Ok. Porque o sorriso para mim, ok, então você pode ver que estamos saindo de um quadrado brilhante, movendo-se para a direita, transformá-lo em um círculo, tudo bem. E se agora quiséssemos esperar um segundo e, em seguida, mover tudo circulado para baixo e transformá-lo de volta em um quadrado é um par de maneiras que você poderia fazer isso. Você pode adicionar outra animação a todos os seletor ou podemos construí-lo nos quadros-chave. Então, se vamos construí-lo nos quadros-chave, vamos ver isso primeiro. Se vamos construir os quadros-chave, vamos supor que vamos copiar isso e isso vai ser nosso novo. Então ele vai ir 0, que ele iria para 33%. Queremos que acabe. Então 0 não vai ter nenhuma transformação nele. Não vai ter um raio de Ebola. Esta é essencialmente a nossa posição inicial, e esta é R. Então vamos para o nosso terço laranja brilhante do caminho. Estamos parecendo assim. E então queremos esperar lá por mais 2,5. Então, de todo o caminho até 66%, isso funciona na minha cabeça de doador para Swatch, o trabalho na vida real aqui. E vai ser o mesmo. Porque quando chegarmos a 60, 66% através da nossa animação, eu queria estar no mesmo lugar. Então, entre 3366 é esperançosamente vai ser uma pausa e, em seguida, apenas pegar este pedaço. Sou um idiota, desculpe. Vamos pegar isso. Então isso vai ser tudo 100%. E, em seguida, a 100% nós queremos ainda estar sobre a direita. Vamos descer 300. Vamos voltar a uma praça. Nós definimos de forma diferente. E depois vamos voltar para a nossa praça. Isso vai acontecer bem rápido em um segundo. Então eu só vou fazer a duração é animação um pouco mais longa. Então eu vou mudar o 1 segundo para 3 segundos. Então nós devemos obter agora algo como 1 segundo através, 1 segundo pausa, 1 segundo para baixo. Tal é feito algo errado. Lá vamos nós. E tente isso de novo. Espere para baixo. Bem, nós p, ok, então tudo bem. Mas vamos supor que agora, enquanto os designers que adoram o que fizemos com este quadrado, eles foram me nocauteados da festa, uh, mas eles realmente querem um segundo de frente, dois segundos de atraso e 1 segundo para baixo. Podemos contornar isto mal podia esperar. Poderíamos mudar nossos quadros-chave. Você poderia trabalhar para fora, descobrir onde a porcentagem seria para o, para as piscinas e, em seguida, mudar seu livro. Começa a ficar bastante difícil de gerenciar. E esta é apenas uma animação que estamos fazendo aqui. Eu disse antes que poderíamos fazer isso de outra maneira. Então vamos tentar isso. Se nós, se voltarmos para onde estávamos há pouco, onde temos que mover a animação certa. Em vez de fazer isso com quadros-chave, vamos supor que o que fizemos é que fizemos outro conjunto quadros-chave. Vou chamar isto para baixo. E este vai fazer é ir do MEA, isso não vai funcionar. Então vamos de apenas para esclarecer, quando queremos descer, sabemos que vamos ser 300 em 0 para baixo. Vamos ser um círculo. E nós vamos estar no 3s, que é o tipo de cinza escuro. E quando terminarmos, gostaríamos de estar de volta e parecendo um quadrado. Parecendo um quadrado, ideal o tempo todo. 300 Darrow, Xero, limite de raio. O, mas dois. 90. Então, esses serão os nossos quadros-chave para descermos. Então poderíamos colocar aqui, nos mudamos. E queremos que diga um segundo. E queremos um atraso de 500 milissegundos. E nós queremos dar um avançado e vamos facilitar para fora. Há um erro óbvio aqui por que isso não vai funcionar. Eu vou executá-lo. E dedos nas poses. Pode me dizer se sabe o que é. Vamos fazer isso desde o início. Você viu isso? Nem sequer atravessa antes de começar a descer. E a razão para isso, e é por isso que CSS, animações CSS podem ser problemáticas, é porque em um tudo, para que toda a segunda animação seja executada, temos que considerar quanto tempo ela tira a primeira para completar. Não há como o NCSS dizer que quando o primeiro terminar, então faça o próximo. Então o que nós temos que fazer aqui é nós temos que ir, ok, então nosso atraso, nós queremos que você para cinco, nós fizemos um atraso de 2.5º depois que ele atravessou. Então não é um atraso de 500 milissegundos, é na verdade um 1500 milissegundos, 1,5, então eu posso atrasar. Então agora isso deve ser algo mais como queremos ver. Nós temos o atraso e então ele se move para baixo. Nós trabalhamos em torno desta questão aqui. Mas a realidade é, não é uma maneira fantástica de pensar sobre essas coisas. Indiscutivelmente, você poderia tornar isso um pouco mais fácil com propriedades personalizadas, o que você poderia fazer com certeza, nós poderíamos ir. A duração é de 300 milissegundos. E isto, isto pode ajudar. Depende da sua preferência ou suponha, mas podemos ter duração. E esta também vai ser a duração. Duração. E então, para o nosso atraso, eu nem estou convencido que isso é melhor e eu certamente não estou convencido de que ele é o tipo de coisa que é fácil de argumentar. Se você voltasse a este código em seis meses, levaria um pouco de coçar a cabeça. Então será duração vezes 1,5. Não, isso não está certo. Ok. Fechado no lugar errado. Isso é estranho. Esperemos que isso faça a mesma coisa e vamos tentar. Sim, está bem, então isso funciona. Fazendo assim. Ele faz com que seja um pouco mais fácil para mudar a animação geral porque em vez de ter que ir para dentro e recalcular ou atrasar, ele geralmente está falando Aqui podemos mostrar e este anotar 1 segundo. Certo, então temos uma segunda casa. Posso atrasar 1 segundo para baixo. Nós trabalhamos em torno dele lá e nós olhamos para como você poderia potencialmente tornar esse pouco mais fácil. Estou usando propriedades personalizadas, mas ainda não há maneira fácil dizer coisa grosseria do que quando esta coisa está acabada ruinosa. A próxima coisa, quando isso terminar, corra, essa outra coisa. E há também que nós nem sequer tocamos aqui. Se quiséssemos pausar animações e, em seguida, retomá-los, vai de repente fazê-los voltar na outra direção. A verdade é que CSS não tem uma boa resposta para isso. E sabe o que vou dizer? A API de animações da Web tem uma boa resposta para isso. Você provavelmente está ciente de que há muitos pacotes de animação JavaScript de terceiros que você pode baixar e usar em seu projeto, que você encontra, há alguns muito bons lá fora. Estou pensando em coisas como meia verde. Mas o problema é, isso é algo que você tem que colocar em sua página web, o aplicativo que você está construindo. Cada vez que você quiser executar uma animação. E é também, você está tendo que aprender um pedaço personalizado de sintaxe que pode ou não ser em torno de dez anos a partir de agora. Com a API de animações da Web, isso é um padrão, isso não vai a lugar nenhum. Então, o que você aprende com uma API de animações da Web vai colocá-lo em muito bom lugar no futuro. Felizmente, isso é abordado o porquê de querermos usar JavaScript. E vamos ver como fazemos isso com JavaScript no próximo vídeo. 4. O que é uma API?: Antes de escrever nossa primeira animação com JavaScript, eu só quero cobrir o termo API. Api, o acrônimo significa interface de programação de aplicativos. Tudo o que significa para o que estamos fazendo aqui é que há uma interface JavaScript embutida no navegador web que nos permite controlar animações com JavaScript como é um padrão web, há uma especificação que você pode ir e ler. As especificações diferem muito quando se trata de recursos da web. Então, muito fácil de obter a sua cabeça ao redor e entender os outros menos célula. Acho a especificação da API de animações Web um pouco intensa. Agora, espero que, se eu fizer um trabalho meio decente aqui, você não precisa ir e olhar muito para essa especificação. A não ser que queiras, que, sabes, depende inteiramente de ti. Eu não julgo. Muito em termos de suporte ao navegador. Como eu gravo esta tarde 20-20. E se usarmos, posso usar.com tipo em Web Animations API, em seguida, suporte parece algo assim. Você tem apoio decente em tudo o que você pode sensatamente queria usar. Distintos notáveis, IE 11 e adjunto à versão 18. Mas, obviamente, há cada vez menos preocupação neste momento. Há também polifenóis. Se acha que precisa fazer isso, obviamente já é muito bom. E só vai melhorar. Já chega de introdução. Vamos continuar com a direita em nossa primeira animação com JavaScript. No próximo vídeo. 5. Um exemplo simples de animação web: Certo, vamos executar a primeira animação com a API de animações da Web. Vamos começar com a forma que tivemos alguns vídeos atrás que estávamos nos movendo com CSS. Então, se você se lembra, Don era muito simples e um único elemento com uma classe de coisas. E eu estou apenas ligando aqui para animações ab.js. Agora, animações ponto JS no minuto é muito simples. Não há nada que tenha apenas um log de console para que você possa ver que fazer algo. E o primeiro trabalho é apenas para se livrar de todos os estilos que temos antes que estavam fazendo essa animação. Se você se lembrar. Eu só vou tirar algumas dessas outras coisas do caminho. Sinto muito, só mais uma vez, temos o quadrado indo através de dez para um círculo e, em seguida, voltando para baixo. Agora, nós queremos nos livrar das coisas de animação Olof para mim porque nós não precisamos de nada disso. Agora. O que temos agora é R-quadrado fazendo nada. E vamos refazer essa animação com JavaScript. E só para mostrar a vocês, vamos abrir o Devtools para que vocês possam ver o console Jess se apresentando para o serviço. Sabemos que todos os arquivos JavaScript ligados, não há problema. A primeira coisa que vamos fazer, e deixe-me usar a palavra-chave const aqui para fazer uma variável de tipos para o elemento na página. Você poderia usar menos. Você pode usar VAR para o que estamos fazendo. Isso realmente não importa. Eu só gostaria de entrar no hábito de usar contras 20 é algo que é constante e eu não vou mudar. Então, outro documento, selector de consulta de ponto. Não é necessário fazer seletor de consulta tudo porque há apenas um deles na página. E sua coisa, legal é pensar em coisa é igual a documento, consulta, seletor. Tudo. Só para verificar, temos isso na página. Vamos fazer isso com tudo, mas só para garantir que os primeiros pedaços entrem. Ok. Então você pode ver aqui no console, nós pegamos todos os elementos. Ok, então agora nós temos. Queremos mais animados. E então nós vamos fazer coisa. E que o primeiro método que você usará a maior parte do tempo, ele é animado. Animar. Ok, então eu estou principalmente para animar leva dois sets, bem, dois argumentos, não se preocupe em tudo neste vídeo, se isso soa como gobbledygook ele, nós vamos rever essas coisas em uma grande quantidade de detalhes em breve. Eu só vou mostrar a vocês o que a mesma animação que fizemos em CSS se parece quando você faz isso com JavaScript. O primeiro argumento será um array de quadros-chave. Então nosso primeiro quadro-chave é o ganho para ser a forma trans. E vocês notarão aqui que estamos usando uma string para o que acontece na transformação. Então eu acho que foi traduzir 300 pixels, nada de funções de tempo de plotagem aqui e vamos dizer que vai levar tempos em JavaScript. E a API JavaScript é sempre feita em milissegundos. Então você pode ser usado para em CSS, digamos que em 1 segundo é 1S. Isso é um “no-go”. Em JavaScript, é sempre em milissegundos. Então, 1 segundo, 1000 milissegundos. Você não precisa colocar as unidades. É sempre assumido que você estaria usando milissegundos, preencher. Vai ser os dois. Então, caso estejamos indo em qualquer direção novamente, não se preocupe com isso por enquanto. Facilitando, vamos entrar em JavaScript Justinian, bem como que a API Web Animations, a função de tempo padrão em CSS é uma facilidade, enquanto em JavaScript terra, o padrão é A-linear. Então, se quisermos fazer algo que não seja uma animação linear quando você tem que realmente dizer isso. Então vamos dizer que vamos 0s e para fora aqui apenas para tipo de mostrar como é quando eu salvar isso agora isso vai ser reformatado ligeiramente por mais bonito. Então lá vai você. Então vocês podem ver que a primeira parte que colocamos é apenas essa transformação. E diremos para atravessar. E vamos dizer para fazer a cada 1000 milissegundos que queríamos preencher para que obtenhamos os estilos do ponto final da animação persistente. E estamos usando uma função de temporização de facilidade e saída. Agora nós também tivemos, nós mudamos de um quadrado para um círculo como ele foi para a direita. Então, o que realmente precisamos fazer aqui, vamos para ir de um raio de fronteira. E você também está no uso da terra JavaScript, CamelCase, nomes de propriedades. Então, em CSS teríamos traço fronteira, raio em JavaScript é fronteira e, em seguida, raio com um R. maiúsculo Então, um raio de fronteira está ficando sem opex e vamos transformar não é. Então esse será o nosso ponto de partida. E então vamos mudar isso para ser o raio do construtor. E então isso vai ser 50%. Vamos dar uma olhada. Ok, então algo por aqui. Enquanto erramos. Falta-me uma vírgula. Com seus quadros-chave, você pode ver aqui eles usam essas chaves. E depois de cada conjunto de chaves, isto é, estes são por cada quadro-chave individual. E depois de cada um deles você precisa colocar uma vírgula. Certo, então lá vamos nós. E novamente, eu acho que no que nós construímos com CSS, nós também, nós transformamos a e a cor de fundo. Então seria cor de terra de volta assim. E novamente, você passa em uma corda e um agradecimento eram três. Então lá vamos nós. Essa foi a primeira parte do que fizemos com o CSS. O que é interessante sobre isso é que agora podemos dizer, podemos sequenciar as coisas. Então, podemos dizer quando isso terminar. Então, quando essa animação terminar, vamos começar uma nova. E nós vamos dizer a coisa ponto, e eu tenho oito anos. E novamente vamos passar em duas coisas. O primeiro é a nossa matriz de quadros-chave. Novamente, não, não fique preso nisso por enquanto. E vai entrar em forma de tendências. E é como se estivesse debaixo de pixels. Vamos apenas verificar o que acontece aqui e você pode ver como isso é sequenciado. E então eu vou sair por enquanto. Nós vamos, nós vamos preencher isso com mais detalhes em um momento. E isso novamente vai dizer que há um atraso aqui de 2.5º. E então faremos o mesmo que antes. Usando novamente facilmente e para fora. Ok, duração. Novamente, você pode ver que não há ordens específicas para essas coisas. Desde que você tenha o material certo lá dentro, vai funcionar muito bem. Ok. Então vamos ver o que isso faz para nós. Ok, então você pode ver como um corre atrás do outro, mesmo que eu tenha os valores errados lá dentro. Então, no minuto eu estou transformando de 300 aqui para então ser 0 e o eixo x. Então eu preciso ter certeza que os 300 estão lá. E nós vamos fazer 200 por enquanto. Ok. Então vamos ver o que isso faz para nós. Ok, e então se você se lembra, nós também queríamos transformá-lo de volta para um quadrado. Então, novamente, o que precisamos fazer aqui, pois vamos fazer nossa cor de fundo de volta ao que era. E isso foi F9 0. E vamos fazer o raio da borda de volta para 0 pixels. Ou poderíamos usar porcentagens que se sobrepõem a phi. Novamente, eu não espero que você entenda isso agora isso é apenas dar-lhe uma visão geral de como você iria escrever animação simples com a API JavaScript Web Animations. Ok, então essa é uma breve visão geral feita com e agora podemos entrar no nitty gritty. 6. Refresh de projeto: Bem-vinda de volta. Então vamos apenas atualizar nossas memórias sobre quais são os principais projetos que vamos construir juntos. Nós temos uma área de palco vai lona, se você quiser, não deve ser confundido com o elemento de tela que você entrar. Você também pode usar um JavaScript para pintar coisas com. Não estamos usando o elemento de tela. Só estou chamando esse elemento que vamos mover tudo para o Canvas. E também temos esses botões lá embaixo. Então temos o próximo a pular as coisas. E então nós também temos como puls Boston, e então nós temos buraco negro, que virá muito mais tarde. Temos um pouco de configuração para fazer aqui. Temos esta pequena leitura da cena em que também está. Nós vamos configurar, realmente construindo a concha, esta coisa primeiro no próximo vídeo. Agora, se você estiver interessado principalmente em apenas entender e entrar no bit onde nós realmente usamos a API. Você pode querer pular um pouco, mas nos próximos vídeos, além de construir essa estrutura, além de construir essa estrutura, também vamos abordar coisas como funções de temporização e animações de quadros-chave. Em termos gerais, apenas como uma espécie de atualização no caso de ele ser algo que você nunca fez antes ou algo que você só precisa de um pouco de um Eu voltar a ser atualizado com. Então, se você não está preocupado com facilidade em funções de temporização, durações, como fazer iterações, qualquer um desses tipos de coisas, por todos os meios, pule em frente. Caso contrário, fique por perto para os próximos vídeos e vamos passar elasto fora e, em seguida, obter construção ou projeto real juntos. 7. Configuração básica: Vamos começar com a configuração mais simples que possa imaginar. Temos um arquivo HTML praticamente em branco. Nada além de um log de console em nosso arquivo JavaScript. E eu vou estilos e, obviamente, esses dois folha de estilo e o arquivo JavaScript ambos link para a folha de estilo. E eles estavam chamando nosso roteiro de animação. Nós não precisamos, e você não precisa nenhuma ferramenta de construção, a fim de acompanhar isso e fazer as coisas funcionarem. Eu vou usar uma ferramenta chamada Browser Sync em todos esses vídeos, só porque ele me dá automaticamente recarrega e significa que podemos avançar rapidamente sem eu atualizar continuamente a página. Agora, você também pode, obviamente, instaladores você mesmo. Se você passar para BrowserSync dot IO, você pode ver aqui instruções de instalação para fazer isso. Não requer um par de coisas extras como npm e nó, que se você não está familiarizado com essas ferramentas, eu acho que meu conselho neste momento seria apenas esquecer esta parte. Não fique atolado e obtendo essas ferramentas de construção e rodando isso. Esse não é o foco do que estamos fazendo aqui. Queremos entrar nas coisas boas e fazer as animações web. Então, se você está familiarizado e confortável, talvez esculpir meia hora e tentar fazer essa coisa correr livro. Não trabalhes neste ponto, não é muito importante. Tudo o que requer é fazer uma instalação MPI, instalando a sincronização do navegador globalmente. E então você pode ver se você clica, começar. Novamente, será diferente dependendo do sistema operacional em que você está. Sou um Mac aqui. Você pode ser Windows, talvez Linux. E uma vez que você tem isso aberto e em execução, é um caso simples de você abrir um terminal e você passá-lo em um comando, BrowserSync, que você está basicamente dizendo BrowserSync para iniciar um servidor local. E você pode ver aqui, eu estou dizendo isso para as coisas que eu estou dizendo aqui. Estou executando a sincronização do navegador como o comando, iniciar, parar sincronização do navegador. E então os dois tipos de argumentos, se você gosta que eu estou passando para servir e desculpe, servidor e arquivos. E essas duas opções permitem que você diga onde estará a raiz do servidor, que ele vai girar e onde estão os arquivos que você deseja que ele assista. Agora, neste exemplo aqui, minha culpa, meus arquivos que estamos vendo aqui em uma pasta chamada vid sete. Então, a partir deste ponto, eu estou executando este comando e clique em Enter e o gira até um servidor local aqui. E então é simples como se eu quisesse mudar isso para favorecer a cor laranja. Estou recebendo essas recargas instantâneas. Portanto, é apenas uma ferramenta muito útil se você for rapidamente iterado nas coisas. Ele vai economizar um pouco de tempo do comando e tudo para atualizar o seu ou usando o mouse para fazê-lo, grandes ferramentas só você pode obtê-lo em execução rapidamente. Não se estresse com isso se continuar. Além disso, você provavelmente verá aqui eu estou usando uma ferramenta chamada mais bonita. E nós vamos mais bonito faz, é que ele toma a forma realmente código essencialmente. Então, ao invés de se preocupar com recuo ou se colocar ponto-e-vírgula e todo o resto. Bonito só cuida disso para você. Então você pode ver aqui é um exemplo. Se eu não tiver recuado este arquivo corretamente, eu posso apenas salvá-lo. E bonita vai fazer com que pareça bonita. Tão bonita se não estiver familiarizada com isso. Eu recomendo muito. O ponto mais bonito. E novamente, é outra ferramenta que vai precisar nó vai precisar de MPM. Não se preocupe com isso se está demorando ou é difícil levantar e correr, pule por cima dele. Você sempre pode voltar a isso mais tarde, mas não deixe que isso o impeça de continuar animando algumas coisas. Então, com isso dito, vamos continuar no próximo vídeo e realmente construir nossa estrutura básica. 8. Criando o palco e controles: Então, neste vídeo, vamos olhar sobre o tipo de rocha, se você quiser, do que estamos prestes a construir. Então, se começarmos com HTML, você pode ver a única coisa que eu adicionei do nosso arquivo em branco. Ele é, eu tenho um elemento principal aqui, que novamente, pode ser fácil de olhar nas ferramentas de desenvolvimento, na verdade. Então temos um elemento principal. Nós temos aqui, você pode ver a área da tela, não o verdadeiro Canvas. Só um div que eu tenho 1,80m e Canvas, é aí que vamos mudar uma coisa de lei. E você pode ver aqui, ele tem apenas uma largura fixa e borda de altura em torno da cor de fundo externa. E você pode ver o mais importante, ele tem transbordamento escondido não uma posição de relativo. O estouro escondido é importante porque uma vez que começamos a mudar as coisas, queremos isso como uma espécie de câmera de filme, se você quiser. Então, quando as coisas vão para ambos os lados, não queremos sair do lado da nossa área de palco. E a posição relativa é importante porque à medida que seguimos em frente, você verá que quando adicionarmos coisas em nossa tela, nós vamos normalmente posicioná-los absolutamente cobrirá isso em breve. Mas o parente é importante porque caso contrário, as coisas que foram posicionadas absolutamente se posicionariam contra o visor em vez de nossa área de palco. Você pode ver aqui que nós temos apenas elementos de botão padrão para cada um de nossos controles na parte inferior, cada um deles tem um botão de tipo ID. Eu sempre tenho o hábito de escrever botão Type nos botões porque o comportamento padrão de um elemento de botão é enviar, que neste caso não faria qualquer diferença. Mas se você por acaso tinha um botão que estava dentro de um formulário e você não escrever em, ele pode enviar o formulário. Então isso é apenas um lado o que uma explicação como por que eu sempre colocar o tipo igual botão em elementos estrangeiros. Temos uma classe de botão Annie Dash, como no botão de animações. Em cada um desses itens. O primeiro ouvir o botão Anterior e o nosso botão buraco negro, que virá muito mais tarde. Você pode ver que eles estão começando a vida com elementos desativados neles porque quando a página é carregada pela primeira vez, você não pode ir para trás nem iniciar o buraco negro fora. E assim, por padrão, eles estão desativados em nossos estilos. Muito simples novamente, estilo básico para todos ou principais elementos, que nos dá este tipo de largura de página de 800 básico Canvas Dan, como eu expliquei antes. E há botões têm apenas o estilo padrão do botão fantasma, se você quiser. Não há nada realmente importante lá dentro. É tudo muito básico. Animações neste ponto. Tudo o que fizemos foi fazer constantes para cada um dos botões. Então, se você se lembra, nós temos controle anterior, que é aquele, o próximo, que é aquele buraco negro e derrama aqui embaixo. E então a leitura é o pedaço de texto que aparece lá. Então, enquanto pulamos através das cenas, ele vai dizer um de dois, desculpe, um de 32 de 3.3.3. Então nós adicionamos dois ouvintes de eventos que neste momento, nós temos, nós não estamos, nós não estamos prontos para fazer coisas ao redor, jogar pausa, e nós não estamos interessados em fazer coisas ao redor do buraco negro. Nós somos. A primeira coisa que estamos interessados em fazer é ligar este botão seguinte e anterior. E o que isso vai fazer é que nos dará um mecanismo para mudar a cena, se quiser. E eu vou te mostrar a mecânica disso enquanto formos. Mas, essencialmente, só precisamos criar um ouvinte ou uma função que seja executada quando esses itens são clicados. E nós poderíamos igualmente, em vez de clint, você poderia usar apontado para baixo se você preferir, movendo-se para baixo dos ouvintes que temos sobre esses dois bósons. Você pode ver aqui há um idx máximo, que é o índice máximo que eu defini para três. Agora esse vai ser o limite de quantas cenas. A coisa que temos vai ter. Estou codificando isso aqui. Mas pode haver casos em que você está construindo algo onde faz mais sentido fazer isso dinamicamente. Então você pode fazer, pode ser uma leitura DOM que você tem que fazer. Pode ser baseado nos dados que chegam. Isso está dizendo que esses sete slides para passar neste momento são apenas codificados. Nós também definimos um par de voltas para o índice anterior no índice atual. E isso é para que possamos descobrir se estamos indo para a frente ou para trás, que espero que faça mais sentido à medida que passamos por essa função de clique de direção do processo. Agora eu propositadamente deixou esta função de clique direção processo dobrado para cima porque é bastante denso, embora espero, bem comentado. Agora, se você se lembra, nós só estamos disparando disfunção quando você clica no botão Avançar, quando você clica no botão Anterior. E então a primeira coisa que precisamos fazer é verificar em qual desses dois que você clicou. Esta coisa que estamos fazendo funciona em princípio por ter um número definido de cenas que você pode clicar em Avançar para percorrer um caminho e anterior para combater pelo contrário. A primeira coisa que determinamos é o que estou chamando de polaridade aqui. E eu quero saber se você clicou no primeiro ou desculpe, se você clicou em anterior ou em seguida. E nessa base, estamos definindo polaridade para um 0 ou um. Assim é um operador ternário aqui, que é como um condensado se else declarações. E tudo o que estamos fazendo, estamos dizendo é a identificação da coisa que clica neste priv de controle. Se for, então nossa polaridade é 0, IE estamos indo para trás. E se você clicou em seguida ou, você sabe, se não é isso então basicamente é um que significa que estamos indo em frente. Também queremos definir o índice anterior para onde quer que estejamos atualmente. Isso parecia confuso porque quando clicamos isso estava se movendo em uma direção ou outra. Precisamos salvar onde estamos no momento, caso você queira voltar para buscá-lo. Ou melhor, podemos dizer em que direção estamos viajando. Nós colocamos isso lá. E, em seguida, baseado na nossa polaridade como um um ou um 0, se é um um, vamos em frente. E então, se onde estamos atualmente é o mesmo que o índice máximo, que se você lembrar, definimos MaxIndex aparecer no topo. Então basicamente desistiu. Isso significa que estamos no final do nosso conjunto de cenas. Caso contrário, queremos remover desativado do botão. Ele pode não ter desativado no momento, mas se tiver, ele será removido. E então queremos definir o índice atual. Então isso vai funcionar para a próxima vez. Vamos definir o índice atual, fazer uma adição a ele. Vamos contar para fora. Vamos aumentar esse número inteiro. Então, se fosse diferente de zero, vai ser quente. Mas antes de tudo, precisamos verificar. Então vamos dizer se o índice atual, quando ele tem um adicionado a ele, é igual ou igual a 12 maxIndex. Em seguida, definimos para MaxIndex. Caso contrário, definimos o índice atual para ser índice atual mais uma magnitude refiação que, ouvir isso novamente, soa confuso. Confie na papelada. Em seguida, também se o índice atual é o maxIndex, queremos configurá-lo para ser desativado. Então, basicamente, se passamos para o último, queremos definir próximo para ser desabilitado porque você não pode ir mais adiante. Outra coisa é a mesma coisa, mas indo para trás. Então, se você vai para trás, nós queremos tirar desativado para a frente porque se nós estamos indo para trás, então nós obviamente podemos ir para a frente. Se o índice atual for 0, podemos sair porque estamos bem no início. Caso contrário, vamos remover todo o estado desativado do botão, desculpe, atributo desabilitado do botão. E então vamos definir o índice atual para ser o índice atual menos um. Se isso for menor ou igual a 0, então vamos defini-la como 0. Caso contrário, vamos definir o índice atual para ser índice atual menos um. Então, lembre-se se, se você não estiver usando para operadores de instruções ternárias em JavaScript, você só pensa neles como condensado se elses, isso é essencialmente o que eles são. E o que você está fazendo é dizer se, se algo é verdade, mas há sua condição basicamente. E se essa condição for verdadeira, faça a primeira coisa, caso contrário, faça a segunda coisa. E então, apenas para ver quais são esses valores, vamos fazer o console logout. Esta seção inferior aqui voltará mais tarde. Isto é sobre como vamos fazer animações e parar de fazer o que eles estão fazendo cada vez que você clicar para frente e para trás. Então não se preocupe com isso. Mas, por enquanto, para ficar a par deste vídeo. E novamente, isso obviamente não é, isso não é essencial para a API de animações da Web. Isto é apenas para o projeto que estamos construindo como apenas nos dar uma estrutura para disparar essas animações e cenas diferentes. Só para verificar, este pouco funciona com a sincronização do nosso navegador em execução a partir do último vídeo. Se eu clicar em Avançar, era diferente de zero e agora é um, estava em um e agora é também não era muito e agora são três. E há estados com deficiência chutados em como se eu não pudesse ir mais adiante voltando para o outro lado. Eu estava no três e agora é também não era. Agora é água morna em um e agora é 0 quando não pode ir mais para trás. Isso foi muita ferramenta para o que parece não ser muito na página, mas isso vai ser essencialmente o que queremos fazer nos próximos vídeos. Agora, antes de começarmos a animar com JavaScript propriamente dito, ainda há mais alguns assuntos que só precisamos entender primeiro. E isso são os principais enquadramentos, em princípio. E, em seguida, também as diferentes funções de temporização. Então, vamos olhar para esses nos próximos vídeos. Te vejo em um momento. 9. Teoria de animação web: quadros essenciais: Só para ter certeza de que estamos partindo na queda certa. Vou rever agora o básico do que queremos dizer Keyframing, interpolações e animações e todo esse tipo de coisa. Então, apenas na chance fora de que você não está familiarizado com a idéia de quadros-chave. Se temos uma animação muito básica e vamos , vamos supor que temos uma bola aqui. E queremos que se mude para aqui e termine aqui. Em termos de animação, o que nós realmente veríamos como o uso final ou se você assisti-lo, uma chamada para, você veria que você não iria apenas ver a coisa mover-se instantaneamente de lá para lá. O que você veria é o caminho da bola se movendo de 1 para outra, e então finalmente até esse ponto. E a terminologia para essas coisas, ou ouvir ou seus quadros chave. E então os bits no meio, ou de onde vem a palavra interpolação, interpolação. É o intermediário entre estes quadros-chave. Então, o que nos preocupa principalmente quando estamos animando se isso é através de efeitos após ou se isso é através de JavaScript ou CSS, é que estamos interessados em fazer esses pontos de quadros-chave e deixar o computador descobrir o in-between. Então, esse é o básico do quadro-chave. Então, quando falamos sobre organizar quadros-chave e escrever quadros-chave, lembre-se que tudo o que você está fazendo é você, você está especificando onde esses pontos estão. Onde há uma mudança distinta entre o movimento da coisa que você está animando, como isso se manifesta, vê e pensa em algo. Nós não vamos realmente animar algo. Mas vamos supor que a classe div é igual a caixa. Então vamos supor que temos uma caixa aqui e vamos dizer largura da caixa. Pixels maravilha, certo? Nos pixels. Aquela cola moída. Quem não ama um pouco, rosa quente, rosa, rosa. Ok. Ali está a nossa caixa. E se quiséssemos mover essa coisa ao redor, a maneira que estes bloqueio em termos JavaScript é que diríamos caixa const é igual a consulta, Desculpe, documento dot query selector. E há uma caixa. E então nós diríamos Box dot animar. Esta é a forma como a API, Web Animations API tem este método animado. E vocês podem ver aqui a ferramenta dentro do Sublime está me dizendo que isso requer dois argumentos, um conjunto de quadros chave. E então o que é opções de resfriamento ou opções de animação de quadro-chave. E vamos falar sobre eles no próximo vídeo. A primeira coisa que estaríamos interessados em passar. Então você vai passar por isso. Normalmente dois objetos ou uma matriz de objetos e um conjunto de objetos. O que este primeiro bit antes do primeiro argumento que vamos passar é sempre os quadros-chave, se isso é um único quadro-chave ou um conjunto de quadros-chave passados como uma matriz. Então você seria normalmente, se este fosse um quadro chave, então isso aconteceria quando algumas coisas já estavam em outro lugar no DOM. E vamos dizer que queremos transformá-lo em, vamos dizer traduzir seu val está atrasado e é sempre uma corda aqui. E diríamos 500 pixels, 200 pixels. É só o único. Se quiséssemos movê-lo. Alguns quadros chave como este tipo de incrível peça de arte que eu mostrei antes. Você precisaria passar em uma matriz de objetos. Então, em vez disso, o que você faz aqui é, vamos apenas limpar nesse minuto superior, eu vou tirar isso porque você não precisa se preocupar com isso por enquanto. Em vez de passar um único objeto, você passaria em uma matriz de objetos. Então é só necessário isso um pouco em prompts gordurosos faz mais sentido para nos derrubar totalmente. Então u, b e o segundo bit e transformamos e chegamos a escalar para três vezes o seu tamanho. Então, neste caso, esse quadro-chave, que passa dois quadros-chave lá dentro. O primeiro é traduzir. Qualquer segundo está mudando a escala. Agora, você poderia, por padrão, apenas passar em uma duração. Isto deve Roma. Então, se passássemos em dois mil e dois mil milissegundos para segundos, e nos livrássemos dessa parte. Então agora estamos apenas configurando o envio de todos os quadros-chave sencientes com duração. Você pode ver nossa maravilhosa peça de animação lá. No entanto, esta segunda aposta aqui é onde nós normalmente, e mais frequentemente do que não, você estará enviando em um objeto com um monte de opções de grupo de funções de temporização. E vamos dar uma olhada no próximo vídeo. 10. Opções de sincronismo: No último vídeo, analisamos os quadros-chave, teoria dos quadros-chave e como eles são aplicados basicamente com a API de animações da Web. Neste vídeo, vamos olhar para o segundo argumento que passamos para a função animate. Este é o lugar onde deixamos o último vídeo. E nós tivemos, se você se lembra, nós temos a animação que passamos. O primeiro argumento que passamos foi uma matriz de quadros-chave. Deixamos isso no final do último vídeo e o segundo argumento foi apenas sentado em branco. Essencialmente, nós tentamos se você se lembrar, definindo isso para uma duração que irá executar tudo por padrão, mas com uma duração em seus 3 mil milissegundos, três segundos. E você pode ver aqui, esse é o efeito que temos quando executamos isso. No entanto, normalmente, você não estará enviando apenas a duração. Você vai querer enviar outras coisas também. Agora, se eu só necessitar, espero que um pouco aqui para que você possa ver o que está acontecendo um pouco melhor. Ele é a abertura e fechamento de todas as funções animadas. A primeira coisa que estamos fazendo que vimos o último vídeo, é enviar nesta matriz de quadros-chave. E o que estamos interessados neste vídeo é o que vem depois da vírgula, o segundo conjunto de argumentos. E tipicamente isso vai ser um objeto. Agora, as coisas que você pode passar para este objeto são tudo a ver com a maneira que você quer a animação para Roma. Então coisas que você pode enviar ou duração, que novamente, milissegundos e você escrevê-lo não como uma string, mas como um inteiro. Então 3 mil nos daria 33 segundos de atraso. Você pode escolher definir um atraso para que essa coisa não corra imediatamente. Você atrasar também um inteiro. Então 500 milissegundos lhe daria um atraso de 2,5. Iterações. Se você quisesse executar algo um número definido de vezes, você poderia dizer, você sabe, para, para que ele seja executado quatro vezes em CSS vai, se você quiser executar uma animação infinitamente, você usaria infinito. Um pouco diferente. E a API JavaScript, você iria realmente definir infinito como o número JavaScript infinito como aquele com um I maiúsculo e infinito, o modo de preenchimento leva, você não escreveu aveia de filme ou é apenas preencher e você tem que passar uma string. Então você pode ter o padrão. Em JavaScript, uma função de temporização linear. Css é diferente e CSS é uma facilidade. Então isso pode pegá-lo. Portanto, apenas esteja ciente disso. E o que você pode enviar em 0s e fora. Ou se você queria ficar chique, talvez haja algo legal, você já viu vitórias fáceis, e vamos escolher um, vamos escolher esse tipo de. Então você pode escolher usar uma curva de sino. E novamente, você apenas passa isso como uma corda. Então, se você citar em torno dele e enviá-lo dentro Então, como agora vai acontecer, vai levar três segundos para ser, eu vou remover esse atraso porque nós vamos ser chatos. Aceite assistir. Dois segundos. Vai continuar uma eternidade e temos este filme a desistir. Você também pode dizer a ele para se mover. Você também pode definir a direção da animação, que se você fez qualquer um desses tipos de coisas em CSS, você sabe, você pode ir normal, reverso, final, um inverso alternativo. À primeira vista, você pode pensar por que é o inverso e por que é o, desculpe, Y é o reverso final. Tão normal iria de fundo, mas vapor, normal iria nessa direção. reverso obviamente iria nessa direção. Ultimate é para frente e para trás. Ultimate invertido lá. A principal diferença, pois começaria no final, se moveria dessa forma, e então continuaria. E você escreveria essa direção. E mais uma vez, isso é uma corda. Então seria normal ou seria reverso ou reverso final. Vamos nos livrar disso. Vamos nos livrar disso. E veja o que isso faz. Não é um grande negócio. Ok, então um mal qualquer coisa. Agora vamos dar uma olhada rápida e ver se podemos determinar o que fiz de errado. Aquele editor editado. Ok, então como um idiota, eu defini o modo de preenchimento para ser uma curva em forma de sino onde o que ele deveria ser é aliviar. É isso ou preencher. Phil nós não cobrimos. Phil pode ser normal ao contrário. Aqui vamos nós. Ele se foi. Auto para trás, ambos para frente, não frequentemente. Você tem que usar pelo menos para frente. Então, quando a animação é executada, você deseja manter os estilos que existem no final dessa animação. Talvez você não saiba. O outro que eu tendem a me encontrar usando muito é ambos, que significa que qualquer direção que eu executar esta animação, eu quero que os estilos em qualquer extremidade para aplicar dependendo de qualquer direção que é redonda. Então, neste caso, você morreria. Vou ficar lá os dois. Então vamos ver o que isso faz para nós. E você pode ver lá que a facilidade em um pouco incomum tem esse tipo agradável de estourar e função de temporização acontecendo lá. Então, em geral, se você fez esse tipo de coisa com CSS, isso deve parecer instantaneamente familiar. Poucas diferenças, mas em geral, deve ser o que você costumava fazer. Agora nós olhamos para o básico dessas coisas. Ambos os quadros-chave no vídeo anterior e as funções e opções de temporização neste vídeo. Esperemos que isso faça um pouco mais de sentido à medida que avançamos para fazer coisas com esta API. 11. A mesma animação feita com CSS e JS: Nos dois últimos vídeos, analisamos a escrita dos quadros-chave para uma animação em JavaScript. E, em seguida, também olhamos para as opções que você pode passar para uma animação Duration Delay funções de tempo. Neste vídeo, eu só quero dirigir para casa como escrever uma animação comparável em CSS e JavaScript. Então nós vamos, nós vamos colocar dois itens na página. Vamos fazer um spinner uma vez com CSS, e então eu faço exatamente o mesmo girador com JavaScript. Então div classe, e vamos chamar essa classe CSS um girador. Você provavelmente adivinharia o Spinner JS. Ambos partilharão alguns estilos. Então vamos definir os estilos comuns. Primeiro de tudo, não terrivelmente girar esteiras de livro ish porque nós paramos aqui, raio de fronteira 50%. E isso fará nosso círculo retangular. E na verdade, apenas para um pouco de espaço em torno destes quer manter um pouco de margem no lado de fora. E então gire CSS. Digamos que animação. Esperemos que ele tenha pelo menos 102 animações CSS escritas. Se não, espero que isso faça algum sentido. Nós vamos fazer a propriedade de animação, ou a propriedade de curto prazo que vamos passar em nosso nome de animação, que vai ser e me girar. E vai dizer 1 segundo. Ele vai ter para a frente e, portanto, manter os estilos como ele vai e vai ir infinito. E, em seguida, se você se lembrar, e animação em CSS usa a função de tempo de facilidade por padrão. E nós vamos querer, bem, na verdade, eu vou mostrar a vocês o que isso faz por padrão e então vamos colocar que iniciou a diferença. Então os quadros-chave também giram. E espero que você se lembre em CSS, se é o estado padrão é de onde você quer se mover. Você não precisa definir isso, então você pode apenas dizer para onde você quer ir. Então, neste caso, eu vou fazer uma transformação que é uma rotação de 359 graus. Ok, agora você pode ver aqui que é a função de tempo CSS padrão, que é fácil, que é esse tipo de movimento staccato que você tem lá. Então nós podemos resolver isso e CSS para nossas necessidades aqui apenas dizendo linear. E isso nos dará um, um tempo linear e funções do espinafre apenas continua indo. Então esse é o nosso CSS um ordenado. Vejamos como escreveríamos a mesma animação com JavaScript. Na realidade, girá-lo como este não é um bom caso de uso para uma animação JavaScript com a API Web Animations. Estamos fazendo isso apenas para levar para casa o formato que agora estamos nos acostumando em JavaScript do método animate, passando os quadros-chave. E, em seguida, as várias opções de tempo que queremos também precisa atribuir a este contexto, nosso girador J S é igual ao documento. Então, eu só vou pegar isso e o documento primeiro. E então vamos animar e vamos passar em dois objetos. Neste caso, estas serão as nossas opções, incluindo a função de temporização. E este primeiro vai ser o nosso quadro-chave. Então, novamente, palavra-chave não é como uma string, mas o valor da propriedade é, então vamos obter girar 359 graus. E então aqui vamos dizer duração. Se você se lembra, em JavaScript com a API JavaScript, não são segundos, são milissegundos e passamos como um inteiro. Então, há o nosso 1 segundo é milissegundos. Não queremos atrasar. Nós queremos o nosso preenchimento. E nós vamos dizer novamente, passando como uma corda, dispostos a dizer para frente, porque há coisas apenas indo para a frente, iterações de força. E JavaScript, passamos infinito em vez de infinito. E então, como discutimos um momento atrás, função de temporização padrão do JavaScript é linear, então não devemos precisar definir isso. Você pode ver que eles são exatamente iguais. Girar animado uma vez com CSS e uma vez com JavaScript. Agora, um problema comum com animações CSS é quando você deseja fazer duas transformações, por exemplo, e executá-las simultaneamente no mesmo elemento. Isso não é algo que você pode fazer com CSS, mas é algo que você pode fazer com JavaScript Web Animations API. Então, no próximo vídeo, vamos ver como poderíamos adicionar algo simples, como uma escala. Além disso, transforme girar. E vamos ver como isso é possível com JavaScript. 12. Adição de animações juntas: No final do último vídeo, tínhamos nos tornado giradores. Uma animando com CSS e a outra animando com JavaScript. E eu mencionei que um dos problemas comuns que você teria com CSS é se você está tentando aplicar a quadros-chave que usam Transform, por exemplo, ao mesmo tempo para o mesmo elemento. Então, primeiro de tudo, eu vou fazer isso com o CSS. E você pode ver o problema que ocorre. Então vamos supor que temos nosso spinner de autópsia aqui é a versão CSS. E vamos supor que ao lado desta coisa está girando, eu também quero que ela pulse. Então ele vai um pouco menor, um pouco maior à medida que a rotação está ocorrendo. Então você pode pensar que você poderia fazer algo assim. Então eu tenho outra transformação e você seria perdoado por acreditar que isso deve funcionar com fez outro quadro-chave que e tudo o que faz é escalar o elemento que é aplicado. É o nosso primeiro, vou copiar isso. Ele é eu vou em segundo. E este será Scale me. Consegue ver como está confuso? Forma de uma palavra melhor? Ele está tentando fazer ambas as animações são aqueles. Breed não sabe como resolver isso. Não pode, não consegue descobrir como aplicar as duas transformações juntas. Agora, no momento em que somos apanhados isso no final de 2020, não há solução para isso no CSS. Há, no entanto, uma solução para isso em JavaScript apenas para parar aquele top ser silencioso, tão irritante. E vou desligar a animação do CSS. Virar para o arquivo JavaScript, e então veremos como poderíamos fazer isso com JavaScript. Na verdade, nós podemos, nós podemos economizar tempo aqui, vamos levar essa. E nós viemos para mudar este bit para ser escala 0.8. Agora esta é exatamente a mesma situação que tivemos com todos os CSS um. Mas o Javascript Web Animations API como um truque chamado até a manga. Você também pode dentro de suas opções, você pode usar composto. E há alguns. Você pode ver aqui, strings que você pode passar para composto acumular em substituir, substitui o padrão que leva qualquer animação anterior estava em execução e substitui-lo por este novo. O que queremos fazer aqui é escolher. E o que isso vai fazer é pegar nossa segunda animação e adicioná-la com a primeira. Acumular é semelhante, mas ligeiramente diferente. Não vamos entrar nas diferenças disso. Agora só quero mostrar o que acontece quando o enfiamos também. Você pode pensar que isso ainda está quebrado, não é realmente só porque o que eu não fiz é que eu não defini a direção para ser definitiva no minuto. Está se reiniciando. Mas fazendo isso, você pode ver que temos essa linda combinação dessas duas animações separadas, algo que você simplesmente não pode fazer isso com CSS. Outra coisa que vale a pena notar neste ponto é que você pode ver como essas animações são escritas aqui, eles imediatamente jogam. Isso pode ou não ser o que você quer fazer. Então há um, há algumas maneiras de resolver esse problema. A maneira mais fácil seria designar, me girar como o outro. E este vai ser Scale me. E o que poderíamos então fazer é girar poças de pontos. E eles devem desligar um deles. E então você também poderia fazer “Scale me dipolos”. E o que você pode fazer aqui é que você pode, assim que você definiu uma animação, você pode imediatamente porque nós, nós atribuímos a uma const lá. Podemos então usar isso para dizer, esta coisa está anexada, é uma animação e imediatamente pausar. E então você poderia escolher disparar isso. E outros eventos como um botão sendo clicado ou algum outro acabamento de animação enquanto olhamos para isso agora, bem como uma oportunidade para arrumar isso um pouco. Cada vez que vimos essas animações até agora, passamos tudo direto para a função animada, o que é bom aqui. Mas quando você está fazendo algo um pouco maior escala, rapidamente fica difícil gerenciar todos esses quadros-chave e função de temporização diferente. Então, no próximo vídeo, vamos passar um pouco de tempo olhando para como você pode refatorar isso para torná-lo um pouco mais fácil de lidar com isso. 13. WaAPI 13: Volte a pensar em milissegundos atrás. No último vídeo, chegamos a um ponto em que tínhamos feito para nos girar quase CSS ou JavaScript. E olhamos para a alegria dessa propriedade composta que você pode usar em JavaScript para combinar duas animações juntas. Se você pode se lembrar, isso estava nos dando a capacidade de ter uma escala rodando em uma animação, rodando em outra animação, e obtendo o resultado desses dois juntos no DOM. Aproveite a oportunidade enquanto temos relativamente pouco código na página que apenas refatore isso um pouco e o torna mais gerenciável. No presente. Cada vez que executamos nesta função animar, passando os quadros-chave e as funções de temporização da mesma forma, como objetos. Então, provavelmente a coisa mais simples que você pode fazer se você tem um monte de animações é você pode nomear seus quadros-chave e separá-los. Então, neste caso, embora isso seja muito simples, podemos dizer const, spin kf e obviamente não temos que nomeá-los dessa maneira. Eu só, Eu tendem a colocar kf, kf no final ou no começo só para que eu sei que é um quadro-chave Miss vem. E tudo o que vamos fazer é levar isto a público assim. E depois passaremos. Em vez disso, vamos passar isso em latim, nesta primavera k, f. E então essa coisa que podemos retirar e podemos dizer const, spin timing. E então com um olhar melhor, sim, lá vamos nós. Então, tudo ainda funciona da mesma forma. Mas o que estamos fazendo é, estamos separando nossos quadros-chave em um objeto diferente e estamos separando todo o nosso tempo para essa animação, normalmente, você tende a fazer isso porque com quadros-chave, você não sempre passarão apenas uma coisa como esta. Normalmente, será um array e um monte de quadros-chave. E ver tudo isso dentro da função animada pode ficar um pouco confuso. Então vamos fazer a mesma coisa agora com este aqui. E você poderia empilhar tudo isso, menos o topo, se você quisesse. Então vamos supor que vamos crescer esta escala quadros KF Wiki. E vamos dizer, colocá-lo aqui em baixo apenas para lá em uma const de auditoria sensata, escala, tempo. E mais uma vez, vamos pegar estes. E então, se você imaginar aqui, tem apenas torna um pouco mais sensato pensar sobre estes como irracionalmente. Então aqui está a nossa função animada e vamos passá-la, desculpe, escala ou apenas aqui, passando todos os quadros-chave. E o nosso tempo e poupar isso só para que bonito faça a sua coisa. E então o que você pode encontrar é se você está trabalhando com ele, um grande pedaço de interação. Uma vez que você descobriu que você quadros-chave, você pode ficar mais em outro lugar e apenas importar homens e manter o, manter a lógica do que você está animação está fazendo para estes agradável, pequena causa sucinta para a função animar. Você verá esse tipo de padrão mais à medida que começamos a construir um pequeno projeto juntos. Para dar um exemplo, vamos supor que temos um botão, adicionar evento, ouvinte, ouvir. E então só torna mais fácil fazer chamadas assim. Ao invés de como em todo o tempo significa e mais velho. Os quadros-chave dentro de que se e se você fez isso neste outono, eu acho que você sabe, tudo o que você precisa, para começar a construir este projeto junto comigo. Então, no próximo vídeo, vamos dar uma olhada em profundidade no projeto vai estar construindo e vamos linha por linha seção por seção através do artigo acabado. E espero que, neste momento, fique bastante claro o que está acontecendo. Então vá e pegue uma xícara da sua bebida favorita. É provável que seja uma longa. Te vejo lá em um momento. 14. Visão Visão de arquivos de animação: Neste vídeo, vamos cobrir tudo além de escrever as próprias animações. Então, vou levá-los através de toda a estrutura deste projeto. Só para que você entenda a mecânica de tudo o que está acontecendo em torno das próprias animações e como eu cheguei a isso, este ponto com as várias coisas no DOM e como eles estão posicionados. Não quero que pareça que estou exagerando sobre qualquer pouco da implementação. Então isso é tudo o que está recebendo o HTML e como ele chegou lá, obteve os SVGs de como eles foram otimizados e colocados no DOM, o estilo básico e como isso foi configurado. Então, se todas essas coisas que você pode viver sem, por todos os meios, pule para o próximo vídeo onde falamos sobre as animações reais neste projeto. Mas caso contrário, fique por aí e eu vou te explicar tudo o que fizemos. Você pode ver que temos um elemento principal aqui. E em vídeos anteriores mostramos a vocês a semana. Mostrei esses controles na parte inferior, que são os vários botões que temos aqui. Você também pode ver aqui há este elemento de lado aqui onde este é exatamente onde eu estou dando crédito para a obra de arte e de onde isso foi originado. O, o tipo de bit interessante em termos do projeto em si e as coisas que você pode ver acontecendo enquanto você pular através dessas cenas. Todos os ativos gráficos que foram provenientes de um site chamado vetor fácil. Então, se você vai para vetor fácil, procure por algo que está no tipo de coisa que você está interessado em usar. Então, obviamente eu escolhi algo temático do espaço, mas você pode escolher algo, bem, o que você quiser. A coisa chave a fazer, duas coisas para estar ciente. Você precisa da tela um pouco mais larga. Você precisa se certificar de que você leva editor compatível. E, em seguida, qualquer uma dessas coisas que você clicar, você pode ver que você tem este pequeno botão de edição aqui. Por razões que eu não entendo quando você tela é pequena ou que capacidades retiradas. Tão necessitado um pouco mais largo, clique no botão de edição. E então o que você pode fazer é realmente você pode simplesmente baixar o recurso diretamente para fora deste editor aqui. Isso foi efetivamente o que eu fiz. Então, se você imaginar que eu peguei o efeito aplicativos SVG fácil. E então o que eu fiz foi fazer tudo isso. Eu estou usando sketchier, mas, obviamente, você poderia estar usando espelho falso ou qualquer que seus pacotes gráficos favoritos, colá-lo em cada um dos ativos que são Não, eu era provável que precise e deu-lhes um título. E então uma coisa que eu sempre gosto de fazer, se eu vou colocar ativo SVG na web, então eu sempre vou executá-lo. Existe uma ferramenta chamada SVG, que basicamente otimiza arquivos SVG. E ainda melhor do que inquieto. E esse cara chamado Jake Archibald miter, uma ferramenta que envolve SVG, que é uma ferramenta de linha de comando, coloca-o em uma interface gráfica agradável. Então, neste caso, eu pegaria meu quadro de arte aqui, copiaria o código SVG. Abra SVG, cole na minha marcação, e então ele lhe dá essas duas guias aqui, os tablets de imagem, você apenas verifica se nada deu errado depois que as otimizações foram feitas. Mas você pode ver aqui a diferença no código. Vou fazer isso em tela cheia por um momento. Este é o código otimizado. E então esse foi o original. Então você pode ver que ele está tirando muitos dos espaços em branco, normalizando todos os números, removendo quaisquer elementos que não são necessários. O resultado é tão longo quanto a coisa parece que você quer que ele pareça. Você pode ver aqui que temos uma economia de 64% no tamanho do arquivo. Então, não era enorme antes por qualquer trecho, mas desceu um pouco. Você pode simplesmente copiar isso de lá agora. E este era o nosso Moss. E então o que ele estava fazendo está dentro do HTML. Apenas mova isso para lá. Então, sim, dentro do HTML, tudo o que estou fazendo é para cada um dos ativos gráficos de envolvê-los em um elemento. E eu acabei de colar esse código SVG diretamente dentro do elemento. E esta classe sobre o elemento rápido é apenas para que possamos colocar alguns CSS posicionamento básico em que foi feito para cada um desses elementos aqui. Então você pode ver estes nomeados exatamente os mesmos shoppings lunares de Saturno, planejamento de ataque de foguetes, Eddie. Lá vai você. Do outro lado da lua, estrelas no chão. Você pode apenas sobre fazer a camada, mas isso foi uma espécie de fuga de estrela, se você quiser, que você pode ver por trás de cada uma das cenas. Então você pode apenas fazer aquele lá fora com essas amalgamações sem usá-lo como um elemento de fundo, que você verá em um minuto. E então esta div aqui é apenas o nosso tipo inicial de texto de rolagem do Stowe. Ele é o tipo de carne e batatas com o que vamos estar lidando quando viermos animar as coisas e os estilos básicos para cuidar disso. Você pode ver aqui temos alguns conceitos básicos para de HTML. E nossa tela de elementos rápidos é o que estamos chamando esta área aqui. Há o fundo das nossas lojas e cada conjunto para nos dar a nossa fuga estelar. Eu pensei que esta linha valia a pena chamar para fora porque eu posteriormente passei por isso. Mas eu pensei que era interessante o suficiente para apenas falar brevemente sobre a primeira ter as estrelas de fundo, essas coisas aqui. Eu tinha aqueles mais brilhantes do que você vê-los lá. E o que estava a fazer era que eu estava a espetá-los. Isso foi usando o elemento de fundo, colando os estilos na parte de trás e, em seguida, a fim colocar uma lavagem mais escura sobre o topo e escuro e aquelas estrelas para baixo. Eu estava sendo preguiçoso e fazendo isso em código em vez de apenas fazê-lo no editor de gráficos. Mas enquanto eu estava fazendo é usando um gradiente linear, que era efetivamente nenhum gradiente, mas que permite que você coloque uma sobreposição semitransparente no topo de uma imagem com CSS. Ele é uma espécie de truque CSS. No entanto, o que eu descobri quando eu fiz isso é que a qualidade da animação, não a qualidade, que o desempenho da animação começou a sofrer. Então eu diria que ocasionalmente eles são o tipo de coisas que você pode fazer uma escolha. Não percebi por que nossa animação ainda a tenta manter seus elementos o mais simples possível, coisas que você está adicionando capacidade e filtros para. E CSS são menos propensos a animar Bem quando você deslocá-los ao redor da tela, o limpador, que você pode ver aqui que é quando cada CNN, você pode ver que temos vários tipos de transições. Novamente, tipo de transmitido fora da tela estilo fogão dissolve-se. E a parte branca é o que usamos para fazer isso. E é apenas um único elemento que estamos movendo ao redor da página novamente com o y p, você pode ver que havia um, havia uma sombra de caixa lá em 1 onde novamente, eu acabei puxando isso para fora porque realmente não adicionou muito. E novamente, é mais e requer mais poder computacional. Se você tem uma renderização, uma sombra para a tela e seu filme sobre nós, obviamente mais intensivo para o computador fazer. Tudo o mais que você pode ver está posicionado todos os nossos recursos gráficos. Estou colocando-os dentro da tela. Absolutamente posição Então, por padrão, eles se sentarão no canto superior esquerdo desse elemento rápido. Suponha que as coisas são metade para filtrar porque eu senti que valia a pena. Então, se você quiser levá-lo de volta ao início aqui, eu gostei deste pequeno tipo de brilho da lua, um cheio que foi um ativo bastante deixado que, no entanto, todos esses elementos estão posicionados, alguns deles se transformam em apenas para posicioná-los em algum lugar razoável na página. E então vamos animar de lá para outro lugar. Vale a pena refrescá-lo apenas no caso de você não estar ciente quando usamos posição absoluta no NCSS, esses elementos novamente, para ser posicionado em relação ao seu pai elemento não-estático mais próximo. Então, no nosso caso, você pode ver aqui em cima todos os Canvas que é o pai para todos esses ativos gráficos. Demos a isso uma posição de relativo, o que significa que nossos elementos absolutamente posicionados se posicionarão em relação a isso. A outra coisa boa sobre em termos de animação é que você não precisa usar uma transformação e isso não afetará outros elementos. Normalmente, se você estiver, se você estiver elementos estão em fluxo de documentos normal e você movê-los com margens, preenchimentos e todo esse tipo de coisas, eles vão interferir com qualquer outra coisa que também esteja no fluxo de documentos. Então, por causa do que estamos fazendo aqui, eu acabei de deixar tudo absolutamente posicionado para que todos possam se mover independentemente e não afetar nenhum outro elemento. Então, um pouco mais abaixo no CSS, você pode ver aqui, nós temos alguma transformação padrão nesse tipo inicial de imposto Star Wars apenas para dar uma perspectiva distorcida. Então, usando algumas transformações, eles estavam girando e traduzindo. Quadrinhos de outras palavras que rimam com isso. É o que estamos fazendo com ele. E então nós também temos aqui, você pode ver buracos negros girar quando entramos no buraco negro. Verá que quando desligarmos o buraco negro, ele gira ao redor. E eu estou apenas usando uma animação CSS aqui para fazer isso em vez de fazê-lo em JavaScript. Só para mostrar, você pode misturar e combinar essas duas coisas muito felizes. Quando se trata do JavaScript. Muitas dessas coisas que você já viu nos vídeos anteriores em termos de configuração básica deste arquivo, estamos atribuindo todos os nossos botões para concertos. E temos alguns ouvintes de cliques acontecendo, no próximo e anterior. Temos um nos poros, que vamos ver em um vídeo mais tarde e, e no botão do buraco negro também. Todos nós temos todos os elementos na página para os ativos gráficos que obtivemos preso no DOM. São todos referenciados aqui. E então estamos nas variáveis que configuramos no vídeo anterior para nossa funcionalidade seguinte e anterior. Então podemos passar por isso, essas sequências de animações nos poucos vídeos também. Se você se lembra, olhamos para refatorar esse código para que nossos quadros-chave e temporizadores de quadros-chave estivessem em cientistas separados, variáveis separadas ou constantes neste caso. Então aqui está um monte de nossos quadros chave e não, não se preocupe com eles por enquanto. Os horários aqui oferecem cada uma das cenas e vou explicar por que fizemos isso aqui enquanto continuamos no próximo vídeo. Ou animações para as diferentes cenas são todas tratadas neste único e m função, que eu era muito preguiçoso para escrever animação fora. Eu não queria que ele fosse confundido com animate que eram obviamente um método real para a API. Inimigos onde toda a magia acontece. E, além disso, temos processado função de clique de direção, que já passamos antes. Então não precisamos nos preocupar com isso. Alternar a reprodução é o que usamos para fazer um jogo e pausar. E novamente, chegaremos a isso em breve. E então eu vou funcionar buraco negro novamente, que virá para mais adiante. Em termos de nosso arquivo JavaScript. Estamos apenas referindo nossos controles. Estamos ligando os controles para funções que vamos voar para fazer o que precisamos que eles façam. Também estamos fazendo referências a cada um dos elementos gráficos que podemos querer animar. E, principalmente, temos uma carga de diferentes quadros-chave atribuídos a constantes. E então temos uma função, função principal, que vai começar a animar esses elementos. E isso é o que finalmente chegamos a agora e vamos olhar para o próximo vídeo. 15. Writing animação: Supondo que você não começou neste vídeo em particular, você saberá o que estamos vendo no lado esquerdo da tela aqui. Esta é uma série de animações de quadros-chave diferentes. A tampa de todos os possíveis bits de animação será os diferentes quadros-chave que eu preciso para executar em vários elementos, a fim de obter este conjunto de animações funcionando. Ou rolar o suficiente tributados são rochosos voando através dos planetas, mover-se ligeiramente. A coisinha do título chegando, o WIP se movendo. Isso. Por que estreitar lá em baixo que o foguete chegando e através de Marte, movendo-se através da trilha do foguete, impulsionadores, desligando e alittle alienígena aparecendo também. Cada um deles está coberto por esses diferentes conjuntos de quadros-chave aqui. Então eu tentei nomeá-los um pouco sensatamente. Mas a coisa chave aqui é dizer que não há, não há nenhuma habilidade mágica que você possa aprender a acertar essas coisas. É apenas muito tempo, tentativa e erro, fazer as coisas funcionarem da maneira que você quer que elas funcionem. A única coisa que não olhamos até agora, pena chamar é como você está abaixo esses quadros-chave, você verá ocasionalmente deslocado aqui. Agora, o deslocamento faz é que ele permite que você faça o equivalente a porcentagens em animações CSS. E animação CSS. Podemos dizer que não, fazemos isso 50%, fazemos isso em 100%, fazemos isso. Isso pode ser facilmente 73, desculpe, não 730, 73%. E nisso, isso é obviamente o que você faz nesse ponto específico enquanto os quadros-chave estão passando. E, se durar cinco segundos, será em um determinado ponto. E se a animação fosse executada por dez segundos, seria em 73% de dez segundos. Então você pode fazer a mesma coisa em molhado com a API Web Animations usando esta palavra-chave offset, você pode ver que não é uma string, é um inteiro e está entre nada e um, com um sendo uma nota 100% sendo 0%. Então 0.2 está em 20%. Então é tão simples quanto isso é quando você quadros-chave, e crucialmente são os quadros-chave com os quais você passa, não as opções de temporização. Você verá isso espalhado por aqui, mas é basicamente o que é. Não há nada aqui que você ainda não tenha visto. Vamos passar por alguns exemplos. Então ofertas de texto cruéis ou o texto de Stowe. E você pode ver aqui, é por onde estamos começando. E então estamos usando a tradução Y para tirar o Feng para longe. A maioria deles tem apenas dois quadros-chave, é uma espécie de ponto inicial e final. Há alguns que têm mais como este que nós apenas olhamos aqui em geral, mesmo que eles olhem, vamos colocar um pouco mais de espaço aqui. Mesmo que pareçam, pode parecer um pouco intimidante no início, mas não há nada que você não esteja acostumado a fazer em CSS se você não fez animações CSS em tudo. É só um monte deles. Uma vez todo o total de tudo o que acontece. Novamente, este padrão, Você deve ser usado para colchetes para os quadros-chave da matriz, separados por vírgula ou um objeto cada. Então aqui vamos nós. Colchetes como nosso objeto para o primeiro quadro-chave e como o segundo quadro-chave. E você pode ver, mesmo que estes sejam escritos de forma diferente em lugares diferentes, é exatamente o mesmo padrão. Agora, para fazer isso, você fez algumas lições, Mark. Eu acho que você tem isso agora. Então, na próxima lição, vamos olhar para como realmente executar esses quadros-chave juntos e realmente construir as animações ope. 16. Animações de sequências: Último vídeo que estávamos entrando no meio de todo o arquivo JavaScript principal que executa todas essas animações para o nosso projeto que estamos construindo juntos. Nós olhamos através desses quadros-chave e podemos ver que eles são, enquanto há muitos deles. E pode parecer confuso no início. É o mesmo padrão básico que temos, usamos algumas vezes ao longo e é essencialmente o mesmo que você estaria fazendo com CSS. Além disso, queremos olhar agora para a nossa principal função de animação. E se você se lembra, este pequeno projeto funciona conosco tendo um contador simples que passa pelas cenas que queremos executar. E com base, então, de qual número específico foram cena Ohno que estamos indo para sequenciar um monte dessas animações e quadros-chave para R1. C1 é efetivamente o que acontece aqui. O texto do Stowe sai. Um foguete se move, mas um texto entra e esses planetas estão se movendo suavemente. A primeira coisa que você verá aqui dentro do, a seção C1 é que eu estou realmente redefinindo as coisas do navio aqui. Então a razão que é feito aqui é porque você pode estar voltando para cena para cena um de s2. E se for esse o caso, precisamos atender a isso, embaralhando todos os pedaços e pedaços que precisamos de volta no lugar certo. Agora, você pode ver aqui com toda essa vontade, esses que são resets, a duração é definida como 0, então você não vê a animação acontecendo. É apenas uma maneira rápida de colocar tudo volta onde ele precisa estar pronto para executar a animação corretamente. Esta função animate está fazendo tudo o que você já viu muitas vezes. Agora, estamos escolhendo o elemento. Estamos rodando o método animado nele. E então passamos em nossos quadros-chave que, você sabe, rolar, rolar, texto desligado ou desaparecer. Então isso é referenciar nossos quadros-chave aparecem. E então estamos passando em nossas opções de animação ou funções de temporização ou durações e coisas assim. E neste caso, todos estes dizem correr com duração 0 apenas para redefini-los de volta ao normal. Então, as coisas interessantes começam um pouco mais aqui embaixo. E você pode ver aqui o texto de Stowe têxtil cruel. Começamos correndo por três segundos. O modo de preenchimento é para frente, de modo que os estilos são retidos à medida que se desliga. E então, curiosamente, você pode ver aqui que a próxima coisa que temos, lembre-se no início quando eu estava tentando te vender a idéia de aprender essas coisas. Uma coisa que você poderia fazer com uma API JavaScript que você não pode fazer com as animações CSS. Como sequenciamento. Você pode executar uma animação na parte de trás de outra animação. E fazemos isso com a API JavaScript Web Animations utilizando uma adição bastante recente à linguagem, que é promessas. E o que promessas fazem é que eles nos deixam dizer terminado, que é basicamente como quando essa coisa está terminada, então vá e faça essa outra coisa. Agora, no próximo vídeo, eu vou lutar e tentar dar a vocês uma versão leiga de exatamente como as promessas funcionam e por que elas são tão importantes para o que estamos fazendo aqui. Mas por enquanto, basta considerar algumas das outras coisas que são possíveis aqui no JavaScript que não são possíveis ou não tão fáceis com CSS. Você pode ver em algumas dessas animações que estão em execução em termos de duração, podemos dizer duração C1 dividido por uma certa quantidade. E isso não é só para ser o Coyle esperto. É porque se decidirmos mudar a duração do C1 para dez segundos ou 15 segundos, não precisamos voltar à nossa animação e tudo em tempo real. O fato de que tudo isso é baseado nesse valor inicial significa que não temos que nos preocupar com isso. Você pode ver aqui que estamos dizendo quando esta coisa está terminada, coisa de realeza, quando esta coisa está terminada, coisa de errado. E sobre e sobre ele vai. E você pode ver aqui no final nós usando o acabado não executar outra animação era realmente apenas mudar algo na cúpula. Embora eu possa apreciar se você não está acostumado a escrever animação para JavaScript, isso pode parecer muito complicado, livro muito intimidante cresceu o código. Tome o seu tempo e olhe através dele e você verá que na verdade é apenas um monte de coisas que você já sabe como fazer. Então, com tudo o que disse, quero enfatizar o quão importante e útil essa ideia de encadear as animações está usando essas promessas que fazem parte da API de Animações Web. No próximo vídeo, falaremos sobre promessas em geral e por que isso é tão útil para nós. 17. Regressar de confiança básica: Se você está assistindo a este vídeo e sabe o que o JavaScript promete, ou um a para você assistir o vídeo errado. Vá para o próximo. Para todos os outros. Vou tentar da maneira mais simples que puder para explicar quais promessas estão em JavaScript. Agora deixe-me ser claro. Isso não vai me ganhar um lugar que o Google, eu estou interessado aqui, não em precisão técnica, mas sim apenas transmitir os fundamentos do conceito de promessas. Em JavaScript. Normalmente, o analisador vai para baixo linha por linha e executa cada linha de código no arquivo JavaScript. O que ele não faz por padrão é saber esperar por algo. Então, por exemplo, ele iria acertar Align. Você vai dizer, vá e me dê esse pedaço de texto da internet. Ele normalmente não espera que esse pedaço de texto volte antes de passar para a próxima linha, nem deveria, onde teríamos algum JavaScript muito, muito lento na natureza. No entanto, anteriormente, contornamos essa questão com algo chamado retornos de chamada. Uma função de retorno de chamada é simplesmente o termo que usamos para descrever quando você passa uma função como um argumento para uma função diferente, que é então executada a partir da função de autor. E você veria um padrão pelo qual algo entrará. Haverá um pouco de código e então você teria sua chamada de volta aqui. E isso teria o nome que precisa ter. Isto vai correr depois desta primeira parte. Então você pode ter opções em sua, Angie iria, Aqui está o meu corpo principal função. E você faz todas as coisas que você precisava fazer dentro de sua função lá, usando as opções que tinham sido transmitidas. E então, quando tudo isso tivesse sido feito, você faria algo assim para fugir. A segunda função que você está passando quando você chama. Isso já funcionou bem o suficiente. Embora acabe com código que tipo de revestimento a pirâmide da desgraça, onde está indo triangular, inferior, triangular, realmente trilha. Está atravessando a página. Podemos fazer melhor do que isso agora com promessas em JavaScript, todos podemos nos identificar com o fato de que fizemos promessas às pessoas. Às vezes, essas promessas são cumpridas e às vezes não são. E eles funcionam exatamente da mesma forma em JavaScript. Em uma promessa permite que você representa algo que pode ou não ser cumprido ou rejeitado. Por que isso é interessante para nós com uma API de animações JavaScript é porque uma das coisas fundamentais que queremos fazer com animações e CSS está errada. Uma animação da parte de trás de outra animação sem ter que fazer a ginástica mental de descobrir os atrasos corretos para as coisas serem executadas em sequência. E estamos usando isso extensivamente em nosso pequeno projeto para fazer uma coisa acontecer. E uma vez que isso é feito, outra coisa acontece e sobre e sobre e sobre. E a sintaxe ou tudo o que você precisa entender com a finalidade de usar esta API JavaScript é este ponto acabado, em seguida, palavras-chave, sintaxe. Quando uma animação é concluída, você, você pode vê-lo se este espaço em branco não é necessariamente, é apenas a forma como ele é formatado. Você executaria o método animado. E, em seguida, imediatamente você vai ponto acabado ponto, então. E você pode ver aqui nós usamos uma função de seta para que você possa passar algo por lá se você quiser colocar normalmente você não é. E então você dá a ele uma função de seta. E depois há o corpo da próxima coisa que você quer que aconteça. Então, neste caso, o texto rola fora, removendo um atributo no DOM, e então eu estou executando outra animação. E mais uma vez, tenho uma promessa aqui nesta. E quando essa terminar, eu faço a próxima coisa. Com a API JavaScript Web Animations. Você não precisa entrar nas complexidades normalmente de se uma promessa está pendente ou se ela é rejeitada. Esses são os tipos de coisas que você se preocupa quando você está fazendo programação real, se você quiser, em vez de apenas mover as coisas na interface do usuário. Mas este conceito de promessas ainda é muito útil para nós por esta mesma razão. Então, as únicas coisas que você realmente precisa tirar dessa ou aquela promessa incrível em JavaScript que nos permite fazer as coisas de forma assíncrona. E a sintaxe para nós fazer isso com animações e para seqüenciar animações é ponto acabado ponto van chaves, função seta. A próxima coisa que você quer fazer. E você pode acorrentá-los sobre e sobre e sobre o quanto você quiser. Agora, outra coisa realmente grande sobre a API de animações da Web é o fato de que é muito simples pausar e reiniciar animações. E veremos como fazer isso no próximo vídeo. Usando nossas novas promessas de melhor amigo. 18. Pausing em pausa e restaurando animações: Uma das grandes coisas. Outra grande coisa sobre Web Animations API é que ele torna simples para pausar e, em seguida, reproduzir vídeos. Lembre-se, no início, quando fizemos nossa página de índice, tínhamos um botão que tínhamos chamado “pools” inventivamente. E vamos olhar para isso agora e ver como isso está aberto, ver como ele pausa e reproduz a animação. Então, só para te dar uma ideia do que está acontecendo. Assim, à medida que a nossa animação é reproduzida, podemos clicar em pausa. E quando você clicar nele novamente para impedir que as coisas funcionem novamente. E a forma como funciona aparece na parte superior de todos os arquivos. Acabamos de adicionar um ouvinte de eventos ao botão de pausa. E você pode ver aqui que quando você clica nele, estamos executando uma função chamada toggle play back. Retirei todas as outras funções que não são relevantes. E é uma pequena função que estamos vendo aqui. Então, na parte inferior do nosso arquivo aqui você pode ver aqui está a nossa função de reprodução total. Tudo o que eles armazenam. Há um método que faz parte da API de animações da Web, que você executa nos documentos, e é chamado Obter animações. E o que ele faz é coletar todas as animações que estão sendo executadas nesse documento. E então você pode fazer basicamente o que você quer fazer com essas animações. Você pode inspecionar as profecias dessas animações e também pode fazer alterações nessas animações. Então, neste caso, o que estamos fazendo aqui é que ele fornece o método de mapa de pontos, que é um método que você pode executar em arrays tipicamente. Mas porque há um monte dessas animações que você pode mapear, que é basicamente, se você não sabe o que é mapa, é, é como executar um loop em várias coisas. Ele deixa você repetir sobre algo. Então, no nosso caso, estamos dizendo para obter todas as animações e então nós queremos fazer um loop sobre elas. E vocês podem ver aqui que eu, eu tenho intitulado cada uma das animações, Eu tenho chamado inventivamente animação. E o que isso me permite fazer é dizer, se o estado de reprodução da animação estiver em execução, IE faz uma animação acontecendo, então o que eu quero fazer é pausá-la. No entanto, se a animação já estiver pausada, então eu quero reproduzi-la. Portanto, é apenas uma alternância muito simples, mas está usando esses métodos que obtemos com esta API. Então só para passar por isso mais uma vez, estamos dizendo, me dê todas as animações, que está aqui. E então devemos mapeá-los para iterar sobre todas as animações que encontramos no documento. Estamos nomeando. Cada instância dessas animações. Você pode chamar salsichas se quiser, ou casaco ou janela. Isso realmente não importa, é apenas um identificador para como nós iteramos sobre eles. E então eu estou dizendo, se esta animação em particular tem um estado de jogo de Rodin, você pode vê-lo. Esta é uma corda e eu estou usando igualdade aqui para dizer que são basicamente três sinais iguais. Se estamos correndo, pausar. Então, novamente, é este ponto poros colchetes chama essa função, pausa-a. Caso contrário, se a animação em si já estava pausada, então queremos que ela seja reproduzida. E é tão simples assim. Isso te permite reunir qualquer coisa. Animações sábio, se ele foi escrito em CSS, JavaScript, e, em seguida, pausar placa. E há também outros métodos que temos disponíveis como ponto conselho, ponto final. E vamos aproveitar a oportunidade no próximo vídeo, vamos tentar refatorar o que temos no minuto em que o resultado final será exatamente o mesmo ou muito próximo. Mas o que eu quero fazer é olhar para o que aconteceria se refatorássemos o código que temos e tentássemos basear mais em torno de atribuir as animações a variáveis e executar essas e quais são as coisas que poderíamos fazer sem nos dão quaisquer economias escrevendo as coisas de uma maneira diferente. Então vamos fazer isso no próximo vídeo. 19. Refatoração do nosso código: No último vídeo, analisamos como poderíamos pausar e reproduzir facilmente todas as animações que estão ocorrendo a qualquer momento no documento. E como conseqüência disso, olhamos para métodos da API, como poros e jogo de pontos. E também mencionou que havia coisas como mobília de pontos e cancelamento de pontos. E isso me levou a pensar, eu me pergunto como seria este arquivo se nós refatorá-lo, para baseá-lo mais redondo usando ou configurando as funções com variáveis. Então isso pode ser chamado com ponto play e pontos poros e ponto reverso, em vez do tipo de forma declarativa que fizemos até agora. Então vamos comprimir as próximas horas em um ritmo muito rápido e temporal, se quiser, de eu refatorar este código. E então vamos examinar o que eu tenho dormitório e veremos se há algum benefício em fazer isso e quais são as compensações, todo o resto. Vemo-nos daqui a 40 segundos em tempo real, em poucas horas para mim. Eu tenho todas essas animações e provavelmente haverá mais que eu só preciso executar o mesmo tempo atual é igual a 0 e até poros para parar e assim por diante. Eu mais sinto se eu apenas olhar tipo de abstrato esta funcionalidade bit fora em uma função. Então eu vou fazer reset de função e animações. E isso vai levar uma série de animações, animações para cada um. E eu só vou fazer um loop sobre isso. Basicamente, nós Animação, dizer animação ponto tempo atual é igual a 0 e animação não. E então aqui eu deveria ser capaz de apenas fazer animações VSAT. E então eu vou passar nesta matriz de todas as coisas que eu quero executá-lo em auto tem em texto de Stowe off e M planejamento de tráfego de fase sobre ele. Porque desaparecem e escapam. O meu painel. Introdução. Outra coisa deve funcionar exatamente da mesma forma. Eu tenho que falar sobre o que mais gosta de quente em duas ou três horas. Vamos comparar agora os dois arquivos. Então isso é o que tínhamos antes. E então vamos compará-lo com este, que é o que foi refatorado. A maioria das coisas lá em cima é exatamente a mesma. Você pode ver como nós olhamos para coisas como os quadros-chave que eu acabei de adicionar kf no grande, no início. Só para que eu não fique confuso entre o que é uma função para toda a animação e o que é apenas os quadros-chave. Nada é materialmente alterado lá, apenas, apenas ligeiramente renomeado. Onde fica um pouco diferente é uma vez que você passar o, as durações de tempo aqui, você pode ver, bem, na verdade, eu vou pular isso um minuto. Se você descer para a nossa função animar principal funcional anime agora, parece bastante diferente em comparação com a nossa função principal como era antes. Você pode ver que antes disso nós estávamos redefinindo coisas como esta. E então descrevemos cada um ali mesmo na função. E então seguiremos em frente usando nossas promessas para sequenciar a próxima animação que parece um pouco diferente. Agora, o que, o que fizemos foi levado, tomado algo como limpador de pára-brisas animar isso. E eu embrulhei isso em algo assim. Então esta parte aqui é essencialmente o que você está recebendo. O. E então o que eu estou fazendo é atribuí-la com um nome para que eu possa chamar com ponto play ou eu posso pará-lo com pontas poras. Então, mais adiante, você pode ver que a função de animação real em si é muito mais concisa porque estamos apenas fazendo coisas como aquela coisa tocar quando nada está terminado. Animação Roma do que Rona animação e, em seguida, executar essa animação. E embora isso seja agradável e compacto, eu realmente achei isso mais difícil de raciocinar e pensar sobre isso. Obtém essencialmente o mesmo resultado. Há alguns pedacinhos aqui onde eu, eu não acho que funciona muito bem, mas foi um refator suficiente para me fazer perceber que eu realmente prefiro do jeito original. O que é importante aqui, porém, é que ele ilustra que há uma série de maneiras que você pode escrever essas coisas para obter resultados muito semelhantes. Depende apenas do seu caso de uso e das suas preferências. Mas você pode ver aqui coisas divertidas aqui que você, que nós não olhamos antes. Há maneiras de reverter uma animação onde você pode usar ponto reverso, mas isso sempre inverte a direção em que está sendo executada. Enquanto uma taxa de reprodução de um é sempre avançada e uma taxa de reprodução de, de menos1, que temos alguns lugares aqui, é sempre inversa. Então eu tenho isso de vez em quando. Cancelar, onde temos este método de cancelamento de ponto. O que o ponto cancelar portas método é basicamente termina que animação e andar. Está, está morto. Não sobrou nada daquela coisa ali. Acabamento de pontos, empurra e animação em seu ponto final, leva imediatamente a animação para o ponto final. Então você pode ver que algo como uma cena três, muito, muito compacto desta maneira. E nós usando essa função de animações recentes para apenas loop através de qualquer coisa que queremos para definir de volta para o início. Então, se você comparar ver três, assim que tínhamos antes. Isso. Então aqui está. Na totalidade, na totalidade, no total. É assim que se faz. No entanto, enquanto isso parece compacto, uma vez que você tem que reescrever tudo isso, todos os pedaços de peças aparecem e atribuí-los a constantes ou variáveis. O tamanho total do arquivo real do refatorado é de cerca de 565 linhas. E o original estava chegando por volta do 459. Então, na verdade, é mais longo em alguns aspectos, mas pode ser melhor deixar isso nos arquivos para que você dê uma olhada na minha preferência, da maneira que fizemos isso originalmente. Mas desta forma é igualmente válida se essa é a sua preferência. Agora estivemos naquela pequena excursão de refatoração. Vamos voltar e usar o código original, o código que olhamos o tempo todo. E o que vamos fazer a seguir é olhar para como você pode inspecionar uma transformação, algo que costumava ter que usar algo chamado matriz para obter os valores de uma transformação CSS. E há algo que podemos fazer agora com a API que nos permite pegar coisas em outros lugares da página já estão transformadas e movê-las para um novo lugar. Então vamos ver isso no próximo vídeo. 20. Não de matriz: Chega de matriz. Isso não quer dizer que você não pode continuar assistindo filmes de Keanu Reeves sem dúvida superestimados dos anos 90. No entanto, o que podemos fazer é parar de usar a matriz CSS para tentar descobrir o que está acontecendo com a transformação. Se você não tem idéia do que eu estou falando, Considere a situação existente com animações CSS onde você vai colocar uma transformação em um elemento e com base em sua posição atual, você quer ler isso com JavaScript, obter as coordenadas de onde ele está no momento e movê-lo ou alterá-lo de alguma forma. Com JavaScript. Historicamente, tivemos que usar a propriedade matrix. Agora a propriedade matrix é o que o navegador compõe todas as diferentes transformações que você pode ter colocado em um elemento em uma sintaxe temível. Então, há um veículo de ferramentas, é tools.com irritado, CSS, transformado de barra do gerador tracejado. E isso nos permite ir agradável, simples interface do usuário. Você pode apenas adicionar um pouco de em algumas transformações diferentes em um elemento aqui. E agora o que é importante notar é o que é gerado. Aqui em baixo. Você pode ignorar os prefixos de fornecedor usados para observar esta linha superior aqui. Este é o valor da matriz há o resultado de todas essas outras transformações separadas. E ele é uma forma sucinta de o navegador comunicar exatamente como funciona a coisa a parecer. No entanto, quando você vem para ler isso de volta em JavaScript, é muito difícil tentar descobrir quais bits a rotação, quais bits a, a transformação x, que bits a escala. A boa notícia é que, com a Web Animations API, você pode simplificar esse tipo de processo de lucro usando apenas Get Computed Style. Você pode passar lição para a API de animações da Web e usá-lo como ponto de partida para outra animação. Vamos usar isso quando olharmos para como fazemos com que todos os buracos negros funcionem. Quando você fizer isso no próximo vídeo. 21. Novas animações médias: Isso é potencialmente ir para as ervas daninhas um pouco, mas eu queria mostrar o tipo de coisa que é possível quando você animar com JavaScript em vez animar com CSS, se é isso que você está acostumado. Então, dentro do nosso pequeno projeto de animação, você pode ver que quando clicamos ao lado da frente, pagamos cada um, este botão de buraco negro acende-se para nós usarmos. Agora vou refrescar isso de novo. Vou te mostrar o que acontece quando apertarmos isso. Então, o sabão de luz buraco negro, eu clico buraco negro, um buraco negro aparece e suga muitos dos elementos que estão na página para dentro dele. Agora, como isso é alcançado é o seguinte. Nós conectamos nosso botão de buraco negro para criar a função de buraco negro, que é a coisa que vamos olhar agora. Então anote a parte inferior do arquivo do projeto, o último arquivo do projeto. Você pode ver aqui, esta função de buraco negro caixa. Agora, eu só vou passar pelo tipo de peças de configuração desta função primeiro. Mesmo que eles não estejam realmente a ver com a API de animações da Web, apenas para que você entenda o que está acontecendo. Primeiro de tudo, estamos apenas dizendo que temos um Booleano que sentamos o buraco negro ativo, que é definido para ser verdade quando o buraco negro é ativado. Se isso já estiver ativado, não queremos reiniciá-lo. Então, se os buracos negros já entrarem, ou o índice atual e não seria invisível, então estamos basicamente apenas retornando a função que estamos fazendo um retorno antecipado lá. Então o que estamos fazendo é para todas essas outras caixas, para o próximo, anterior e pausa. Se os buracos negros correrem, queremos fazer uma pausa. Havia apenas assim que alguns se tornam bagunça alguma coisa e parar as animações conheceu fluxo, algo assim. Então o que estamos fazendo é pegar a área da tela pelo tipo de área da cena. E estamos recebendo a caixa de retângulo do cliente. Então nos dá toda a informação de geometria que podemos precisar. Temos então um flutuador aleatório de função, que se você alimentá-lo um mínimo e um máximo, ele vai lhe dar de volta uma figura aleatória entre esses dois pontos. Coordenadas aleatórias é apenas mais uma pequena função que nos permite gerar um valor X e Y com base em nosso tamanho de tela. Temos então essa coisa chamada itens aplicáveis. E esta é apenas uma matriz que eu adicionei em qualquer um dos elementos que eu estou feliz em ser sugado para dentro do buraco negro. Então isso significa que eu queria que o Rocky continuasse e não fosse sugado para o buraco negro. Então, ao fazer isso, significa que tenho algum controle sobre o que é puxado para dentro. Nós então temos uma pequena função que apenas verifica para ver se o elemento que está sendo animado atualmente como parte dessa lista ou não. E então o que estamos fazendo é criar uma div e acrescentar no DOM com uma classe de buraco negro de lona. E lá embaixo no CSS, você pode ver aqui que nós temos apenas alguns estilos básicos para essa coisa. Tem 50 pixels por 50 pixels de largura. Nós temos este JPEG buraco negro, e nós estamos apenas executando uma animação CSS padrão sobre isso. E você pode ver que isso é, isso é o que nos dá esse tipo de buraco negro girando, meio OK. Então, de volta ao nosso JavaScript, essa coisa é adicionada ao dom. Em seguida, posicionamos o nosso DOM com base nas coordenadas que ou geradas aleatoriamente por esta função. E o menos 25 é só porque o próprio Baco tem 50 pixels de tamanho. Então queremos que o centro disso seja fora disso em ambos os eixos. Agora estamos no bit em que estamos realmente usando a API de Animações. Então lembre-se no vídeo anterior, quando olhamos para pausa e reprodução, usamos este document.write animações, mapa de pontos para loop sobre annette quaisquer animações que estão em execução no momento. Então, primeiro de tudo, eu estou verificando se uma das animações que arruinam isso é parte da lista de coisas. Eu estou feliz em fazer algo com este pequeno, se eles são apenas verificações que, então nós estamos em obter os elementos em si. Então, quando nós loop sobre as animações com que obter Animações API, podemos obter informações fora de lá também. Então eu estou recebendo o elemento de alternância aqui do elemento que está sendo animado. E então, por sua vez, e eu estou fazendo coisas ou obtendo a geometria desse item, eu estou deixando sua posição esquerda, sua posição no topo. E então definindo algumas novas coordenadas, que são as novas coordenadas aleatórias menos a coordenada existente, tal tipo de distância que precisamos mover. E, em seguida, para cada elemento, cada elemento alvo. Então você pode ver de novo, eu estou supondo que essa é a animação. E então eu vou subir e encontrar o alvo. Então I0 o elemento em que a animação está sendo executada. E então eu estou executando uma nova animação que usa eu estou passando nesta janela obter estilo computado Anan elemento transformar. E isso foi basicamente quando olhamos no vídeo anterior sobre a matriz. E no passado, você teria que ler esse valor e tentar determinar o que transforma atualmente sendo aplicado a um elemento. Poderíamos fazer melhor do que isso com esta API porque podemos apenas dizer, Vá e encontre-me este elemento na página e use sua transformação atual dentro do quadro-chave que ele então vai em movimentos. Então você pode ver aqui, a primeira seção deste quadro-chave é basicamente dizer, começar de onde você está no minuto. E então estamos traduzindo o item para suas novas coordenadas e reduzindo-o. Então essas duas partes do quadro-chave que estamos fazendo aqui. Então aqui está o nosso novo quadro chave. Começamos de onde ele está e então estamos traduzindo de lá para algumas novas coordenadas. E onde acabamos com o elemento com uma opacidade de 0. Então é basicamente agarrá-lo, movê-lo para onde ele precisa ir e encolhê-lo para baixo. Então dá o tipo de aparência de ser sugado para um buraco negro, ou pelo menos era isso que eu queria. E essa coisa acontece em um 2.5º e, obviamente, pode ser o que você quisesse que fosse. Então é com isso que estamos lidando, aquela função do buraco negro. Mais uma vez, vamos ver como isso se parece. Agora você teve que explicado para o buraco negro aparece, tudo fica encharcado e a animação CSS continua a correr girando buraco negro. Ok, próximo vídeo, nós vamos apenas cobrir e falar sobre alguns pedacinhos e pedaços que nós realmente não cobrimos em detalhes até agora. Antes de chegarmos ao fim do nosso tempo juntos. 22. Comentar estilos no DOM: Uma última pepita pequena que você pode achar útil quando estiver usando esta API. Há um método chamado estilos de commit. E o que isso permite que você faça é quando uma animação chega ao fim, ela aplica os efeitos dessa animação como estilos embutidos no elemento. Então, vou mostrar-vos o efeito disso. Agora, estamos usando a função buraco negro aqui que vimos no vídeo anterior. E tudo o que eu vou fazer enquanto ele passa sobre cada um dos nossos elementos que são animados. Vou ficar aqui no fundo. Depois que este elemento tem animado, Eu vou dizer animação. Oops, estilos animation.com. E assim cada vez que ele passa sobre uma dessas coisas, o que eu estou esperando para acontecer é que eu vou ver estilos inline o resultado final de todas essas animações. Então vamos guardar isso e dar uma olhada no que acontece aqui. Então vamos pôr as coisas em movimento aqui. E então vamos pressionar o buraco negro. E então vamos dar uma olhada para baixo. E você pode ver aqui que o método de commit styles aplicou o lugar de descanso final, se você quiser, os resultados de tudo o que está acontecendo na animação. Agora, eu não usei muito. O que construímos aqui juntos, mas você pode achar muito útil no que você usaria para construir. Então isso é apenas um breve aviso sobre esse método e para que você poderia usá-lo. 23. Conclusão: Aqui vamos nós, meu amigo. No final. Esperemos que, se você segui-lo ao longo deste curso, agora você terá uma melhor compreensão de como você pode animar as coisas na web com a API JavaScript Web Animations. Basta lembrar, nós passamos de não ter animações em JavaScript para escrever algumas animações simples, aquelas que normalmente faríamos em CSS. Para então um projeto onde temos toda uma série de animações sequenciadas uma após a outra. Nós tocamos em coisas como pegar transformações de um lugar no DOM, movê-las para outro lugar. Aprender a pausar e reproduzir animações, como aconselhá-las, movê-las diretamente para o final. Se você conseguiu acompanhar e construir algo próprio ou mesmo este produto em si. À medida que passamos por esses vídeos, você deve se sentir muito orgulhoso de si mesmo ao experimentar pela primeira vez. Se você se encontrar tropeçando , volte, me dê uma atualização. É como qualquer outra coisa na web. Você só vai ficar bom nisso praticando e usando-o na natureza. Ninguém escolhe esse padrão imediatamente. Este é o primeiro vídeo, é claro, ter feito. Então, seria muito útil ter seus comentários Bom, até ruim. Então, por favor, encontre-me no Twitter no Ben Fayed. Ou você pode me enviar um e-mail para contato em Ben frame.com. E eu adoraria ouvir seus pensamentos. Caso contrário, verei você de novo na próxima vez.