Tenho algumas ilustrações feitas no Illustrator e pretendo animá-las para um site em que estou trabalhando. Ouvi falar do kit de ferramentas Create.js com flash, mas é o melhor caminho a seguir ou existe outro " melhor "maneira de fazer isso?
Aqui está um exemplo do tipo de animação que eu pretendo: http://kontramax.com/wp-content/uploads/envato/demo/coming_soon_machine/dark/
Respostas:
Existem várias maneiras de animar as coisas na web. Existem ainda mais maneiras de criar animações e exportar para animações da web.
Há enormes benefícios em projetar animações em algo como AfterEffects ou Animate CC (que podem importar arquivos do Illustrator e do Photoshop) pelas razões óbvias de divisão do trabalho e uso de um editor gráfico.
Com isso dito, você deve sempre, no final, compilar com um dos seguintes :
Recursos limitados de interação:
Mais totalmente interativo:
Agora, vou entrar em cada um com mais detalhes.
Um GIF é um bom caminho a percorrer quando as animações não exigem muita interação, não precisam ser dimensionadas dinamicamente e são relativamente pequenas. GIFs bem feitos podem ser tão detalhados quanto a ilustração que você vinculou sem preocupações com o desempenho. Mesmo uma interação menor usando uma sobreposição transparente colocada sobre ela (ou apenas uma parte dela) é possível.
Nota lateral: agora existe um .gifvformato criado pelo Imgur que converte arquivos GIF dinamicamente nos formatos de vídeo WebM ou MP4. Isso aumenta o desempenho, reduzindo muito o tamanho do arquivo final. Você pode considerar fazer o mesmo.
Outra maneira de manter uma animação suave, mas altamente estilizada, é usar um sprite. O Google usa essa abordagem para coisas como animação de logotipo . Outro ótimo exemplo é o antigo site de Alexander Engzell, que exibia uma animação tipográfica doentia usando essa abordagem. É ideal quando um GIF seria muito grande, mas você não precisa de muita interação.
Também vi uma animação JavaScript muito interessante que lembra um sprite ou GIF usado pelo Google (passe a imagem do Chrome no canto superior esquerdo - requer estar no Chrome), mas usa uma máscara animada. Suponho que eles usaram essa abordagem para limitar o tamanho total do arquivo.
Ganhamos excelentes recursos em relação a vídeos nos últimos anos. O <video>elemento nos permite personalizar a maneira como interagimos e usar vídeos como nunca antes. Agora podemos usar vídeos em segundo plano em tela cheia facilmente e fazer coisas como ir quadro a quadro na rolagem . Também notei que o FaceBook usa vídeo para algumas animações simples ao receber usuários em seus feeds em eventos especiais. Os benefícios são que ele pode ser compactado em um tamanho de arquivo bem pequeno e pode fazer uma variedade mais ampla de animações (qualquer coisa que o software de edição de vídeo possa fazer). Dessa forma, se alguém pode fazer um vídeo doente, é bastante fácil transformar isso em uma adição fantástica a uma página da web.
Obviamente, os vídeos não são bons para a maioria das animações na Web (por exemplo, transições de botões etc.), portanto, não os use em todos os lugares.
Com tudo isso dito, se você deseja que a animação seja gerada dinamicamente, quando precisa de mais do que realmente uma interação básica, quando deseja criar ambientes 3D e, em muitos outros casos, um GIF, sprite ou vídeo simplesmente não corte Isso. Uma vez decidido, existem várias outras opções, das quais a melhor depende de sua animação e necessidades.
Não tenho estatísticas, mas a maioria das animações da web que eu vi usam o Canvas . O Canvas é ótimo de usar devido ao seu desempenho e flexibilidade na criação. Ele usa apenas um elemento do navegador (DOM) devido ao fato de apenas pintar - como em uma tela real - as coisas umas sobre as outras. Ao acompanhar o que é pintado e onde o JavaScript é possível, podemos criar animações e até jogos bastante impressionantes.
No entanto, a principal desvantagem do uso do Canvas é sua relativa dificuldade de escalar. Muitas vezes, dependendo da animação, é claro, é mais difícil criar uma animação responsiva do Canvas do que usar outros meios. Outra desvantagem é que ter muito conteúdo em um Canvas não é muito favorável ao SEO, porque os elementos do canvas não podem ser rastreados (você pode contornar isso colocando algum HTML visualmente oculto do conteúdo, se aplicável). Na mesma nota, coisas como seleção de texto para usuários são difíceis com o Canvas (especialmente sem o uso de uma biblioteca como o CreateJS).
Um uso primordial do Canvas são os doodles do Google , que geralmente são feitos no Canvas. Quando eles têm um jogo ou animação interativa, eles usam o Canvas toda vez que eu olho. Se não houver interação, eles usarão um GIF ou sprite.
Existem muitas ótimas bibliotecas para ajudar a trabalhar com o Canvas com mais facilidade, embora definitivamente não seja necessário, dependendo do que precisa ser feito. Entre os criados apenas para o Canvas, estão o CreateJS (para o qual você pode exportar do Animate CC), Pixi.js , PaperJS , KineticJS e FabricJS (colocados na ordem em que eles são impressos). Um plug-in do After Effects chamado Lottie (anteriormente BodyMovin) também pode exportar para o Canvas (ou SVG [1] ) e possui um mecanismo de animação incorporado.
Obviamente, você também pode emparelhar bibliotecas de animações maiores, como GSAP e Canvas, com facilidade. Para algo tão detalhado quanto a ilustração que você vinculou, recomendo o uso de algum tipo de estrutura, mas para muitas coisas elas não são realmente necessárias, apenas úteis - especialmente se você já sabe como usar uma delas.
Outra maneira incrivelmente poderosa de animar as coisas na Web de uma maneira facilmente responsiva é usar um SVG ( Scalable Vector Graphics ). Eles cumprem seu propósito - sendo vetores escalonáveis - também. Muitos acham que o uso de SVGs é confuso no começo, mas a maioria das coisas, como o sistema de coordenadas e as transformações do SVG, tem ótimos artigos para explicá-los.
Uma das muitas coisas adoráveis sobre o SVG é que ele pode ser animado com JavaScript, CSS puro (incluindo :hoverestados, transforms transitione animationes) ou animações SMIL (a maneira "nativa" de animar as coisas com o SVG - mas o IE não faz ' não o apoie e está sendo gradualmente depreciado ). Eu recomendo tentar usar o CSS primeiro e depois o JavaScript sempre que não for (relativamente) simples no CSS. Para transformar elementos SVG, é praticamente necessário usar uma ferramenta como o plug-in MorphSVG do GSAP, a menos que você esteja bem com apenas suporte parcial; nesse caso, o SMIL pode ser aceitável.
Como os elementos SVG podem ter qualquer forma, eles podem ser usados para criar alguns efeitos interessantes . Sarah Drasner fez alguns benchmarks úteis de desempenho em relação às animações SVG que mostram quais maneiras de animar o SVG são melhor em termos de desempenho.
Dependendo da animação (e da necessidade de suporte do navegador), uma biblioteca como Snap.svg ou GSAP pode ser útil, mas geralmente usa CSS e, se necessário, um pouco de JS personalizado é tudo o que é necessário. Com isso dito, um plug-in do After Effects chamado Lottie (anteriormente BodyMovin) e uma extensão do Flash chamada Flash 2 SVG podem ser realmente úteis para criar animações SVG.
Para mais detalhes, dê uma olhada nesta postagem relacionada especificamente sobre a animação de elementos SVG.
PS É melhor usar SVGs em uma <object>tag ou incorporado diretamente em um <svg>elemento XML, se for interativo e como imagem de fundo, se não for interativo, mas também há outras maneiras de fazê-lo.
Na minha experiência, as animações e transições CSS devem ser usadas principalmente para elementos da interface do usuário e outras transições e animações básicas. Mesmo assim, às vezes é apropriado usar uma biblioteca de animação JS como GSAP ou Velocity.js para animações / transições de interface do usuário. Realmente depende do tipo de comportamento que você deseja e se é conveniente ou não fazer em CSS.
Embora possamos criar coisas malucas com CSS puro, geralmente é mais difícil criar ilustrações complexas como a que você fornece como exemplo usando CSS, mesmo ao manipular imagens. Animações CSS complexas costumam ser mais difíceis de manter do que suas contrapartes em JavaScript. A outra desvantagem é que as animações CSS são difíceis de mudar com JavaScript e não são muito boas quando combinadas com JavaScript.
Com isso dito, interações simples usando transições e animações geralmente devem usar CSS; você deve usar como padrão. Para começar a aprender a animar usando CSS, confira minha introdução à animação na web .
Você também pode encontrar animações úteis e funções de facilitação em bibliotecas como o Animate.css, que você pode extrair e adicionar aos seus próprios projetos. Você quase nunca precisará da biblioteca inteira, pegue apenas as partes que desejar.
As animações JavaScript baseadas em DOM são bastante simples. Eles têm um péssimo representante por causa de bibliotecas terríveis de animação como o jQuery animate(), mas podem ter desempenho particularmente alto, especialmente ao usar a API de animações da web (discutida abaixo) ou uma biblioteca de animação especializada como GSAP , Velocity.js ou mo.js ( O GSAP ainda possui um plugin especial para substituir o jQuery .animateespecificamente). Usando essa biblioteca, eles geralmente superam outros tipos de animações para animações mais intensas, como animar muitos elementos.
A principal razão pela qual você precisaria usar uma animação baseada em DOM é se você tiver muita animação do usuário ou linhas do tempo complexas envolvendo elementos DOM já criados. Muitas vezes, é melhor tentar usar algo como Canvas sobre o DOM por motivos já especificados.
Bibliotecas como o GSAP permitem fazer coisas malucas, como retardar uma animação ao passar o mouse , acompanhando as matrizes de animação. Dessa forma, as animações baseadas em DOM podem ser mais personalizadas e interativas do que qualquer outra forma de animação, quando bem executadas. A única desvantagem é que, às vezes, dependendo de como é construído e do que precisa ser feito, ele não apresenta bom desempenho.
O WebGL é uma maneira de criar principalmente trabalhos em 3D. Tem alguns projetos incríveis que você deve conferir. Não é para ser usado em todas as páginas da web, obviamente, mas é importante mencionar.
Na verdade, ele anima elementos DOM para criar ambientes 3D (e 2D), o que é incrível por causa do potencial que possui. Ao usar uma biblioteca, o WebGL volta a usar o Canvas, mas ainda não possui grande suporte no celular e pode ter um desempenho pesado. Geralmente fica bem claro quando você precisa usar o WebGL ou não.
Pela minha experiência, o uso de uma biblioteca WebGL é praticamente necessário. Felizmente, existem alguns bons. O ThreeJS é de longe o mais comum que eu já vi, seguido pelo PixiJS . Uma estrutura WebGL como o A-Frame também pode facilitar a escolha e a criação de itens básicos.
A API de animações da web é uma tentativa de padronizar como as animações são implementadas e mantidas nos navegadores combinados com melhorias de desempenho. Ele deve ser usado com elementos DOM, incluindo SVG. Assemelha-se à forma como as animações CSS são estruturadas (no formato JS), mas adiciona recursos como uma linha do tempo e um desempenho aprimorado.
Ele melhora o desempenho colocando animações no segmento do compositor (para obter mais detalhes, confira este ótimo post sobre o assunto). Para uma introdução de como usá-lo, consulte os documentos do Mozilla ou esta publicação introdutória .
Você pode perguntar: " Isso substituirá as bibliotecas de animação JavaScript? " A resposta é " Esperemos que alguns ". É benéfico para todos os mecanismos de animação do navegador nativo melhorarem e, como fazem, algumas bibliotecas de animação menos poderosas se tornarão inúteis. Com isso dito, as bibliotecas de animações mais poderosas ainda terão benefícios adicionais, como os observados pelo GSAP . Se você precisa ou não de uma biblioteca, uma vez que o WAAPI é amplamente suportado, ainda é determinado pelas suas necessidades.
Atualmente, a WAAPI não possui um bom suporte, mas pode ser usada com um polyfill em produção atualmente. Parece que continuará a melhorar e a obter mais suporte.
Evite usar propriedades de alto desempenho ou causar refluxos / repinturas .
Evite animar um monte de elementos na página, pois eles são mais intensos e também podem ser difíceis de mudar posteriormente.
Ao usar CSS, use transitionuma animação excedente sempre que possível (dentro do motivo). Eles têm melhor desempenho e geralmente são mais fáceis de trabalhar.
Use a will-changepropriedade de maneira inteligente em elementos grandes que você irá animar para que o navegador saiba com antecedência. Para mais detalhes e sugestões, leia algo como este artigo do SitePoint sobre o assunto.
Evite setIntervale opte por requestAnimationFrameexecutar horários em JavaScript (boas bibliotecas de animação como o GSAP fazem isso por você se você usar as linhas do tempo).
Quando você puder, use a API de animações da Web, pois ela não possui recursos para animação com outros métodos em JavaScript.
Você nunca deve executar o Flash no produto final . As animações JavaScript têm melhor desempenho, são mais dinâmicas, são editadas com mais facilidade, não exigem downloads, funcionam em mais plataformas (o Flash não funciona na maioria dos tablets / telefones) e são mais responsivas que as antigas e volumosas do Flash. Eles também não são muito acessíveis e não são amigáveis ao SEO.
Dito isso, o Animate CC (uma nova marca do Flash) é uma maneira útil de criar animações e pode exportar para o Canvas usando o Create.js .
Geralmente, existem vários métodos que você pode usar para criar uma animação. O melhor depende do que você deseja fazer e, às vezes, não existe um método melhor e claro. Muitas vezes, me vejo usando vários no mesmo projeto. O importante é pensar criticamente , entender exatamente como você deseja que a animação se comporte e decidir o método com base nisso. Também ajuda se você trabalhou um pouco em cada um.
[1] - Lottie também pode exportar para Android nativo, iOS e React Native .
Na minha experiência, ao fazer animações estáticas (animações que não se destinam a nenhuma interação com o usuário), descobri que o que funcionou melhor para mim foi animar as ilustrações no After Effects e depois exportar o resultado final para um arquivo .GIF. Isso torna a animação absolutamente amigável ao navegador e garante uma visualização idêntica em qualquer dispositivo.
Se, no entanto, você estiver procurando por algo com o qual um usuário possa interagir, acredito que o Canvas é realmente o caminho a percorrer, e para isso o CreateJS parece adequado para o trabalho na biblioteca EaseJS.
De qualquer forma, de acordo com o seu exemplo, você também pode fazê-lo com um arquivo GIF animado e obter exatamente o mesmo resultado.
Se você trabalha com o After Effects, pode usar o plug-in Bodymovin . Torna seu trabalho para uso móvel e na web. Você terá os arquivos .json e lottie.js que podem ser usados no seu HTML. Mas primeiro você terá que desativar a opção Permitir que scripts escrevam arquivos e acessar a Rede nas configurações gerais. Quando você terminar, vá para Window , Extensions e encontre Bodymovin . Selecione sua composição, defina o local para salvar e clique em renderizar. Coloque seus arquivos .json e lottie.js no seu HTML e seu trabalho estará concluído. Eu acho que o GIF não é a melhor solução porque precisa de mais tempo para carregar.
Você pode baixá-lo aqui: http://aescripts.com/bodymovin Basta adicionar seu preço ou, se você quiser de graça, pode colocar $ 0,00 ...
Aqui está o tutorial para usar um Bodymovin e definir sua animação em seu site com o Visual Studio: youtube.com/watch?v=YmPsCD5jRDw&t=282s
Se você conhece os conceitos básicos de HTML e CSS, deve ser fácil para você. Esse tutorial me ajudou, espero que isso possa ajudá-lo.