Exportar animações de efeitos para HTML5

Animação na web está aqui para ficar. É em tudo, desde os movimentos sutis que ajudam a trazer nossos Projeto Ui. Para a vida, para experiências de lona totalmente animadas e experimentos webgl que são desafiadores o que uma vez que pensamos que era possível no navegador.

Embora a criatividade de devs e as capacidades dos navegadores estejam aumentando, a animação na Web há muito tempo tem sido uma má relação com o vídeo - algo que a comunidade de ilustrações em movimento se aproximou com cautela por anos. Lembre-se que se você tem um site complexo para manter, seu hospedagem na web. O serviço precisa estar no ponto.

• Os profissionais guia para o design da UI

Os desenvolvedores confiaram em bibliotecas como Greensock e Snap.SVG para fazer o levantamento pesado na reprodução de animação através do JavaScript. Enquanto essas ferramentas deram muita flexibilidade, elas não podem se comparar com a precisão e sutileza de animação que podem ser alcançadas usando After Effects Cc. Timeline próprio e facilitando gráficos. De uma perspectiva da Web, depois que os efeitos são muito adequados para ajustar e experimentar o movimento antes de cometê-lo ao código.

Digitar Bodymovin. , uma extensão inovadora para a Adobe After Effects que exporta a animação diretamente de efeitos após o JavaScript a serem mostradas e manipuladas no navegador. Criado por Hernan torrisi. , BodyMovin remove muitas das barreiras entre animador e desenvolvedor. Em seu nível básico, o plugin atua como o recurso mágico 'Render for Web' adobe esqueceu. No seu mais avançado, abre novas possibilidades para animação interativa.

O BodyMovin é um link na cadeia de ferramentas, plugins e sistemas que aumentam para atender a algumas dessas novas possibilidades. Lottie do Airbnb. e Keyframes do Facebook Ambos constroem nessas fundações - e estão finalmente trazendo a ferramenta de animação mais poderosa para a web.

Por que usar o BodyMovin?

O SVG assumiu a Internet e trouxe com a expectativa de que tudo deve ser de alta qualidade, leve e escalável. O BodyMovin torna tudo em sua composição para o SVG lindamente crocante que mantém sua qualidade de vetor em qualquer tamanho. Não mais comprometendo a iluminar esse GIF ou forçando seus usuários a carregar arquivos de vídeo inchados.

Além de simplificar o processo de exportação de suas animações, a BodyMovin abre caminho mais potencial para os desenvolvedores obterem criativos com novas experiências interativas. Confira Codepen por algumas das formas fantásticas que a extensão foi usada - de plataformas IK interativas para animar texto interativo.

Para simplificar ainda mais o seu processo de Dev, tente um Construtor de sites .

A animação exportada pode ser manipulada no navegador como qualquer outro elemento, permitindo-nos pensar em animação como uma ferramenta interativa e experimental no design da Web. E agora por causa do bodymovin, trazer suas animações para a web nunca foi tão fácil. Neste tutorial, você aprenderá como exportar uma animação de efeitos após e criar uma animação de loop simples que responda ao clique do usuário.

Como preparar seus arquivos After Effects

O suporte para os recursos de efeitos após melhoria e você pode esperar obter bons resultados para fora da caixa. Dito isto, sua fantasia Flying 3D camadas não jogará bom, então esteja ciente dos limites antes de começar. Antes de começar um projeto, faça o download sempre da versão mais recente do BodyMovin e marque a página Github para ver quais recursos são suportados no momento.

Não seja muito apressado para se mover para a parte divertida ... Arquivos Tidy fazem uma mente arrumada. Neste caso, eles também ajudarão a tirar alguns dos trabalhos extras para longe do navegador e dar-lhe uma reprodução suave sedosa. Em primeiro lugar, você vai querer ter certeza de que seu conteúdo está em camadas de forma depois de efeitos para poder de vetor total. Para converter qualquer arquivo de ilustrador para moldar camadas, você pode simplesmente clicar com o botão direito do mouse e escolher criar formas de camada de vetor. Quaisquer camadas que não são formas nesta fase serão então convertidas em imagens e elas não serão renderizadas como vetores.

Em seguida, verifique as suas camadas e sublayers; Há uma boa chance de você pode simplificar o conteúdo da forma sem sacrificar nada. Tente reduzir o número de grupos, caminhos e preencher apenas o essencial.

Tome cuidado com máscaras

As máscaras são uma maneira fácil de escorregar nesta fase. Esteja ciente de que as máscaras alfa funcionarão com o renderizador SVG, mas não aparecerão, caso você opte por mudar para a tela. As máscaras podem ser caras no desempenho, então use-as eficientemente.

Renderização

BodyMovin funciona em duas partes - uma extensão de efeitos após a conversão de dados de animação para um arquivo JSON e um player BodyMovIN.js para incluir em sua página da Web que pode interpretar este arquivo e torná-lo no navegador.

Acho que seus arquivos são bons para ir? Abra a extensão do BodyMovin pela janela & GT; Extensões e depois bodymovin.

Depois de atingir a atualização, você verá uma lista de todas as composições neste projeto After Effects. Selecione seu Comp Chosen e escolha uma pasta de destino dentro do seu projeto da Web. Quando você está feliz, basta clicar em Render e assistir a mágica acontecer. Quando terminar, você receberá uma mensagem "acabada". Parabéns! Você acabou de exportar um arquivo JSON com todas as informações que o jogador precisa recriar a animação.

Para testar sua animação recém-exportada, clique em Visualizar e GT; Atual renderiza e lembre-se de esfregar através da linha do tempo, pois você pode identificar algo que parece um pouco diferente do que você esperaria. Se você localizar qualquer problema pular de volta e verificar suas camadas - pode ser um recurso não suportado ou uma expressão usada em efeitos após.

Alguns plugins de efeitos, como o Rubberhose agora suportam bodymovin. A Rubberhose faz uso de camadas de guia e camadas ocultas. Para ativá-los, basta clicar nas configurações envolvidas ao lado de sua composição escolhida e marque os recursos necessários.

Se tudo parece ser bom, há apenas mais uma coisa que você precisa fazer antes de sair depois de efeitos para trás. Nesta fase, você deve ter um arquivo de dados fresco.json descrevendo sua animação, mas nenhum jogador bodymovin para interpretá-lo. Na extensão, clique no botão 'Obter o jogador' no canto superior direito e salve-o com o seu arquivo JSON.

Carregue a animação

Agora você tem tudo o que precisa, vamos pular diretamente para o código e estabelecer o básico para obter sua animação mostrando na página.

Primeiro faça um novo contêiner #anim_container. para manter sua animação. Você também precisa incluir o bodymovin.js. arquivo antes da etiqueta do corpo de fechamento. Em seguida, conte o bodymovin tudo sobre sua animação e carregue-o no novo contêiner.

Vamos andar pela configuração passo a passo:

 Var contêiner = document.getelementbyid ('anim_container');
// configurar nossa animação

var animdata = {
Recipiente: Recipiente,
renderer: 'svg',
Autoplay: Verdadeiro,
loop: verdadeiro,
Caminho: 'data.json'
};
var anim anim = bodymovin.loadAnimation (animdata); 

Você precisa definir todos os parâmetros para a animação. Diga à bodymovin o contêiner que você quer que a animação seja carregada e, em seguida, diga-a para renderizar a animação como elementos SVG. Em seguida, conte a animação para jogar assim que for carregada e que você quer que ele volte para o início quando terminar.

A propriedade Path informa ao Player BodyMovin onde encontrar o arquivo de dados JSON para a animação. Devido à política de compartilhamento de recursos de origem cruzada (CORS), a técnica que você usará para acessar o arquivo JSON funcionará apenas se você estiver em um servidor ou servidor local. Para funcionar localmente, você pode tornar esse data.json em um arquivo JavaScript que atribui o objeto a uma variável. Nesse caso, sua configuração pode ficar assim:

& lt; script src = "js / data.js" & gt; & lt; / script & gt;
& lt; script & gt;
var contêiner = document.getelementbyid ('anim_container');
// configurar nossa animação
var animdata = {
Recipiente: Recipiente,
renderer: 'svg',
Autoplay: Verdadeiro,
loop: verdadeiro,
AnimationData: Data.
};
var anim anim = bodymovin.loadAnimation (animdata);
& lt; / script & gt; 

Atualize a página e sua animação deve estar jogando dentro do contêiner. Selecione com suas ferramentas dev e você verá que cada elemento na animação está agora contido em & lt; g & gt; tags e está sendo transformado em tempo real.

Parece incrível, certo? Agora você deve ter uma animação linda e crocante mostrando no navegador (sem uma tag de vídeo infeliz à vista ...). A animação sempre será escalada para caber seu contêiner, então vá em frente e explodi-lo!

O BodyMovin tem uma gama de métodos poderosos para controlar a animação depois de ser carregado. Chamando um método como anim.pause () ou anim.setdirection () permitirá que você manipule a reprodução de maneiras diferentes. Vamos olhar para alguns exemplos:

• anim.setDirection (-1) vai jogar a animação no sentido inverso
• anim.pause () e anim.play () vai começar e parar a animação
• anim.setspeed (0,5) vai jogar a animação na meia velocidade

Adicionar interação

Nesta próxima etapa, você explorará algumas das diferentes maneiras de adicionar interação às suas animações através do JavaScript. Neste exemplo, exportamos uma animação After Effects com duas seções: seção A e seção B. seção A usa quadros de um a 20 (triângulo está segurando sua pauta Pogo) A seção B usa quadros de 20 a 40 (triângulo está pulando para cima e para baixo em um papo de pogo).

Agora, você deseja jogar a seção A em um loop, em seguida (somente após o usuário clicar) reproduzir e loop seção B. Você pode fazer uso da propriedade PlaySegments para dividir animações dessa maneira. Este método levará dois argumentos - uma matriz com valores iniciais e finais e um segundo booleano - IsFrame. Configurar isso para True dirá a animação para ler os valores de início e fim como quadros, enquanto false dizer para ler esses valores conforme o tempo.

 anim.pause ();
anim.playsegments ([0,20], true); 

Adicionando isso diz à BodyMovin para fazer uma pausa no primeiro quadro e reproduza apenas a animação de 0 a 20 quadros. Ao configurar sua animação com um Loop: True. Propriedade Isso continuará a jogar a seção A de novo e de novo.

Vamos configurar o exemplo todo. Você estará usando dois segmentos de uma animação para este exemplo, para que você crie duas funções:

 Var contêiner = document.getelementbyid ('anim_container');
// configurar nossa animação
var animdata = {
Recipiente: Recipiente,
renderer: 'svg',
AutoPlay: Falso,
loop: verdadeiro,
Caminho: 'data.json'
};
var anim anim = bodymovin.loadAnimation (animdata);
// Quando a animação é carregada, execute nossa função Firstloop
anim.addeventlistener ('Domloaded', Firstloop);
// Crie nossas funções de reprodução
função firstloop () {
anim.playsegments ([0,20], true);
};
função secondloop () {
anim.playsegments ([20,40], true);
};
// Ouça um evento de clique
contêiner.addeventlistener ('clique', função (evento) {
anim.addeventlistener ('loopcomplete', secondloop);
}); 

Maneira de ir! Agora sua animação continuará em loop até que o usuário clique nele, então ele iniciará o segundo loop. O único problema agora é que um salto como este é muito abrupto e pode arruinar a suavidade da animação.

Uma situação ideal é incluir uma terceira seção para a animação, uma que transita de segurar o paulo para pular nele. Agora sua estrutura vai parecer algo assim:

• firstloop. - Quadro 0 a 20
• transição - Quadro de 20 a 30
• Secondloop - Quadro 30 a 50

Queremos que sua animação permaneça no primeiro loop até que seja clicado. Nesse ponto, você vai querer esperar pelo final do loop que você está atualmente e se move para a transição. Após a transição terminar para o seu segundo loop. Isso parece complicado, mas fica comigo! Aqui está o seu código na íntegra:

 Var contêiner = document.getelementbyid ('anim_container');
// configurar nossa animação
var animdata = {
Recipiente: Recipiente,
renderer: 'svg',
AutoPlay: Falso,
loop: verdadeiro,
Caminho: 'data.json'
};
var anim anim = bodymovin.loadAnimation (animdata);
// Quando a animação é carregada, execute nossa função Firstloop
anim.addeventlistener ('Domloaded', Firstloop);
// Crie nossas funções de reprodução
função firstloop () {
anim.playsegments ([0,20], verdade);
};
Transição de funções () {
anim.playsegments ([20,30], true);
anim.removeeventlistener ('loopcomplete');
anim.addeventlistener ('loopcomplete', secondloop);
};
função secondloop () {
anim.playsegments ([30.100], true);
anim.removeeventlistener ('loopcomplete');
};
// Ouça um evento de clique
contêiner.addeventlistener ('clique', função (evento) {
anim.addeventlistener ('loopcomplete', transição);
}); 

No clique, você está usando um loopComplete ouvinte para aguardar até chegar ao último quadro do loop, em seguida, execute o seu transição() função. Aqui você remove o último ouvinte, toca o próximo conjunto de quadros e faça o mesmo novamente. Depois que a transição é concluída, ela ligará Secondloop () .

É isso!

Você trabalhou com algumas das características da BodyMovin hoje, mas se você estiver interessado em aprender mais sobre o plugin, você pode encontrar uma carga de informação sobre o Bodymovin github página. Para mais exemplos, confira a coleção sempre impressionante do Cdepen BodyMovin.

Espero que este tutorial tenha lhe dado uma ideia dos diferentes tipos de maneiras que você pode combinar o uso de efeitos após e bodymovin para produzir alguma animação supercool para a web!

Agora você pode configurar animação para ser exportada para a Web, trazer seus arquivos exportados no navegador e tornar sua animação responsiva para clicar. Pense além dos arquivos MP4 que você estava anteriormente utilizando e procure BodyMovin para criar muitas experiências da Web mais ricas no futuro.

Ser capaz de envolver os animadores de perto no processo de desenvolvimento está se tornando cada vez mais importante, e o campo da animação da Web está se movendo incrivelmente rápido. Com uma crescente coleção de novas extensões, plugins e estruturas, animadores e desenvolvedores podem esperar que esse processo seja mais fácil e melhor ao longo do tempo. Eu não posso esperar para ver o que o futuro detém.

Tem muitos arquivos para fazer backup? Confira nossa armazenamento na núvem escolhe.

Este artigo originalmente apareceu em Revista Net. em 2017. Inscreva-se aqui .

Consulte Mais informação:

• Criar e animar polígonos svg
• 14 Adobe incrível Plugins After Effects.
• Criar storyboards para animações da web