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

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

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

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.

Programas Autônomos

Xia e Sozi

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

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

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. Também confira a página de Demontrações.

Synfig Studio

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.

Blender

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.

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:

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.

* 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.

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.