Contents
Animação
O Inkscape não suporta animação nativamente, embora, talvez, um dia, se qualquer programador individual, ou equipe pequena ficar interessada em enfrentar o desafio. (Se você está interessado em programação de recursos de animação para o Inkscape, por favor, comece por se juntar à equipe de desenvolvimento.) Entretanto, há várias maneiras para animar imagens feitas no Inkscape (seja como SVG ou exportado como PNG), que são exploradas nesta página. Só para inspirar você sobre as possibilidades da animação de SVG, você pode querer examinar Um balde cheio de exemplos em SVG, por David Dailey.
Devido ao suporte de navegadores para vários tipos de animação alterar ao longo do tempo, antes de iniciar qualquer projeto de animação destinado à internet, você pode querer fazer uma pesquisa preliminar sobre qual o tipo de animação usar. Aqui é a seção SVG do site Can I Use? (em portugues Eu Posso Usar?), que mantem informações atualizadas sobre o suporte de navegadores para todos os tipos de coisas.
Os modos de animação de imagens feitas com Inkscape enquadram-se em 2 formas gerais:
- usando um programa gráfico que providencia uma interface do usuário, ou
- manualmente escrevendo scripts e marcação, usando um editor de texto ou uma IDE (do inglês Integrated Development Environment ou Ambiente de Desenvolvimento Integrado).
Editor Gráfico / Interface do Usuário
Programas que fornecem uma interface gráfica do usuário incluem extensões do Inkscape, que vêm com o Inkscape, ou podem ser instaladas, bem como programas externos ou autônomos.
Extensões do Inkscape
JessyInk é uma extensão de Inkscape, que, a partir da versão 0.91, vem instalada com o Inkscape. Ele cria um tipo de apresentação de slides de animação para apresentações, para ser visualizado em navegadores da web, por meio da incorporação de JavaScript no arquivo SVG. O wiki contém tutoriais e outras documentações, e há também algumas informações no manual do Inkscape.
Sozi é um aplicativo de apresentação que produz translações, ampliações e rotações para ser visualizado em navegadores da web, por meio da incorporação de JavaScript no arquivo SVG. É editor começou sua vida como uma extensão do Inkscape (que tem de ser instalado). No entanto, para permitir uma mais flexível e fácil de usar interface, Sozi desenvolvedores decidiram torná-lo um programa autônomo. Em algum momento no futuro próximo, a extensão Sozi não funcionará mais com Inkscape, e os usuários precisarão instalar a versão autônoma. (A extensão Sozi ainda funciona no Inkscape versão 0.91, mas que pode ser a última versão do Inkscape que suporta Sozi como uma extensão). Há uma série de tutoriais sobre o uso da extensão em seu site. Como a versão autônoma é muito mais intuitiva de usar, a documentação não-ainda-escritos não deve ser um obstáculo para usá-lo.
XIA pode ser instalado como um programa autônomo ou como uma extensão. Cria imagens interativas HTML5, que consistem de interativas páginas da Web (como para apresentações), que podem ainda conter jogos simples. Interatividade inclui clique do mouse, focalizar e arrastar e soltar. Em seu site pode ser encontrada documentação sob a forma de um arquivo PDF, um vídeo instrutivo e vários arquivos de exemplo, mostrando cada caso de uso do que se pode criar com XIA.
Sites e Serviços da Web
AniGen é um editor de animação SVG gratuito e de código aberto baseado em navegador. O desenvolvimento está focado no Chrome, mas deve funcionar também no Firefox. No início, a interface do usuário é um pouco difícil de usar, mas bons resultados podem ser alcançados com um SVG de origem do Inkscape aberto diretamente para edição.
Programas Autônomos
Ambos os programas (veja acima) também estão disponíveis como versões autônomas. No caso do Sozi, este é destinado como um substituto para a extensão, que já não está mais sendo desenvolvida.
The GIMP é um editor de gráficos 2D, livre e de código aberto, que pode criar, importar e exportar, imagens raster e vetores. (Ele é focado principalmente para gráficos raster, mas tem algumas características mínimas de vetor). Tem uma característica relativamente simples e fácil de usar animações GIF, há pelo menos 3 tutoriais no site deles. Você pode encontrá-los olhando na página de Documentação. Basicamente, imagens desenhadas com Inkscape precisam ser exportadas para PNG, antes delas serem importadas pelo GIMP (dica: no GIMP, use a Importação como camadas). Note que existem MUITOS outros programas que podem criar animações GIF - basta procurar!
Tupi é um programa livre e de código aberto que pode animar ambos os formatos de imagens raster e vetoriais. Sua página de Documentação fornece links para o seu wiki, bem como alguns tutoriais em vídeo.
Synfig Studio é um programa de animação 2D livre e de código aberto, que pode importar e utilizar imagens SVG. A partir da versão 0.91, o Inkscape pode exportar no formato nativo do Synfig, SIF. Há um manual e tutoriais na sua wiki.
enve é uma aplicação de animação 2D relativamente novo e gratuito, com suporte para importação de arquivos SVG e criação de documentos SVG animados.
Blender é uma suite de animação 3D livre e de código aberto, que pode importar imagens SVG. Há tanto manuais como tutoriais na sua página de Suporte.
É um programa gratuito e de código aberto que aproveita os recursos de edição SVG do Inkscape para criar animações. Ele usa animações CSS nos bastidores.
Marcação e Roteirização
Geralmente existem 3 maneiras para animar imagens SVG: SMIL, CSS3 e JavaScript. Ao usar estas diretamente, sem uma interface gráfica do usuário como intermediária, exigirá que você primeiro aprenda o básico sobre a programação ou a linguagem de marcação correspondente. Alguns dos tutoriais abaixo irão ajudá-lo a aprender, mas provavelmente você precisará de outros recursos para aprender (o que está além do escopo desta página). Se você já sabe escrever scripts e/ou código SVG/XML, estes links e dicas vão ajudá-lo a encontrar o que você precisa para fazer suas próprias animações, jogos e apresentações legais.
O manual do Inkscape, wiki e sites externos fornecem juntos uma visão geral:
- Um Botão SVG - SVG e a Web - tutorial para usar todos os 3 tipos de animação, em uma simples imagem SVG - SMIL, CSS3 e JS
- Animação simples - um exemplo usando ECMAscript para animar um objeto SVG
- Um painel de Luz Néon - Animação - uma breve visão geral de animação com imagens do Inkscape (incluindo informação sobre onde encontrar um tutorial completo)
- O Estado de Animação de SVG - uma breve visão geral da animação de imagens SVG
- Do blog de Peter Collingridge - vários tutoriais/exemplos de como usar ECMAscript para animar imagens SVG
- Animação de SVG, por David Dailey - atente-se de que as informações sobre o suporte à navegadores estão desatualizadas, mas a informação de codificação é toda atual
- Gráficos SVG Animados por David White
SMIL
SMIL (Linguagem de Integração de Multimídia Sincronizada do inglês Synchronized Multimedia Integration Language, pronuncia-se em inglês como 'smile'), como o SVG, é um tipo de XML (Extensible Markup Language). Eles podem ser usados juntos para criar apresentações multimídia. Há relativamente poucos tutoriais usando SMIL para animação. A partir de 2015, SMIL ainda não funcionava com as versões mais recentes do IE, mas funciona no Firefox e especialmente bem em navegadores baseados no Chrome. Infelizmente, os desenvolvedores do Google que talvez seja a hora de desativar o recurso. Aqui estão alguns tutoriais e exemplos ao vivo, que você poderá estudar. E se você procurar diligentemente, você provavelmente encontrará mais.
- Um Guia para Animações SVG (SMIL), por Sara Soueidan
- Introdução à Animação SMIL em SVG, por David Dailey *
- Animação de SVG, por Jakob Jenkov
- uma série de exemplos simples de SVG/SMIL ao vivo, por David Dailey *
- outra série de exemplos SVG/SMIL ao vivo, por David Dailey *
- 4 exemplos de animação SMIL em SVG-Whiz!
* Observe que essas páginas são um pouco datadas. No entanto, o código usado nos exemplos ainda é atual e funciona nos navegadores que oferecem suporte a ele.
CSS3
CSS é uma linguagem de marcação, que é usado para estilizar páginas da Web. Para a maior parte, ela cria estilos estáticos. Mas com CSS3, alguns novos recursos foram adicionados, que pode ser usado para criar animações que variam de simples a muito complexas. Há absolutamente uma infinidade de tutoriais sobre animação de CSS3, através da internet! Aqui estão apenas algumas, e você facilmente encontrar mais pesquisando, se estes não forem do seu gosto.
- Introdução às Animações em CSS por Chris Coyier de CSS-Tricks (aprox. 30 min de vídeo)
- Também no siteCSS-Tricks, há muito mais artigos, vídeos e trechos, que você pode usar para aprender mais sobre isso.
- SVG e CSS por Jakob Jenkov
- Usando Animações CSS por MDN (Mozilla Development Network)
JavaScript
JavaScript / ECMAScript é uma linguagem de programação que é usada principalmente para melhorar a experiência do usuário em sites. Em contraste com CSS3, ele pode animar todos os aspectos de SVG (também caminhos) e fornece uma maior flexibilidade dentre todas as três opções de animação. Ao mesmo tempo, é provavelmente a opção mais difícil de aprender, pois exige o aprendizado de uma linguagem de programação real.
- Snap.svg é uma biblioteca em JavaScript livre e de código aberto que fornece uma API para trabalhar com SVG, incluindo, mas não limitado a, animações. Há muita documentação, bem como demonstrações disponíveis.
- Aaron Nieze, do Go Inkscape! tem escrito alguns tutoriais para o uso de Snap.svg com Inkscape.
- D3.js é uma biblioteca para visualização de dados, usando SVG animado para isso. Na sua galeria há algumas demonstrações espetaculares de exemplo!
- Muitas outras bibliotecas JavaScript estão disponíveis para animar gráficos svg! Os exemplos incluem svg.js, velocity.js ou Raphaël.
