PRINCÍPIOS DA ANIMAÇÃO 2D - apostila

Prévia do material em texto

W
BA
08
74
_V
1.
0
PRINCÍPIOS DA ANIMAÇÃO 2D
2
Felipe Orsini Martinelli
Londrina 
Editora e Distribuidora Educacional S.A. 
2021
PRINCÍPIOS DA ANIMAÇÃO 2D
1ª edição
3
2021
Editora e Distribuidora Educacional S.A.
Avenida Paris, 675 – Parque Residencial João Piza
CEP: 86041-100 — Londrina — PR
e-mail: editora.educacional@kroton.com.br
Homepage: http://www.kroton.com.br/
Presidente
Rodrigo Galindo
Vice-Presidente de Pós-Graduação e Educação Continuada
Paulo de Tarso Pires de Moraes
Conselho Acadêmico
Carlos Roberto Pagani Junior
Camila Braga de Oliveira Higa
Carolina Yaly
Giani Vendramel de Oliveira
Gislaine Denisale Ferreira
Henrique Salustiano Silva
Mariana Gerardi Mello
Nirse Ruscheinsky Breternitz
Priscila Pereira Silva
Tayra Carolina Nascimento Aleixo
Coordenador
Henrique Salustiano Silva
Revisor
Luís Gustavo Luz
Editorial
Alessandra Cristina Fahl
Beatriz Meloni Montefusco
Gilvânia Honório dos Santos
Mariana de Campos Barroso
Paola Andressa Machado Leal
Dados Internacionais de Catalogação na Publicação (CIP)
__________________________________________________________________________________________ 
Martinelli, Felipe Orsini
M385p Princípios da animação 2D / Felipe Orsini Martinelli, – 
 Londrina: Editora e Distribuidora Educacional S.A., 2021.
 44 p.
 ISBN 978-65-5903-108-5
1.Animação. 2. Desenho. 3. Movimentação. I. Título.
 
CDD 741.58 
____________________________________________________________________________________________
Evelyn Moraes – CRB 010289/O
© 2021 por Editora e Distribuidora Educacional S.A.
Todos os direitos reservados. Nenhuma parte desta publicação poderá ser 
reproduzida ou transmitida de qualquer modo ou por qualquer outro meio, 
eletrônico ou mecânico, incluindo fotocópia, gravação ou qualquer outro tipo de 
sistema de armazenamento e transmissão de informação, sem prévia autorização, 
por escrito, da Editora e Distribuidora Educacional S.A.
4
SUMÁRIO
Evolução histórica e técnica da animação ____________________ 05
Técnica de desenho frame a frame ___________________________ 22
Os 12 Princípios da Animação _______________________________ 37
Animação com keyframes ____________________________________ 51
PRINCÍPIOS DA ANIMAÇÃO 2D
5
Evolução histórica e técnica da 
animação
Autoria: Felipe Orsini Martinelli
Leitura crítica: Luís Gustavo Luz
Objetivos
• Compreender a evolução histórica e técnica da 
animação.
• Analisar e diferenciar técnicas conforme a 
construção narrativa em um projeto.
• Assimilar as influências da animação clássica nas 
técnicas de animação digital.
6
1. Introdução
Quando se fala em animação, está em discussão uma arte que, embora 
tenha sua própria linguagem, conversa com vários meios expressivos 
das mais diversas maneiras. A animação lida com a televisão, o cinema, 
a internet, os jogos, além de softwares e aplicações que trabalham com 
uma interface. Porém, para que se possa compreender o que é de fato 
a animação, algumas considerações precisam ser feitas. Em primeiro 
lugar, é importante destacar que uma definição para a área é complexa 
de ser elaborada. No entanto, apesar disso, é fundamental pensar que 
as animações lidam com técnicas variadas para trabalhar com a ilusão 
de movimento (CHONG, 2011, p. 8).
Para quem quer trabalhar com animação digital, é fundamental 
compreender os processos que vieram antes das técnicas 
computacionais. Assim, torna-se importante conhecer os aspectos 
históricos, técnicos e artísticos que permeiam a área, considerando 
que tem suas raízes na animação tradicional (CHONG, 2011, p. 15), 
especialmente no início do cinema, além das descobertas vindas dos 
brinquedos ópticos. Em outras palavras, as técnicas tradicionais tiveram 
grande influência no meio digital.
Em relação a seus laços com o meio cinematográfico, conforme aponta 
Barbosa Júnior (2005), pode-se dizer que o cinema trouxe à fotografia 
um novo estado de arte, colocando-a em movimento. No entanto, 
ainda estava fortemente ligado à realidade, à captação da imagem no 
mundo. Novas possibilidades surgiram com a junção do cinema com o 
desenho e a pintura, ultrapassando essa limitação, por meio do cinema 
de animação (BARBOSA JÚNIOR, 2005, p. 18). Tudo isso tem início com 
a descoberta da chamada ilusão de movimento, que será abordada a 
seguir.
7
2. A Ilusão de Movimento
A animação é resultado de vários acontecimentos históricos no 
desenvolvimento de técnicas tanto científicas quanto artísticas. Ela 
parte de uma necessidade que o ser humano sempre teve de registrar 
acontecimentos, havendo, inclusive, evidências de que ele pensava 
na captação de movimento em pinturas pré-históricas, que contavam 
com animais com mais patas do que realmente possuíam (BARBOSA 
JÚNIOR, 2005, p. 29). Outras teorias apontam no Egito Antigo, em torno 
de 1600 a.C., um trabalho do faraó Ramsés II, que fez uma sequência 
de 110 colunas, cada uma com um desenho da deusa Ísis, com uma 
diferença pequena entre as poses. Acredita-se que era criada a ideia de 
movimentação da figura da deusa ao se passar com uma carruagem 
rapidamente pelas colunas (WILLIAMS, 2019, p. 12).
Avançando no tempo, a lanterna mágica é um aparato interessante 
de ser lembrado, por trazer a possibilidade de se projetar em uma 
parede uma sequência de desenhos em um disco giratório de vidro, por 
meio da iluminação das imagens. Tal experimento foi registrado nos 
anos 1600 por Athanasius Kircher, que pesquisava as possibilidades 
de tal ferramenta (BARBOSA JÚNIOR, 2005, p. 30). Esse brinquedo 
evoluiu até que no século XVIII se tornou popular como atividade 
de entretenimento. Junto com ele, a importação para a Europa de 
sombras chinesas também trouxe algumas características trabalhadas 
posteriormente na área da animação. É importante reparar que não 
eram recursos de animação, mas já traziam algumas características que 
foram utilizadas para animar desenhos.
Avançando um pouco mais no tempo, um ponto que merece especial 
atenção é a chamada ilusão de movimento, criada quando várias 
imagens estáticas entram em movimento, de modo que uma dê lugar a 
outra no espaço em um curto período, possuindo bases científicas em 
diversos princípios, entre os quais podemos citar a persistência da visão, 
8
ou persistência retiniana. Esse fenômeno era percebido na roda de 
carruagens que, quando giravam rapidamente, pareciam estar paradas 
ou girando no sentido contrário. Trata-se de um fenômeno que já era 
conhecido há tempos, sendo descrito em 1824 por Peter Mark Roget. 
Esse princípio diz que os olhos retêm por um tempo uma imagem vista, 
o que cria uma conexão visual entre uma sequência de imagens, dando 
origem à tal ilusão (BARBOSA JÚNIOR, 2005, p. 41).
Diversos estudos foram feitos depois deste, tornando-o ultrapassado 
em termos científicos. Sabe-se atualmente que a ilusão de movimento 
se trata de uma série de fatores que acontecem no cérebro, e não no 
olho. Apesar disso, tal conceito é de grande importância para a área 
e foi utilizado na criação dos brinquedos ópticos e, posteriormente, 
no cinema e na animação. Considerando tais conceitos, sabe-se que, 
conforme a quantidade de imagens que serão mostradas dentro de um 
segundo, surge a ilusão de uma movimentação mais ou menos fluida. 
As taxas mais comuns de serem utilizadas no cinema são de 24, 25 
ou 30 frames por segundo, havendo projetos editados a 60 frames por 
segundo.
3. Brinquedos Ópticos
Brinquedos ópticos são objetos criados para mostrar uma animação 
por meio de processos mecânicos, tendo sido populares em feiras e 
no estudo da imagem em movimento. Entre os vários criados, pode 
ser citado o taumatrópio, que é um disco de papel com um desenho 
diferente de cada lado (WILLIAMS, 2019, p. 13), surgido em 1825. O disco 
é preso e segurado por dois fios ou elásticos, e, ao enrolar e desenrolar 
os fios, ele gira rapidamente, sobrepondo as duas imagens. Pode-secriar, por exemplo, o desenho de uma pessoa de um lado e um chapéu 
do outro. Ao girar o disco, cria-se a ilusão de que a pessoa está usando o 
chapéu.
9
Há também outros exemplos que lidam com algum tipo de estrutura 
circular. O fenaquistoscópio, ou fenacistoscópio, possui dois discos que 
giram em uma haste. Enquanto o disco da frente possui frestas, o de 
trás possui uma série de desenhos. Assim, ao girar o aparato, é possível 
ver a sequência animada por meio das frestas do disco da frente 
(WILLIAMS, 2019, p. 13). As frestas funcionam como um obturador, 
mostrando cada imagem durante um intervalo de tempo determinado. 
Sem elas, a imagem se torna borrada ao girar o disco ou o cilindro 
(BARBOSA JÚNIOR, 2005, p. 35). A Figura 1 mostra um exemplo de 
fenaquistoscópio criado por Eadweard Muybridge, um dos pioneiros dos 
estudos de movimentos por meio de fotografias.
Figura 1 – Exemplo de um disco de fenaquistoscópio
Fonte: https://commons.wikimedia.org/wiki/File:Phenakistoscope_3g07690u.jpg Acesso 
em: 18 dez. 2020.
Outros exemplos podem ser dados, como o zootrópio, também 
chamado de zootroscópio ou daedalum, no qual é usada uma tira com 
os desenhos dentro de um cilindro com frestas na parte superior; ou 
o estroboscópio, que possuía apenas um disco com os desenhos e as 
10
frestas, sendo necessário observá-lo em frente a um espelho. Todos 
esses aparatos permitiam animações simples de personagens ou 
objetos em loop.
Outro brinquedo óptico que se tornou muito popular é o flipbook, 
chamado também de folioscópio ou kineograph, surgido em 1868. Trata-
se de uma sequência de desenhos em folhas de papel encadernadas, 
podendo ser feito também com um caderno ou um pequeno livro. Ao 
passar as páginas rapidamente, há a ideia de animação.
No entanto, os brinquedos ópticos foram criados sem intenção 
artística, o que foi buscado pelo pintor Émile Reynaud, com a criação do 
praxinoscópio em 1877 (BARBOSA JÚNIOR, 2005, p. 36), que, parecido 
com o zootroscópio, tinha espelhos no lugar das frestas. Ele deu origem 
ao sistema de teatro praxinoscópio em 1882, que funcionava com 
engrenagens e permitia que uma fita com várias imagens fosse passada 
e projetada em uma superfície. A união dessas técnicas, junto com a 
evolução da fotografia, deu origem ao cinema, a partir do qual surge 
uma figura de grande importância para a animação, além dos efeitos 
visuais.
George Méliès foi um ilusionista e cineasta que criou diversos efeitos 
ao gravar os chamados filmes de truque. Uma das várias técnicas feitas 
era parar a gravação e substituir um objeto ou ator na cena e continuar 
gravando, o que pode ser considerado como o primeiro passo para o 
cinema de animação e seus primeiros projetos.
4. Primeiras animações criadas
Existem vários projetos que foram criados em datas próximas. Nesse 
ponto, não há importância em determinar qual veio primeiro, mas 
compreender a influência que têm na área e perceber o quanto cada 
mercado se desenvolveu a partir desses pontos iniciais em países 
11
variados. É importante também considerar que muitas das técnicas 
feitas eram rudimentares, mas seus princípios são aplicados a técnicas 
modernas. Além disso, não é possível prever quando uma descoberta de 
algum projeto mais antigo irá mudar essa relação, como aconteceu com 
as primeiras animações no Japão, conforme discutiremos adiante.
Pode-se começar pelo projeto mais antigo de que se tem registro. O 
curta-metragem Pauvre Pierrot (Pobre Pierrot), de Émile Reynaud, foi 
feito na França, em 1892, com 500 imagens pintadas e exibidas por meio 
de seu praxinoscópio, sobre o qual falamos anteriormente. A animação 
trata de um encontro amoroso entre Columbina e Arlequim, em que 
Pierrot vai visitá-la.
No entanto, considera-se como a primeira animação feita para um 
aparato de projeção de cinema a Fantasmagorie, de 1908, por Émile Cohl, 
também em Paris. Possui um enredo extremamente simples de uma 
história de ciúmes entre personagens. Tal enredo é mostrado por meio 
de uma sequência de ações em que personagens passam por situações 
incomuns, como ver uma apresentação ou entrar em um prédio. Um 
ponto interessante desse trabalho são as transformações de objetos 
e personagens, como um elefante que se transforma em um prédio, 
ou um homem que se transforma em uma garrafa. Aqui é importante 
comentar que “a obra de Cohl prefigurou o que viria a ser um ditado 
da animação: ‘Não faça o que uma câmera pode fazer – faça o que uma 
câmera não pode fazer!’” (WILLIAMS, 2019, p. 16).
A Figura 2 mostra um frame de Fantasmagorie, no qual é possível ver 
a simplicidade dos traços, considerando a tecnologia da época. Além 
disso, as narrativas não eram elaboradas, uma vez que tal arte se 
encontrava em um momento de exploração de suas potencialidades.
12
Figura 2 – Fantasmagorie (imagem em domínio público)
Fonte: captura de tela de https://commons.wikimedia.org/wiki/File:La_Fantasmagorie_
(1908).webm. Acesso em: 19 dez. 2020.
Enquanto isso, nos Estados Unidos, havia sido feito The Enchanted 
Drawing (O Desenho Encantado) por J. Stuart Blackton, em 1900, com 
ações ocorrendo entre o artista e uma lousa. Ocorrem mudanças 
simples no desenho da lousa, por meio da técnica de substituição 
ao parar a gravação, tendo pouquíssimos momentos com mudanças 
frame a frame (BARBOSA JÚNIOR, 2005, p. 42). Já em 1906, Blackton 
lança Humorous Phases of Funny Faces (Fases Humorísticas de Caras 
Engraçadas), mostrando vários personagens em situações diversas. 
Esse filme trabalhou a animação em uma lousa junto com recortes de 
personagens (BARBOSA JÚNIOR, 2005, p. 42).
Depois disso, ainda nos Estados Unidos, surgem as obras de Winsor 
McCay, que já era um desenhista conhecido. Em 1911, ele lançou Little 
Nemo (Pequeno Nemo), trazendo grande detalhamento gráfico aos 
personagens em cena; em 1912, How a Mosquito Operates (Como um 
Mosquito Opera), que conta a história de um mosquito tentando picar 
um homem que tenta dormir; e, em 1914, Gertie, the Dinosaur (Gertie, 
13
o Dinossauro), em que a personagem Gertie é apresentada ao público 
pelo artista, realiza alguns truques, dança, bebe água, entre outras 
ações. Essa animação é um marco por ter incorporado todos os avanços 
técnicos da área, além de ter inspirado outros artistas a criarem obras 
de sucesso, como Pica Pau e Koko, o Palhaço (BARBOSA JÚNIOR, 2005, 
p. 59). Além disso, esses últimos dois trabalhos foram importantes pela 
construção de personagens com personalidades que criaram carisma, 
ou repulsa, por parte do público.
A Figura 3 mostra um trecho de Gertie the Dinosaur. Comparando com 
a Figura 1 (Fantasmagorie), pode-se reparar a grande diferença nos 
detalhes da personagem e na construção do cenário.
Figura 3 – Gertie, the Dinosaur (imagem em domínio público)
Fonte: captura de tela de https://commons.wikimedia.org/wiki/File:Winsor_McCay_(1914)
Gertie_the_Dinosaur.webm. Acesso em: 18 dez. 2020.
5. Evolução das técnicas de animação
Conforme foi discutido na evolução histórica da animação, as primeiras 
técnicas eram bem simples, utilizando desenhos feitos em lousa ou 
diretamente na película de projeção. A essa técnica na película foi dado 
o nome de animação direta, tendo como seu maior artista Norman 
McLaren (BARBOSA JÚNIOR, 2005, p. 87).
14
No início, muitas animações consistiam em desenhos em papel. A 
exemplo disso, temos Gertie the Dinosaur, que foi feito com 5 mil 
desenhos, com o cenário sendo redesenhado em todos eles (BARBOSA 
JÚNIOR, 2005, p. 59). Depois, os papéis eram passados para uma película 
pelo processo de gravação, feito frame a frame. Pode-se imaginar o quão 
trabalhoso era realizar uma animação com tal técnica, o que mudou com 
a técnica de células transparentes.
Em 1914, surgiram os primeiros desenhos feitos com o uso de folhas 
de celuloide, patenteadas pelo animador norte-americano Earl Hurd 
(BARBOSA JÚNIOR, 2005, p. 66). Trata-se de um material transparente 
com o qual foi possível separar o desenho dos personagens do desenhodo cenário, o que permitiu que o cenário fosse trabalhado de maneira 
mais detalhada e facilitou o desenho de personagens. Essa técnica foi 
importante também por ter permitido uma melhor uniformidade nas 
linhas desenhadas, além de reduzir o tempo de produção (CHONG, 
2011, p. 21).
Outra técnica com grande destaque nesse período foi a rotoscopia, 
criada por Max Fleischer em 1915. Ela consiste em filmar uma pessoa 
e depois desenhar um personagem tendo a imagem captada como 
base. Para isso, Fleischer criou o rotoscópio, uma máquina que projeta 
o frame filmado para que se desenhe no papel usando a projeção como 
referência. Usando essa técnica, o artista criou, em 1918, a série Out of 
the Inkwell (Fora do Tinteiro), apresentando ao público Koko, o Palhaço 
(BARBOSA JÚNIOR, 2005, p. 69). A técnica de rotoscopia foi usada por 
diversos estúdios, sendo uma precursora das técnicas modernas de 
captura de movimento.
A Figura 4 mostra o rotoscópio, aparelho criado por Fleischer. Pode-
se perceber que há um mecanismo que permite projetar diretamente 
no papel cada frame de um filme, para que o animador consiga 
desenhar tendo grande fidelidade das proporções e dos movimentos do 
personagem desenhado em relação ao mundo real.
15
Figura 4 – Rotoscópio
Fonte: https://commons.wikimedia.org/wiki/File:US_patent_1242674_figure_3.png. Acesso 
em: 18 dez. 2020.
Além das técnicas citadas, a animação não se constitui apenas de 
desenhos. Desde o início, vários títulos foram feitos em stop motion, 
que é a técnica em que cada quadro da animação, ou frame, é 
montado e fotografado. Em outras palavras, pode-se dizer de uma 
maneira simplória que é “a técnica de criar a ilusão de movimento ou 
desempenho por meio da gravação, quadro a quadro, da manipulação 
de um objeto sólido, boneco ou imagem de recorte em um cenário físico 
espacial” (PURVES, 2011, p. 6). Dessa maneira, trata-se de um processo 
demorado e que requer muito planejamento, porém traz efeitos bem 
interessantes. Filmes como Chicken Run (A Fuga das Galinhas), de 2000, 
e The Nightmare Before Christmas (traduzido como O Estranho Mundo de 
Jack), de 1993, são exemplos famosos que se utilizaram dessa técnica.
Pode-se falar em diferentes tipos de stop motion: o com bonecos é o 
tipo que trabalha com marionetes e existe desde 1910; e o clay motion, 
nome dado quando se usam bonecos modelados, feitos com massinha, 
16
plasticina, barro, ou outro material maleável. Os bonecos também 
podem possuir uma estrutura interna de movimentação, como se 
fosse um esqueleto, que pode ser feito desde um fio de arame até uma 
estrutura repleta de articulações. Essa é uma escolha que vai depender 
das necessidades narrativas, visuais e orçamentárias do projeto 
(PURVES, 2011, p. 83). O Ratinho do Castelo Rá-Tim-Bum (programa 
brasileiro voltado ao público infantil que foi ao ar de 1994 a 1997) é um 
ótimo exemplo de personagem feito com massinha de modelar.
Há ainda o Pixilation, nome dado quando são usados atores reais na 
construção dos frames. É possível ver o início dessa técnica em trabalhos 
de George Méliès e Émile Cohl. Um exemplo conhecido é o curta-
metragem Neighbours (vizinhos), de Norman McLaren, feito em 1952, 
que narra uma briga entre dois vizinhos por conta de uma flor que 
surge entre a casa deles. Essa técnica é bem interessante por permitir 
a criação de movimentos que não seriam possíveis em uma gravação 
fílmica, como personagens andando sem mover as pernas, como se 
estivessem apenas deslizando pelo chão.
Outra possibilidade dentro do stop motion é o cut out (ou animação de 
recortes), em que os personagens são feitos de recortes de papel ou 
outros materiais. Diferentemente do uso de bonecos, nessa técnica 
não é necessário se preocupar com a gravidade atuando no cenário, 
ou com articulações complexas (PURVES, 2011, p. 114). Aqui podem ser 
citados trabalhos clássicos como os filmes de silhueta, que empregavam 
técnicas similares ao teatro chinês de sombras.
Há também um marco importante para a animação com o primeiro 
longa-metragem de animação, o qual foi feito na Argentina em 1918 por 
Quirino Cristiani, intitulado El Apostól (O Apóstolo). Este foi um projeto 
bem elaborado, com personagens de papel articulado, em uma crítica 
política ao governo argentino. Podem ser dados também exemplos 
recentes, como a série para televisão Angela Anaconda, de 1999, e South 
17
Park de 1997, que usou a técnica em seu primeiro episódio, simulando-a 
em meio digital a partir de então.
Quanto a softwares, o meio digital trouxe inúmeras mudanças à criação 
artística, em especial a facilidade de criar os projetos de animação. O 
barateamento na produção e a redução no tempo de execução são dois 
fatores que permitiram o crescimento da área. Além disso, é importante 
comentar também sobre as técnicas próprias do meio digital, como 
a animação com imagens geradas por computador (ou CGI) e as 
animações vetoriais.
6. A animação digital
Da mesma maneira que os precursores do cinema, na computação 
existia o interesse em tentar criar trabalhos já existentes, mas 
utilizando novas tecnologias (CHONG, 2011, p. 32). Além disso, o uso 
do computador no meio audiovisual veio não só para a criação de 
animação, mas também de efeitos especiais e de jogos digitais, visto que 
essas áreas conversam entre si até os dias atuais.
Considerando o contexto artístico do qual a animação faz parte, é 
possível verificar dois momentos no uso de tecnologias digitais. O 
primeiro é uma fase de empenho científico, em que foram estabelecidos 
os conceitos básicos do meio digital visual, como as técnicas de 
mapeamento, renderização, iluminação, entre outras. Esse primeiro 
momento teve seu ápice com o filme Tron, produzido pela Disney em 
1982. Já a segunda fase é de adaptação e aprimoramento, levando ao 
surgimento dos primeiros filmes criados por computador com modelos 
tridimensionais.
O meio digital trouxe mais facilidade em processos técnicos, 
barateamento e aceleração em processos nas mais diversas áreas de 
18
atuação do ser humano, e a animação está inclusa aqui também. O 
advento dos computadores pessoais permitiu maior acesso à produção 
de animações (CHONG, 2011, p. 6). Ou seja, não há mais a necessidade 
de uma equipe grande e o uso de vários equipamentos, sendo viável a 
criação de projetos dos mais variados estilos com apenas o uso de um 
computador doméstico.
Dentro do meio digital é amplamente utilizada a técnica de animação 
vetorial, com o uso de interpolação de movimentos. Este é um 
conceito muito comum em softwares de animação e edição, em que 
criamos pontos-chaves de uma ação e o computador “cria” os pontos 
intermediários.
Por exemplo, se pegarmos uma bolinha que precisa ir de um ponto 
A a um ponto B. Na animação tradicional, seria necessário desenhar 
todos os frames entre A e B, e, caso se quisesse uma animação mais 
devagar, mais frames teriam que ser adicionados. Porém, com o uso de 
interpolação, basta aumentar o tempo de movimento no software que 
as novas posições nos frames intermediários serão automaticamente 
calculadas.
Outro ponto importante de ser abordado é de que o meio digital 
trouxe a possibilidade de lidar com a modelagem tridimensional, em 
que são criados personagens, objetos e cenários com três dimensões, 
modelados a partir de um conjunto de pequenos polígonos. Um grande 
exemplo disso é o filme brasileiro Cassiopeia, de 1996 (BARBOSA JÚNIOR, 
2005, p. 159), além do filme Toy Story, da Pixar, que foi lançado meses 
antes. Ambos são considerados os primeiros filmes inteiramente 
tridimensionais (sendo Cassiopeia 100% criado por modelagem no 
computador, enquanto em Toy Story os personagens foram feitos 
primeiro em argila e depois escaneados para o meio digital).
Por fim, o meio digital possibilitou que as técnicas tradicionais fossem 
simuladas, além de sofrer grande influência de tais técnicas. Com o uso 
19
de filtros, aplicação de texturas e alteração na taxa de frames, pode-se 
criar uma animação similarà técnica de cut out, mas sem a necessidade 
de recortar os objetos e fotografá-los.
Já em relação às influências, um grande exemplo são os softwares de 
animação digital trabalharem com o conceito de paralaxe para simular 
a profundidade de campo. Esse conceito implica o fato de que objetos 
que estão distantes “se movem” na tela mais devagar do que objetos 
que se encontram mais próximos do ponto de vista do espectador. Tal 
conceito foi estruturado pela chamada câmera multiplano, criada por 
Walt Disney em 1937 (BARBOSA JÚNIOR, 2005, p. 112). Outro exemplo 
de tal influência é o uso das folhas de acetato, que trouxeram a ideia 
de separar uma animação em camadas com transparência, o que é 
facilmente feito em softwares de animação.
7. A relação entre a animação e outras mídias
Muito foi abordado sobre a animação no cinema. Além desta, existem 
inúmeros projetos de animação na televisão, com diversos exemplos 
famosos, inclusive títulos brasileiros, como os filmes produzidos pela 
Mauricio de Sousa Produções com personagens da Turma da Mônica, 
ou séries como Peixonauta, de 2009, e Irmão do Jorel, de 2014. Além 
disso, com a popularização da internet e dos serviços de streaming, 
as animações ganharam espaço nesses meios, havendo projetos 
exclusivos para YouTube e Netflix. Um ponto importante a destacar é 
que a internet serve como facilitador para a divulgação dos projetos de 
animação, independentemente de ser um trabalho comercial ou não, de 
um estúdio grande ou de um artista independente; existe uma grande 
facilidade em se chegar a um nicho específico (CHONG, 2011, p. 80).
É importante ressaltar que a animação não se restringe às áreas 
abordadas, existindo um amplo mercado dentro dos jogos digitais, que 
20
foram abordados brevemente no tópico anterior. Independentemente 
de serem jogos 2D ou 3D, vários conceitos de animação são utilizados na 
movimentação de personagens e objetos no cenário, considerando aqui 
as características próprias do meio, como o poder computacional e o 
tempo de resposta entre apertar um botão e a mudança de movimento 
de um personagem. Além disso, inúmeros jogos se utilizam de técnicas 
de modelagem tridimensional com captura de movimento de atores 
reais, da mesma forma que é feito no cinema.
Desde o surgimento dos jogos digitais, os quais possuíam algumas 
animações simples de deslocamento, rotação e escala, é importante 
trabalhar com técnicas de movimentação que tornem o jogo 
interessante e atrativo ao público. É importante também que as 
animações façam sentido conforme a narrativa e a personalidade de 
cada personagem criado.
Outra área é a construção de interfaces de softwares, sites para web e 
aplicações para dispositivos móveis. Vários softwares e sites para web 
se utilizam de animações para tornar a navegação mais agradável ao 
usuário, como um menu que desliza na tela ou um botão que muda de 
cor gradativamente quando o mouse está em cima dele.
Por fim, outro mercado dentro da animação é o Motion Design ou Motion 
Graphics, considerado uma junção da animação com o design. John 
Whitney Sr. e Saul Bass definem o conceito de Motion Graphics como 
um campo “que combina preocupações do design tradicional: o uso de 
tipos, distinção estética, signos de comunicação eficiente e a capacidade 
de formas se moverem e se transformarem” (CHONG, 2011, p. 35).
Porém, mesmo sendo um campo pertencente à grande área da 
animação, é possível dividi-lo em duas áreas, conforme o seu objetivo. 
De um lado, temos a Animação Clássica, a qual lida com a construção 
de narrativas mais elaboradas e com o uso de personagens; e, do 
outro lado, temos o Motion Design, trabalhando com “formas abstratas 
21
animadas como logotipos, elementos gráficos e tipografia” (SHANASA, 
2020, p. 11). Apesar de tais distinções, esses dois campos lidam com os 
mesmos conceitos de animação.
Dessa forma, considerando o que foi visto no decorrer do texto, 
é possível constatar o quanto a animação passou de uma mera 
experimentação, com a ilusão de movimento, e virou uma ferramenta 
importante no processo de criação dos mais diversos tipos de materiais 
vistos no dia a dia. Conversando com várias áreas do audiovisual e da 
computação, são unidos os princípios únicos que a ilusão de movimento 
possibilita com os conceitos próprios de cada meio, criando-se projetos 
cada vez mais inovadores, criativos e, no caso dos softwares, amigáveis 
ao usuário.
Referências
BARBOSA JÚNIOR, Alberto Lucena. Arte da animação: técnica e estética através da 
história. São Paulo: Senac, 2005.
CHONG, Andrew. Animação Digital. Porto Alegre: Bookman, 2011.
PURVES, Barry. Stop-Motion. Porto Alegre: Bookman, 2011.
SHANASA, Dhyan. Manual de Sobrevivência para Motion Designers. 2020. 
Disponível em: https://www.layerlemonade.com/motion-design/manual-de-
sobrevivencia-para-motion-designers-livro. Acesso em: 25 set. 2020.
WILLIAMS, Richard. Manual de animação: manual de métodos, princípios e 
fórmulas para animadores clássicos, de computador, de jogos, de stop motion e de 
internet. São Paulo: Senac, 2019.
22
Técnica de desenho frame a frame
Autoria: Felipe Orsini Martinelli
Leitura crítica: Luís Gustavo Luz
Objetivos
• Compreender a relação entre as técnicas clássicas de 
animação e as técnicas utilizadas no meio digital.
• Ter domínio dos conceitos fundamentais do 
desenho voltados para a criação de animações.
• Escolher a melhor técnica de animação conforme as 
necessidades de cada movimentação em uma cena.
23
1. Introdução
A animação passou por uma evolução tecnológica de modo que várias 
de suas técnicas foram aprimoradas com o passar dos anos. Embora 
tenha ocorrido uma popularização do meio digital, vários conceitos 
ainda são os mesmos de quando não existiam os computadores, 
influenciando a maneira com que as ferramentas digitais lidam com a 
imagem. Isso acontece, pois as técnicas antigas podem ser aplicadas em 
qualquer tipo de estilo ou abordagem (WILLIAMS, 2019, p. 20).
Vamos considerar que uma animação é composta por uma sequência 
de quadros, ou frames, que são exibidos um atrás do outro. Para que os 
frames sejam criados, várias técnicas podem ser aplicadas, como o stop 
motion (em que cada frame é individualmente preparado e fotografado), 
o desenho (analógico e digital) e a modelagem computacional, em que 
se criam modelos em três dimensões. As técnicas de desenho terão 
grande destaque neste material, considerando aqui os desenhos usados 
na técnica de frame a frame, que será discutida no próximo tópico.
É importante notar que, para animar, não é obrigatório ter um 
traçado apurado (um simples círculo pode virar uma bolinha pulando 
e expressar emoções), embora sabê-lo permita com que se vá 
para qualquer direção no processo criativo, sendo possível animar 
personagens desde os mais realistas até os mais cartunescos (WILLIAMS, 
2019, p. 30). Ou seja, aprimorar a habilidade de desenhar permite 
trabalhar sem limitações dentro da área de animação, sendo a prática 
do desenho de grande importância. Isso porque tal domínio pode ser 
relacionado também ao fato de que a animação lida com o olhar do 
animador, em como ele interpreta o mundo (WELLS; QUINN; MILLS, 
2012, p. 31).
24
2. Conceitos técnicos
Um conceito importante de ser discutido inicialmente é o frame, ou 
quadro, que pode ser definido como a imagem que é vista em uma tela 
durante um filme, sendo uma sequência de quadros uma animação. 
Dessa forma, o processo de animação ocorre quando uma sequência 
de imagens é mostrada, substituindo uma pela outra, em um curto 
intervalo de tempo, sendo o mesmo processo do cinema.
Seguindo essa ideia, podem ser mostradas quantidades determinadas 
de imagens em um intervalo de tempo, ou uma taxa de quadros (ou 
taxa de frames). Um segundo costuma ser usado como padrão de 
medida, em que há tantos frames em um segundo de imagem. Essa 
relação é chamada de FPS, ou frames por segundo (no inglês, frames 
per second). Da mesma forma que acontece com uma filmagem para o 
cinema,se há 24 imagens, ou frames, sendo exibidos a cada segundo, é 
dito que tal filme possui uma taxa de 24 FPS. Os valores mais comuns 
para animações são 24, 25 e 30 FPS. É possível utilizar valores menores, 
deixando o movimento menos fluído dentro das cenas criadas, mais 
“travado”, ou mais frames, trazendo uma maior fluidez aos movimentos 
em cena.
3. A respeito das técnicas de desenho
Um ponto importante para aprimorar a maneira como se representam 
objetos e personagens em um desenho é a observação. É essencial 
observar como pessoas se movimentam, como objetos interagem 
quando encostam um no outro, entre outros exemplos. Compreender 
a expressão corporal de pessoas é fundamental, a qual pode ser 
acentuada em uma animação.
25
O desenho partindo da observação irá lidar com uma interpretação do 
animador em relação ao que observa, com base em sua percepção. Esta 
é influenciada por sua formação, suas referências, seu contexto e como 
o objeto é imaginado (WELLS; QUINN; MILLS, 2012, p. 22). Assim, podem 
ser criadas interpretações variadas, não seguindo necessariamente um 
traçado realista. Além da observação, há outras possibilidades para se 
trabalhar o desenho, como lidar com memórias, com a interpretação e 
com a representação de objetos, levando em conta a mensagem que se 
quer passar.
Tomemos o exemplo da Figura 1, da movimentação de uma 
personagem. Nele, é possível reparar como as pernas estão retas e 
como há pouca diferença entre os frames. Essa animação poderia 
exprimir sentimentos totalmente diferentes caso a coluna da 
personagem estivesse mais curva, ou as pernas menos retas, ou se 
houvesse maior movimentação dos braços. Além disso, pode-se usar a 
movimentação humana em objetos e animais. Um animador experiente 
consegue exprimir sentimentos variados animando apenas um 
quadrado na tela.
Figura 1 – Sequência de frames para uma animação de 
movimentação
Fonte: https://pixabay.com/illustrations/man-walk-cycle-walking-steps-5618655/. Acesso 
em: 22 dez. 2020.
Outro fator importante ao se desenhar uma animação é em relação 
ao uso de ferramentas digitais. Ela pode ser feita no papel, desenho 
por desenho, com o uso de uma mesa de luz, e depois ser fotografado 
26
por uma câmera digital; ou pode ser desenhada diretamente em um 
computador, por meio de um monitor ou de uma mesa de desenho, um 
tablet ou até mesmo um mouse. Uma grande vantagem do meio digital 
é a possibilidade de replicar um desenho e alterar apenas os pontos que 
precisam ser modificados.
Para se trabalhar com traçados mais detalhados, é recomendado o uso 
de uma mesa ou um monitor de desenho, principalmente pelo fato de 
que esses dispositivos trabalham com uma caneta, aproximando mais 
o traçado do que seria feito em um pedaço de papel. Além disso, há 
recursos próprios de tais ferramentas, como a sensibilidade à pressão, 
o que faz com que um traço fique mais grosso ou mais fino, conforme a 
força aplicada na caneta.
É importante ressaltar também que, para desenhar uma animação, 
deve-se sempre buscar referências. É preciso procurar por desenhos 
que você gosta e tentar reproduzir as movimentações. Aqui não se 
trata de copiar um desenho, mas de verificar o seu funcionamento, 
tentando reproduzir as ações. Por exemplo, ao assistir a uma animação 
em que uma personagem aparece correndo com os braços para trás, 
tente reproduzir em outra personagem essa característica. Teste 
várias possibilidades para uma mesma ação e verifique as diferenças 
encontradas.
4. Animação frame a frame
Uma diferença da animação para o cinema tradicional (ou live action) 
é que naquela a imagem é composta por diversas técnicas, o que se 
diferencia de filmar uma cena do mundo real de forma constante. É 
necessário criar a imagem, o que é feito por várias técnicas, sendo o 
desenho de grande importância na animação.
27
Desde o início da animação, há projetos feitos por meio de imagens 
desenhadas. Quando se desenham todos os frames da animação, dá-se 
o nome de animação frame a frame (ou quadro a quadro). Os primeiros 
trabalhos tinham desenhos feitos em papel ou lousas, os quais eram 
fotografados e unidos em uma película, como é o caso dos trabalhos 
de Winsor McCay. Em seus trabalhos, era necessário copiar o cenário 
em cada folha de papel da animação (BARBOSA JÚNIOR, 2005, p. 59). Há 
também trabalhos cujo desenho foi feito diretamente na película, sem a 
necessidade de fotografar vários desenhos; há várias obras de Norman 
McLaren que exploram essa técnica.
Aqui entra um ponto importante: na animação clássica, era necessário 
desenhar todos os frames de uma animação, ou seja, em um curta-
metragem de 3 minutos com 24 frames por segundo, era necessário 
desenhar 3 min x 60 s x 24 frames, dando 4.320 imagens no total. A 
Figura 2, extraída da animação Gertie, the Dinosaur, de Norman McLaren, 
dá uma ideia da quantidade de papel necessária para um projeto 
desse tipo. Percebe-se o quanto de trabalho era necessário para o uso 
dessa técnica, o que é totalmente compreensível, conforme a limitação 
tecnológica da época.
28
Figura 2 – Organização de frames da animação Gertie, the Dinosaur
Fonte: https://commons.wikimedia.org/wiki/File:Gertie_stacks_of_drawings.jpg. Acesso em: 
8 jan. 2021.
Em 1914, o animador norte-americano Earl Hurd criou a técnica de 
folhas de celuloide, ou acetato, que consistia em separar os elementos 
da animação em camadas (BARBOSA JÚNIOR, 2005, p. 66). Assim, 
pode-se usar uma camada opaca para o cenário, além de várias 
folhas transparentes com os personagens. Tal separação facilitou a 
animação de personagens; economizou tempo na produção, pois não 
era mais necessário replicar o cenário várias vezes; e permitiu que os 
cenários fossem mais detalhados em sua composição. Essa mudança é 
importante, pois até hoje influencia a maneira de se criar uma animação, 
inclusive no meio digital, por meio do uso de camadas transparentes, 
recurso básico dos principais softwares de animação existentes.
Com o passar dos anos e com a consolidação dos grandes estúdios de 
animação, pode-se falar em duas possibilidades dentro da animação 
frame a frame: a animação total e a limitada. A primeira, utilizada 
amplamente pelos Estúdios Disney, é aquela em que é feito o desenho 
completo dos personagens em todos os frames; assim, um personagem 
será refeito inteiramente em cada um dos 72 frames, independente 
29
se moveu apenas um braço. Já na segunda, o personagem não é 
desenhado inteiramente em todos os frames, mas apenas as partes 
que se movem (BLAIR, 1994, p. 202); assim, a parte do corpo que estiver 
estática é desenhada apenas uma vez e repetida durante os frames.
Além disso, é possível reutilizar os frames em vários momentos dentro 
de um desenho animado. Um exemplo disso é um personagem 
levantando os braços em que o corpo é desenhado apenas uma vez. 
Outro exemplo é um personagem falando, em que poucos desenhos 
da boca são feitos e repetidos várias vezes. Esse estilo foi amplamente 
utilizado pelos estúdios Hanna-Barbera e UPA (United Productions of 
America), os quais trabalhavam com uma contraposição ao estilo realista 
e orgânico dos estúdios Disney. Por um lado, a Disney procurava por um 
realismo nas movimentações, enquanto no estilo UPA eram exploradas 
as possibilidades não realistas que a animação permitia aos artistas 
(BARBOSA JÚNIOR, 2005, p. 130).
Além dessas possibilidades, com o passar do tempo, alguns estúdios 
começaram a trabalhar com a técnica de animar em “uns” ou “dois” (ou 
“ones” e “twos”). Tal técnica consiste em desenhar uma imagem para cada 
frame, ou para cada dois, o que pode variar conforme a movimentação 
que é feita em uma cena. Em outras palavras, cada frame é repetido uma 
vez, o que reduz o trabalho do animador pela metade (em vez de 24 
frames por segundo, são necessários apenas 12), dependendo do que se 
anima e do efeito estético que se deseja.
Ao realizar ações rápidas ou muito suaves, pode-se trabalhar em “uns”, 
enquanto ações normais podem serfeitas em “dois” (WILLIAMS, 2019, p. 
79). Em outras palavras, um personagem andando tranquilamente pelo 
parque pode ser animado com a metade dos frames da taxa utilizada; 
caso ele pare e pule rapidamente, o pulo pode ser feito seguindo a taxa 
de frames do projeto. Essa é uma técnica vinda da animação em papel 
30
que pode mostrar que não se deve restringir uma movimentação a 
uma taxa fixa de imagens. É possível trabalhar com uma imagem sendo 
usada em apenas 1 frame, ou 2, ou até mesmo 3.
A popularização dos computadores trouxe diversos recursos para a área 
da animação, sendo possível lidar com projetos 2D e 3D, além de várias 
técnicas de animação. Entre elas, temos a animação frame a frame, que 
foi explicada anteriormente, e a animação vetorial, por meio da qual se 
criam keyframes (quadros-chave) de posição ou tamanho de um objeto 
e o computador produz os frames intermediários, ou seja, são dados os 
frames principais apenas, enquanto os outros frames são calculados 
pela máquina. A esse processo é dado o nome de interpolação. É 
importante comentar que uma técnica não é melhor do que a outra, 
sendo a escolha feita com base nas necessidades visuais do projeto e no 
costume do artista; além disso, é comum mesclá-las.
5. Modos de animar
A movimentação de um objeto pode ser desenhada de três modos. O 
primeiro deles é a animação direta (ou straight ahead animation), na 
qual são criados quadros em sequência linear, ou seja, o quadro 1 é 
desenhado, depois o quadro 2, depois o 3 e assim sucessivamente, até 
que a animação seja concluída. Entre suas vantagens, podemos citar a 
criação de ações fluidas e espontâneas e o uso do improviso; por outro 
lado, entre as desvantagens, temos o risco de alterar o tamanho de 
personagens, uma possível falta de rumo e uso do tempo da animação 
(WILLIAMS, 2019, p. 61).
Tomemos o exemplo de uma personagem andando de um canto até 
o outro da tela, em uma ação que dura 1 segundo, ou 24 frames. Se o 
traçado for feito sequencialmente, corre-se o risco de que a personagem 
termine os 24 frames antes do final da tela, o que faria com que a ação 
31
fosse prolongada, aumentando o tempo da cena e, consequentemente, 
da produção do projeto. Corre-se também o risco de ela mudar ou 
diminuir seu tamanho até o final dos frames, tornando necessário 
redesenhar a movimentação.
Esses tipos de problemas descritos no parágrafo anterior podem ser 
evitados com o uso do segundo modo, que é chamado de pose a pose 
(ou pose to pose). Trata-se de uma maneira planejada de animar, em 
que são feitos primeiro os frames principais de uma ação, para depois 
criar os frames que vão entre esses frames principais, os keyframes, 
explicados anteriormente. No exemplo da personagem andando, seriam 
desenhados os frames 1 e 24, para depois preencher o espaço entre 
eles. Essa técnica traz as vantagens de deixar o projeto organizado e 
dentro do tempo planejado, já que o objetivo da cena se torna claro e 
estruturado. No entanto, a perda de fluidez na movimentação pode ser 
apontada como uma desvantagem, considerando que as ações ficam 
mais mecânicas e planejadas (WILLIAMS, 2019, p. 62).
O terceiro modo é uma mistura dos dois anteriores, considerando 
as vantagens de cada um. Assim, surge aqui o equilíbrio entre a 
espontaneidade do primeiro modo com o planejamento do segundo 
(WILLIAMS, 2019, p. 63). Começa-se com o planejamento e o desenho 
dos frames principais, para depois trabalhar de maneira direta nas ações 
intermediárias, sempre alternando as duas. A depender do projeto, e 
das preferências pessoais, cada um desses modos pode ser escolhido na 
criação de uma ação dentro de um projeto.
Seguindo o conceito de key frames, pode-se aprimorar o processo 
decompondo a cena em mais frames. Tomando o exemplo de um 
pêndulo indo de um lado até o outro, A e B são os pontos-chaves da 
ação (Figura 3), aos quais pode ser dado o nome de pontos extremos 
(WILLIAMS, 2019, p. 49). A posição C está no meio, indicando um 
momento intermediário entre A e B, dando-se a ela o nome de 
passagem, ou breakdown. A movimentação que ocorre nesses três 
32
pontos pode ser traçada por meio de uma linha de ação. Nesse caso, 
como a ação é curva, pode ser chamada de arco de ação. Depois os 
pontos D, E, F e G podem ser chamados de intervalos, que servem para 
preencher as ações mostradas pelos outros frames.
Figura 3 – Representação de keyframes e frames intermediários em 
um pêndulo
Fonte: adaptada de Williams (2019, p. 49).
Para que se tenha uma animação de fato, é necessário inserir mais 
frames entre os frames A, B e C. A esses frames extras, que irão 
complementar a animação, pode ser dado o nome de intervalos.
Uma ação pode ser trabalhada com:
• Poses-chave: poses que contam a história, que mostram o que está 
acontecendo na cena.
• Poses extremas: poses em que há alguma alteração da direção das 
ações feitas.
33
• Poses de passagem (breakdown): poses intermediárias entre as 
poses extremas.
• Frames intervalos: poses que complementam as poses anteriores.
É importante ressaltar que não existe uma regra em relação a essa 
divisão de frames. No entanto, é importante testá-la e testar variações, 
até que se encontre uma metodologia que seja mais agradável à 
maneira de trabalhar e se organizar.
Qualquer movimentação pode ser expressa em uma linha de ação, 
sendo tal linha importante para que a movimentação se torne orgânica. 
Caso um movimento não siga uma linha, ou curva, de ação, torna-se 
irreal para o espectador (BLAIR, 1994, p. 140). Próximo dessa linha, pode-
se citar o uso da intervalação, uma técnica importante para organizar 
um projeto, permitindo que se saiba a distância que cada objeto deve ter 
entre os frames de um movimento (WILLIAMS, 2019, p. 48).
A Figura 4 exemplifica tais conceitos com uma linha de ação mostrando 
o trajeto da cabeça de uma pessoa caminhando. Há a representação 
parcial do arco de ação das mãos. É importante observar que o 
espaçamento entre as marcações, indicadas em vermelho, não é igual, o 
que cria um ritmo diferente caso fosse um movimento com velocidade 
uniforme.
34
Figura 4 – Representação de linhas de ação
Fonte: elaborada pelo autor.
6. Uso de softwares para a animação frame a 
frame
Embora haja inúmeros softwares disponíveis no mercado, alguns 
deles merecem destaque por conta de sua importância, uso ou 
disponibilidade de ferramentas voltadas à animação. Além disso, 
alguns conceitos são comuns a todos os principais softwares. Portanto, 
primeiro serão discutidos alguns conceitos para depois comentar como 
funcionam nos softwares.
Começamos pelo uso de camadas, o que pode ser associado à técnica 
de desenho com celulose, ou folhas de acetato. Assim, o frame pode 
ser decomposto em diversas camadas, sem a preocupação de ter 
que repetir um elemento em todos os frames (basta manter a mesma 
camada visível). O uso de camadas, ou layers, permite que sejam 
aplicados filtros em apenas um elemento na tela, além de lidar com a 
35
técnica de uns e dois de maneira mais elaborada. Pode-se, por exemplo, 
manter um objeto se movendo a cada 2 frames, enquanto um outro 
objeto se move a cada 1 frame. ou duplicar uma camada e realizar 
poucas alterações nela para a criação do próximo frame, em vez de 
desenhá-la do zero.
Outro recurso disponível é o onion skin, ou casca de cebola, que serve 
como referência dos frames anteriores e posteriores ao que está sendo 
traçado. Esse conceito pode ser relacionado ao uso das mesas de luz 
para ver a sucessão dos frames em papel. Ao colocar várias folhas de 
papel em cima de uma mesa de luz, é possível ver o traço de todas elas, 
podendo-se usar os frames anteriores como referência. Esse recurso 
permite que os frames sejam usados como referência de maneira 
automática, além de ser possível ajustar quantos frames antes e quantos 
depois devem aparecer, o quanto de transparência, entre outras 
propriedades.
Em relação aos softwares, há vários disponíveis para uso, tanto gratuitos 
quantopagos. Entre os gratuitos, podem ser citados: Krita, GIMP, 
Pencil2D e OpenToonz. Já entre os pagos, temos Photoshop, ToonBoom, 
CelAction e Moho.
O Photoshop é uma ferramenta com grande popularização, além de ser 
usado em outras áreas, servindo aqui de exemplo para alguns conceitos. 
É um software mantido pela Adobe que ficou conhecido pelo seu uso 
na criação, na edição e no tratamento de imagens digitais. Apesar disso, 
possui as ferramentas básicas para a criação de animações frame a 
frame, entre outras coisas, sendo uma ferramenta bem completa para 
diversas criações que envolvam imagem digital.
O software, assim como todo o pacote Adobe, trabalha com abas de 
ferramentas, sendo a aba Timeline, ou Linha do Tempo, fundamental 
para criar animações. Nela, é possível ajustar quais camadas aparecerão 
em cada frame, criar animações de movimentação de camadas, ajustar 
36
o efeito de onion skin etc. Ao finalizar um projeto, o Photoshop pode 
exportar o arquivo em formato GIF, que é uma imagem animada, ou 
para alguns formatos de vídeo, como MP4 e MOV.
Alguns artistas preferem preparar as camadas com todos os elementos 
de cena no Photoshop, para depois animar dentro do Adobe After Effects. 
Essa segunda ferramenta é voltada para efeitos especiais, motion 
design e animação vetorial. Apesar disso, possui inúmeros recursos 
que auxiliam na animação quadro a quadro, além das possibilidades 
de integrar técnicas variadas (ex.: é possível criar efeitos interessantes 
unindo animação quadro a quadro com animação vetorial).
Referências
BARBOSA JÚNIOR, Alberto Lucena. Arte da animação: técnica e estética através da 
história. São Paulo: Senac, 2005.
BLAIR, Preston. Cartoon Animation. Laguna Hills: Walter Foster Publishing, 1994.
WELLS, Paul; QUINN, Joanna; MILLS, Les. Desenho de Animação. Porto Alegre: 
Grupo A, 2012.
WILLIAMS, Richard. Manual de animação: manual de métodos, princípios e 
fórmulas para animadores clássicos, de computador, de jogos, de stop motion e de 
internet. São Paulo: Senac, 2019.
37
Os 12 Princípios da Animação
Autoria: Felipe Orsini Martinelli
Leitura crítica: Luís Gustavo Luz
Objetivos
• Compreender a importância histórica dos 12 
princípios elaborados por Frank Thomas e Ollie 
Johnston.
• Definir quais princípios utilizar para a criação de uma 
animação.
• Analisar como tais princípios podem ser aplicados 
em animações digitais.
38
1. Introdução
Os animadores dos Estúdios Disney trouxeram várias inovações 
para a área, tanto em quesitos técnicos quanto artísticos. Dentro da 
segunda área, foi feita a sistematização de alguns conceitos a serem 
seguidos, aos quais foi dado o nome de Princípios da Animação, que 
têm como propósito criar maior vivacidade aos personagens, ou seja, os 
personagens deveriam mostrar na tela que respiram, pensam e sentem, 
não sendo apenas uma forma desenhada (BARBOSA JÚNIOR, 2005, p. 
99).
Aqui é importante salientar que tais conceitos não foram pensados 
do nada, havendo toda uma evolução histórica da animação desde os 
primeiros anos da área. Pode-se dizer que alguns dos conceitos que 
serão discutidos já podiam ser vistos em trabalhos antes do surgimento 
da Disney, como na obra do animador Winsor McCay (BARBOSA 
JÚNIOR, 2005, p. 59). Apesar disso, foram discutidos e aprimorados 
pelos animadores da Disney, de modo que eram ensinados sempre 
aos ingressantes do estúdio (THOMAS; JOHNSTON, 1995, p. 47). Dessa 
forma, essa lista se tornou extremamente importante, servindo de 
referência a outros estúdios e sendo estudada nos cursos de animação 
até hoje.
1.1 Comprimir e esticar
O princípio de comprimir e esticar, ou squash and stretch, explora a 
ideia de deformar objetos para que a animação mostre que tais objetos 
possuem peso, massa e velocidade, mantendo sempre o seu volume. 
Considera-se aqui que pouquíssimos objetos são inflexíveis no mundo 
real, visto que qualquer movimentação provoca uma leve mudança 
momentânea, especialmente em pessoas. Consequentemente, isso se 
aplica a personagens em uma animação (THOMAS; JOHNSTON, 1995, p. 
48).
39
Pode ser dado um exemplo simples de uma bolinha pingando. Percebe-
se que quando a bolinha entra em contato com o chão, deforma-se, e, 
quanto mais elástico o material dela, mais irá se deformar ao encostar 
no chão. Apesar disso, seu volume é mantido durante toda a ação.
1.2 Antecipação
Conforme apontam Thomas e Johnston (1995, p. 51), a audiência não 
irá entender uma sequência de ações se não houver uma continuidade 
entre elas. Ou seja, é necessário preparar o público para as ações 
principais feitas pelas personagens por meio de outras ações antes 
dela. Para isso, utiliza-se o conceito de antecipação (ou anticipation), que 
vem da maneira com que os seres humanos costumam realizar ações, 
sempre com uma antecipação. Seu uso na animação faz com que o 
público acompanhe o movimento junto com a personagem (WILLIAMS, 
2019, p. 274). Podem ser dados vários exemplos desse conceito, como 
olhar para um objeto antes de pegá-lo; virar o corpo antes de começar 
a andar; inspirar o ar antes de encher um balão; puxar o elástico de um 
estilingue para atirar um objeto; entre outros.
A Figura 1 traz um ótimo exemplo com uma sequência de imagens de 
um jogador de beisebol. É possível perceber que ele não simplesmente 
lança a bola para a frente, mas realiza todo um preparo com o corpo, 
auxiliando fisicamente no lançamento e visualmente o público. 
Não apenas os braços são utilizados no lançamento, mas há uma 
movimentação expressiva também do quadril e das pernas antes que a 
ação principal (lançar a bola) seja feita.
40
Figura 1 – Exemplo de um movimento de antecipação para realizar 
uma ação.
Fonte: Veronika Zimina/iStock.com 
1.3 Encenação
A encenação (ou staging) é um conceito que vem do teatro e diz que toda 
ação deve ser mostrada de maneira clara, sem deixar dúvidas no público 
(THOMAS; JOHNSTON, 1995, p. 53), ou seja, deve ser encenada pelas 
personagens de maneira clara. As ações principais não devem acontecer 
simultaneamente, pois isso fará com que compitam pela atenção do 
público e se tornem confusas. Dessa forma, deve existir um intervalo 
entre elas.
Uma técnica muito útil para verificar o uso desse conceito é o uso 
de silhueta em personagens. Ao pegar uma cena, se a silhueta está 
compreensível, então a imagem está bem planejada. Trata-se de 
um desafio em que o desenho precisa ser refeito até que se chegue 
a um contorno claro e que tenha movimentação natural (THOMAS; 
JOHNSTON, 1995, p. 56).
41
A Figura 2 mostra um exemplo de silhueta. Repare como é possível 
entender de maneira clara a ação da personagem desenhada apenas 
pelo contorno da imagem, sem a necessidade de saber como é o seu 
preenchimento.
Figura 2 – Silhueta de uma personagem dançando
Fonte: https://pixabay.com/vectors/ballerina-ballet-dance-dancing-2024547/. Acesso em: 
14 jan. 2021.
1.4 Animação direta e pose a pose
Pode-se dividir a criação de frames em uma animação de duas maneiras: 
a animação direta (straight ahead) e a pose a pose (pose to pose). A 
primeira técnica consiste em traçar os frames em sequência. O primeiro 
frame é feito, depois o segundo, o terceiro e assim por diante. É uma 
técnica feita a partir de um ponto inicial sem um planejamento muito 
preciso de para onde a cena vai, o que traz maior espontaneidade à ação 
(THOMAS; JOHNSTON, 1995, p. 57). Por outro lado, a animação pose a 
pose é mais bem planejada. Primeiro são criados os frames principais da 
ação e depois os frames intermediários. É possível criar o primeiro e o 
último frames de um movimento e depois os frames que vão entre esses 
principais.
42
Aqui é importante comentar que as duas técnicas podem ser usadas 
em combinação, como comenta Williams (2019, p. 63) ao abordar uma 
terceira maneira, que é um misto de ambas. Dessa forma, trabalha-se 
com a organização e o planejamento estruturado do método pose a pose 
combinado à espontaneidade, ao fluxo natural da animação direta.
1.5 Continuidadee sobreposição da ação
Os conceitos de continuidade (ou follow through) e sobreposição da ação 
(overlapping action) servem para dar maior naturalidade à movimentação 
de uma personagem (THOMAS; JOHNSTON, 1995, p. 59). Pode-se dizer 
que a sobreposição de ação considera que uma parte do corpo de uma 
personagem começa sempre a se mover antes das outras, da mesma 
forma que também termina de se mover antes (WILLIAMS, 2019, p. 226).
Podem ser consideradas várias possibilidades para o uso. Por exemplo, 
quando uma personagem possui algum elemento como um casaco 
ou um brinco, tais elementos continuam a se mover por mais um 
tempo depois que o corpo parou. Outro exemplo é quando o corpo da 
personagem não se move como um todo, mas como partes encaixadas; 
cada parte irá parar no seu tempo no movimento. Pode-se também 
abordar sobre partes de pele e carne soltas do corpo, como bochechas; 
as quais possuem um movimento diferente do corpo como um todo.
1.6 Aceleração e desaceleração
O princípio de aceleração e desaceleração (ou slow in e slow out) é 
simples e diz sobre a velocidade das ações entre poses extremas, 
devendo variar, o que cria uma animação mais orgânica e menos 
robótica. Além disso, existe uma tendência em alguns objetos de 
começarem um movimento devagar, acelerarem e depois reduzirem a 
velocidade (THOMAS; JOHNSTON, 1995, p. 62).
43
Um exemplo simples é o de uma bolinha caindo (Figura 3). Percebe-
se que a queda difere no espaçamento entre os frames, e a distância 
entre cada momento aumenta, já que a aceleração do objeto em queda 
aumenta. Caso a distância se mantivesse a mesma, a animação não se 
pareceria com a queda de um objeto. Além disso, o objeto se deforma 
ao entrar em contato com o chão, seguindo o que está no primeiro 
princípio.
Figura 3 – Exemplo de aceleração
Fonte: elaborada pelo autor.
1.7 Arcos
A maioria dos movimentos feitos por animais na natureza são circulares, 
havendo poucas exceções; eles seguem um arco, o que dá nome a esse 
princípio (ou arcs). Dessa forma, a maioria das movimentações feitas por 
uma personagem deve seguir um arco, a fim de criar trajetórias curvas, 
e não retas (THOMAS; JOHNSTON, 1995, p. 63), visto que movimentos 
em linha reta podem dar uma sensação de parecerem artificiais. É só 
44
reparar como os braços se movem quando uma pessoa anda e, assim, 
será possível verificar um movimento curvo.
A Figura 4 exemplifica tal conceito com uma perna chutando uma bola. 
Repare como o movimento se faz circular e tente imaginar como ele não 
ficaria natural se a linha de movimento fosse reta.
Figura 4 – Exemplo de movimento em arco
Fonte: elaborada pelo autor.
1.8 Ação secundária
Esse princípio indica que as ações feitas por uma personagem podem ter 
seu significado reforçado pelo uso de ações complementares, chamadas 
de secundárias (ou secondary actions). Podemos dar como exemplos 
uma pessoa correndo e tentando segurar o chapéu, ou uma pessoa 
assustada que coloca as mãos na cabeça. Existe um grande desafio 
nesse uso, pois a ação secundária precisa ser mantida em segundo 
plano enquanto a ação principal acontece, não podendo competir pela 
atenção do público. Caso isso ocorra, pode-se dizer que a ação foi uma 
escolha errada para aquele momento, ou que não foi bem elaborada 
seguindo o princípio de encenação (THOMAS; JOHNSTON, 1995, p. 64).
45
1.9 Temporização ou sincronização
O nono princípio, chamado de temporização (ou timming), indica que 
a expressão de um movimento é afetada pela quantidade de frames 
existentes para sua realização (THOMAS; JOHNSTON, 1995, p. 65). Apesar 
de parecer uma ideia simples, é possível transmitir diferentes emoções 
à medida que um movimento é feito mais rápido (poucos frames) ou 
mais devagar (mais frames). Em outras palavras, o timming “pode sugerir 
rapidez ou lentidão, sutileza ou impacto, peso ou leveza em uma ação. 
O timming pode dar significado a um movimento ou aumentar a tensão” 
(WHITE, 2006, p. 213).
Tomemos o exemplo de uma pessoa se levantando do sofá. Essa ação 
pode ter várias ideias diferentes sendo transmitidas caso seja feita com 
2 frames intermediários ou 15 frames intermediários. Outro exemplo é 
uma pessoa andando; caso seja um movimento com muitos frames, irá 
se tornar devagar, dando uma ideia de tranquilidade. Por outro lado, 
com poucos frames, pode trazer uma ideia de pressa.
A Figura 5 mostra um exemplo da movimentação de uma bolinha 
pingando, cada vez com uma quantidade diferente de frames. É 
importante perceber que, conforme quantidade de frames, uma mesma 
ação, seguindo um mesmo caminho, pode expressar diferentes ideias. 
Além disso, uma quantidade pode deixar o movimento mais natural 
do que a outra, o que será mais bem verificado quando a animação for 
testada passando frame a frame no preview do software de animação.
46
Figura 5 – Exemplo de timming com uma bolinha pingando
Fonte: elaborada pelo autor.
É importante ressaltar que esse princípio é relacionado ao uso da técnica 
“uns” (ones) e “dois” (twos), também chamada de “simples” e “duplos” 
(WILLIAMS, 2019, p. 78). Animar em ones quer dizer que cada frame de 
um movimento dura o tempo normal de um frame, enquanto animar 
em twos significa que cada frame desenhado terá a duração de dois 
frames na execução do filme. Ou seja, em um segundo com taxa de 24 
FPS (frames por segundo), haverá 24 frames, caso a animação seja feita 
em ones, ou 12, caso seja feita em twos. Dessa maneira, ações rápidas 
podem ser feitas em ones, enquanto ações com um tempo mais comum 
podem ser feitas em twos.
1.10 Exagero
O princípio exagero (ou exaggeration) traz um ponto curioso a respeito 
de como um desenho animado deveria ser feito de acordo com Walt 
Disney. Conforme foi comentado na introdução, Disney buscava chegar 
à ideia de “ilusão da vida”, trazendo maior realismo e organicidade às 
personagens (THOMAS; JOHNSTON, 1995, p. 66). Ao mesmo tempo, 
47
queria que elas tivessem algumas ações exageradas, de modo a 
trazer maior credibilidade à ação. Por exemplo, um personagem 
triste precisaria mostrar de maneira exagerada que estava triste. Esse 
princípio foi levado ao extremo por outros estúdios, trazendo uma ideia 
caricaturesca às movimentações, a exemplo dos desenhos dos Looney 
Tunes dos estúdios Warner Brothers.
A Figura 6 exemplifica o exagero de uma expressão de surpresa levada 
ao extremo. Repare em como a face da personagem é esticada de 
maneira exagerada e cartunesca, de modo que mostra a emoção de 
maneira clara. Além disso, pode-se dizer que aqui também é usado o 
primeiro princípio (comprimir e esticar).
Figura 6 – Exemplo de uma expressão usando exagero
Fonte: seamartini/iStock.com.
48
11. Desenho sólido
O princípio de desenho sólido (ou solid drawing), também chamado de 
desenho volumétrico, aborda a necessidade de não criar personagens 
com formas planas, mas sim aplicar princípios de perspectiva e desenho 
tridimensional, por meio dos conceitos de peso, profundidade e 
equilíbrio (THOMAS; JOHNSTON, 1995, p. 67).
Diversas dicas podem ser dadas aqui, como evitar traçar uma 
personagem com os membros de maneira simétrica, ou lembrar de 
sempre trabalhar com perspectiva nas movimentações. Além disso, 
deve-se evitar movimentos espelhados, como os dois braços se 
moverem da mesma maneira no ar, ou seja, cada braço pode se mover 
para direções diferentes ou até mesmo realizar movimentos diferentes.
A Figura 7 ilustra bem esse ponto. Mesmo sendo uma imagem em duas 
dimensões, há profundidade, assimetria na posição dos membros do 
corpo. Cria-se a ideia de profundidade, além de movimento e ação, 
mesmo que seja uma imagem estática.
Figura 7 – Exemplo de ilustração com perspectiva
Fonte: dino4/iStock.
49
12. Apelo
Por fim, o princípio de apelo (ou appeal) pode se aproximar do carisma 
de um ator de carne e osso. O apelo aqui é abordado no sentido 
de uma personagem gerar interesse no público, possuir um certo 
“magnetismo”. Independentemente de ser um herói ou vilão, deve fazero público se interessar em saber mais sobre a personagem, o que pode 
ser produzido por meio de um desenho que seja complexo para ser 
interpretado, ao mesmo tempo que seja uma construção visual simples 
(THOMAS; JOHNSTON, 1995, p. 68).
2. Breve conclusão
Sem dúvidas, esses conceitos são muito úteis para a elaboração de 
animações, não se restringindo à criação de personagens. Os princípios 
de aceleração e desaceleração e timming são comumente usados nas 
áreas de motion graphics e design de interfaces. Além disso, é sempre 
importante salientar que não se trata de regras que, caso não sejam 
seguidas, tornem o trabalho “errado”. Esses princípios devem ser 
encarados como guias que vão aproximar a animação do que esperava 
Walt Disney. Assim como qualquer técnica artística, é importante o seu 
domínio para decidir quais princípios serão usados ou não. Pode-se, 
inclusive, ir adiante ou não os seguir e verificar quais são os resultados.
50
Referências
BARBOSA JÚNIOR, Alberto Lucena. Arte da animação: técnica e estética através da 
história. São Paulo: Senac, 2005.
THOMAS, Frank; JOHNSTON, Ollie. The illusion of life: Disney animation. New York: 
Hyperion, 1995.
WHITE, Tony. Animation from Pencils to Pixels: classical techniques for digital 
animators. Waltham: Focal Press, 2006.
WILLIAMS, Richard. Manual de animação: manual de métodos, princípios e 
fórmulas para animadores clássicos, de computador, de jogos, de stop motion e de 
internet. São Paulo: Senac, 2019.
51
Animação com keyframes
Autoria: Felipe Orsini Martinelli
Leitura crítica: Luís Gustavo Luz
Objetivos
• Compreender a importância da tecnologia digital na 
animação.
• Diferenciar os tipos de imagem a serem usados em 
uma animação, conforme as necessidades técnicas 
do projeto.
• Utilizar a técnica de animação por keyframes para a 
produção de diversos tipos de movimentação em 
objetos e personagens.
52
1. Introdução
O surgimento do computador trouxe inúmeras vantagens à área da 
animação. Seu uso pode ser definido por dois momentos. O primeiro 
é considerado “um período pioneiro, de grande esforço científico, em 
que se estabelecem conceitos gráficos digitais básicos (modelagens, 
mapeamentos, iluminação, técnicas de render, modelos de cor, sistemas 
de animação, etc.)” (BARBOSA JÚNIOR, 2005, p. 159). Já o segundo 
período é de aprimoramento do meio, o que foi possível com a criação 
de softwares específicos para essa tarefa. Esses softwares evoluíram 
com o passar dos anos e, com a evolução do computador doméstico, 
muitos programas se tornaram disponíveis para o uso pessoal, ou seja, 
não é necessário um estúdio com uma grande estrutura técnica para 
criar projetos de animação.
Esse uso de tecnologia permitiu que as produções tivessem o tempo 
de elaboração e custo reduzidos. Assim, em vez de se fazer o processo 
tradicional de animação (desenhar no papel, copiar no acetato, pintar 
com tinta e fotografar para a película), no computador é possível 
trabalhar do rascunho até a obra final em bem menos tempo e 
com menor custo. Isso sem contar as técnicas que são próprias do 
computador, como a geração de modelos tridimensionais.
2. Animação por keyframes
Nos estúdios profissionais de animação, como Disney e Hanna Barbera, 
foi pensado um fluxo de trabalho dividido em várias etapas. Na 
elaboração dos frames, ou quadros, havia o animador-chefe, que traçava 
os frames principais dos movimentos, e depois o animador-assistente, 
que, entre os frames principais, traçava os intermediários, também 
chamados de in-between frames. Com a evolução tecnológica, criou-se 
esse mesmo conceito nos softwares de animação: são dados os frames 
53
principais, além de alguns parâmetros para seguir, e o computador 
cria os intermediários, por meio do processo chamado interpolação 
(BARBOSA JÚNIOR, 2005, p. 314).
Para se trabalhar com esse tipo de animação, é muito importante 
conhecer alguns conceitos que permeiam o meio digital, como 
coordenadas, ponto âncora e as principais transformações que podem 
ser reproduzidas com o uso de keyframes, ou quadros-chave. Dessa 
forma, qualquer animação que venha a ser produzida precisará de, no 
mínimo, dois keyframes, um inicial e um final (JÚNIOR; CARMO, 2017, p. 
21).
2.1 Coordenadas no espaço
Consideremos uma folha de papel em que se pode desenhar um objeto. 
Essa folha pode ser dividida em linhas e colunas de espaçamento igual, 
criando uma malha quadriculada. Pode-se também numerar as linhas e 
as colunas a partir de uma das pontas da folha de papel. Normalmente, 
o canto superior esquerdo (em alguns casos o canto superior direito) 
é utilizado como o ponto inicial, ou ponto de origem, que serão a linha 
0 e coluna 0. A posição de um objeto nessa folha sempre poderá ser 
representada por dois números, um referente à linha e o outro à coluna 
em que se localiza. Assim como acontece na representação matemática 
do chamado plano cartesiano, o número da coluna será representado 
por x e a linha por y. Em outras palavras, um objeto qualquer no espaço 
digital terá sempre uma posição determinada por x e y, que são os eixos, 
o que pode ser mostrado também como (0, 0) com os valores de (x, y). 
Em cenários 3D, existirá ainda o eixo z, para a profundidade. A partir 
disso, um objeto pode se movimentar pelo ambiente, passado de um 
ponto para outro.
A Figura 1 exemplifica essa situação, considerando que um objeto 
irá do ponto A até o ponto B. No processo de interpolação linear, o 
54
computador irá traçar uma linha reta entre os dois pontos e inserir os 
frames intermediários entre as duas posições. Um detalhe importante é 
que, no meio digital, costuma-se iniciar a contagem das linhas e colunas 
pelo zero. Assim, na imagem há 14 linhas, indo de 0 a 13, e 7 colunas, 
indo de 0 a 6.
Figura 1 – Exemplo de um plano quadriculado com dois pontos
Fonte: elaborada pelo autor.
 
2.2 Transformações básicas
A partir da posição espacial dos objetos, é possível realizar 
movimentações. Há quatro tipos básicos de transformação no espaço. 
O primeiro tipo é o deslocamento, o qual pode ser apontado como a 
movimentação de objetos pela tela, indo de um ponto A a um ponto B. Já 
o segundo é a escala, em que objetos podem ter sua proporção alterada 
para mais ou menos, ou seja, o objeto pode ser ampliado ou reduzido. 
Um ponto importante sobre a escala é que ela pode ser feita apenas em 
um dos eixos, e, caso sejam usados valores negativos, o objeto ficará 
espelhado. Em terceiro lugar, temos a rotação, que serve para girar 
55
os objetos na tela. Por fim, uma transformação menos utilizada é o 
cisalhamento, o qual deforma a imagem tendo um dos eixos como base.
A Figura 2 exemplifica as quatro transformações citadas.
Figura 2 – Exemplo das transformações espaciais
Fonte: elaborada pelo autor (imagem do cachorro por GraphicMama-team–https://pixabay.
com/illustrations/dog-animal-corgi-beagle-bolonka-1417208/).
Essas transformações, em especial a escala e a rotação, precisam de 
um ponto de referência para acontecerem. Esse ponto, que costuma 
ser indicado pelos softwares com um ícone específico, é chamado de 
ponto âncora, ou anchor point. Assim, um quadrado que é rotacionado 
em torno de seu centro, com o anchor point centralizado, realizará um 
movimento distinto de um quadrado que rotacione com o anchor point 
em uma das pontas.
 
2.3 Tipos de imagem
Outra propriedade importante na produção de animações digitais é 
em relação aos tipos de imagem. A imagem no computador pode ser 
dividida em dois tipos, conforme a maneira com que é armazenada. A 
primeira é o mapa de bits, ou bitmap. Imagine um plano quadriculado 
em que cada quadrado corresponde a um pixel da imagem e possui 
uma informação de cor. Dessa forma, os pixels se organizam em 
linhas e colunas para compor a imagem, como se fosse uma tabela 
56
com cada célula de uma cor específica. Por outro lado, há as imagens 
vetoriais, que são armazenadas por meio de instruções matemáticas 
para o computador traçar os desenhos. Emoutras palavras, são dadas 
coordenadas para o computador desenhar formas com um contorno e 
um preenchimento específicos.
Uma grande diferença entre os dois tipos de imagens é em relação à 
resolução, algo que interfere na qualidade gráfica de um objeto dentro 
de uma cena de animação. Uma imagem vetorial pode ser ampliada 
indefinidamente e não perderá a resolução, já que seus traços são 
sempre recalculados e redesenhados. Assim, uma pedra que esteja 
voando em direção ao espectador, trabalhando dessa forma com 
a transformação de escala, sempre estará com a imagem com boa 
resolução.
Por outro lado, a imagem matricial tem um limite para a ampliação, já 
que possui informação limitada de cores em seus pixels. Caso a imagem 
da pedra ampliada seja matricial, será possível ver os pixels, ou será 
desfocada pelo software para tentar “disfarçar” esse problema. A Figura 
3 mostra essa diferença ao ampliar uma imagem de cada tipo. Repare 
como a fotografia fica quadriculada, ou “pixelada”, quando ampliada, 
enquanto a imagem vetorial não possui alteração na qualidade da 
resolução.
57
Figura 3 – Comparação entre imagens vetoriais e matriciais
Fonte: elaborada pelo autor (ilustração do cachorro por GraphicMama-team–https://
pixabay.com/illustrations/dog-animal-corgi-beagle-bolonka-1417208/ e fotografia do 
cachorro por Chiemsee2016–https://pixabay.com/photos/puppy-golden-retriever dog-
1207816/).
Por conta dessas propriedades, as imagens matriciais são ideias para 
armazenar fotografias e desenhos muito detalhados e próximos de 
uma estética visual realista; já as imagens vetoriais são ideais para 
personagens e objetos estilizados, cenários chapados e construções 
geométricas. Por conta de, em uma imagem vetorial, as personagens 
serem determinadas por pontos inseridos em um plano quadriculado, 
é possível alterar a posição desses pontos, criando mudanças na 
forma dos elementos, como uma caixa que cai no chão e se deforma 
levemente. A esse conceito é dado o nome de animação vetorial.
 
3. Animação vetorial e marionetes
Conforme explicado anteriormente, a animação vetorial consiste em 
trabalhar com imagens vetoriais, aproveitando a sua propriedade de 
ser composta por pontos. Tomemos o exemplo de uma personagem 
andando. Caso a cena fosse animada seguindo as técnicas de animação 
frame a frame, ou seja, todos os frames sendo desenhados, seria 
58
necessária a elaboração de vários desenhos da mesma personagem. No 
caso da animação vetorial, é possível realizar esse tipo de movimentação 
criando a personagem apenas uma vez, para depois mover o seu corpo, 
mudando a posição dos pontos que constituem a sua imagem vetorial.
Apesar disso, em ferramentas como o After Effects, é possível criar efeitos 
similares com imagens matriciais também, por meio da ferramenta de 
marionetes, a qual trabalha com pinos (ADOBE, [s.d.]). Tal ferramenta 
faz com que a imagem seja decomposta em uma malha de pequenos 
triângulos, em que serão inseridos pinos de tipos diferentes, com 
cada tipo exercendo uma função (Figura 4). Conforme esses pinos são 
inseridos, o software recalcula a malha de triângulos para ajustar a 
imagem conforme a quantidade de pinos que existem nela.
Figura 4 – Exemplo do uso de pinos em uma camada do After Effects.
Fonte: captura de tela da aplicação no sistema operacional Windows 10.
59
 
4. Aplicação de keyframes no After Effects
O Adobe After Effects é uma ferramenta voltada para a pós-produção de 
vídeos, efeitos especiais e criação de animações. Dentro desse último 
objetivo citado, possui recursos que permitem desde a animação de 
personagens até a criação de peças de motion design elaboradas. A 
interface da ferramenta, assim como a maioria dos softwares da Adobe, 
trabalha com a divisão por abas, cada uma com a sua funcionalidade 
específica.
Uma das abas mais importantes é a linha do tempo (ou timeline), 
que mostra as camadas do projeto e as ações que ocorrem durante 
essas camadas com o passar do tempo da animação. Na Figura 5, 
há 2 keyframes, representados por dois losangos, na propriedade de 
posição (position). Sem olhar a animação, pode-se supor que há uma 
transformação de deslocamento entre esses dois keyframes, com o 
valor mostrado ao lado de position sendo alterado conforme o indicador 
de tempo se aproxima do segundo keyframe. Aqui é importante 
ressaltar que o uso de keyframes não se dá apenas nas propriedades 
de transformação de objetos, mas podem ser aplicados em qualquer 
propriedade que possa se modificar com o passar do tempo. Seu uso 
se dá pela ativação do chamado stopwatch, que é um relógio do lado do 
nome das propriedades.
60
Figura 5 – Indicação de keyframes na linha do tempo do After 
Effects.
Fonte: captura de tela da aplicação no sistema operacional Windows 10.
Um ponto importante sobre os keyframes são suas propriedades. Os 
keyframes mostrados na Figura 5 são do tipo linear, o que quer dizer 
que, entre eles, o caminho traçado terá uma movimentação uniforme, 
com um gráfico de velocidade linear. Em outras palavras, o objeto irá se 
mover sem variação de velocidade.
Consideremos aqui um dos princípios da animação propostos 
pelos animadores dos Estúdios Disney, chamado de aceleração e 
desaceleração (ou slow in e slow out). É dito que a velocidade de um 
objeto deve variar entre dois pontos, para que a animação se torne 
menos robótica (THOMAS; JOHNSTON, 1995, p. 62). Além desse ponto, é 
importante considerar que há uma tendência de movimentação em que 
objetos costumam iniciar um movimento de maneira devagar, acelerar 
e depois desacelerar antes de parar por completo. Esse princípio pode 
ser facilmente atendido com a mudança dos keyframes, de modo que 
o gráfico de velocidade seja alterado. Para isso, é importante discutir 
sobre os gráficos do After Effects.
Existem dois gráficos, um de valor e outro de velocidade. O gráfico de 
valor irá variar o que mede de acordo com a propriedade à qual está 
atrelado. Caso esteja na propriedade de escala, irá mostrar o valor de 
61
escala em porcentagem, mas, se estiver na propriedade de posição, irá 
mostrar os valores x e y de posição na tela.
Na Figura 6, é possível ver a diferença entre os keyframes lineares e os 
chamados easy ease, os quais produzem um movimento que começa 
devagar, acelera e desacelera. Perceba que o valor da posição é alterado 
de maneira linear no primeiro caso, e cria uma curva no segundo caso. 
Essa curva indica uma maior suavidade no movimento. No gráfico 
de velocidade acontece o mesmo: no primeiro caso, a velocidade é 
representada por uma linha reta, o que traz um movimento constante; já 
no segundo caso, há uma parábola, o que faz uma movimentação mais 
orgânica, uma vez que começa com velocidade zero, acelera, desacelera 
e volta ao zero.
Outra consideração a ser feita é de que a linha verde dos gráficos 
corresponde ao eixo y. Verifique que a linha é mantida no valor para y, o 
que quer dizer que o objeto está se movendo apenas para o lado, e não 
para cima ou para baixo. Esse tipo de interpretação do gráfico auxilia 
na economia de tempo na elaboração de uma animação, pois reduz a 
quantidade de vezes que a animação precisa ser testada para ajustar a 
velocidade da movimentação.
Figura 6 – Comparação entre gráficos do After Effects.
Fonte: capturas de tela da aplicação no sistema operacional Windows 10.
Com a variação no movimento, é possível criar animações mais 
orgânicas, como no caso clássico de uma bolinha pingando (Figura 7). O 
62
caminho que a bolinha irá fazer é mostrado por uma linha traçada entre 
três pontos, que são os keyframes desse movimento. A linha nesse caso 
é curva, mas pode ser traçada e editada conforme o projeto, usando a 
ferramenta de caneta para a edição de vetores (a pen tool).
Figura 7 – Caminho traçado de movimentação no After Effects
Fonte: captura de tela da aplicação no sistema operacional Windows 10.
Apesar de a movimentação realizar uma curva no espaço, a velocidade 
com que tal movimento é feitoirá interferir diretamente na impressão 
do movimento. Assim, é possível criar várias combinações de keyframes, 
sempre verificando como são interpolados os frames intermediários e a 
velocidade entre eles.
Na Figura 8, há algumas dessas possibilidades. Na primeira, o 
movimento começa com variação, é mantido no segundo keyframe 
e varia novamente até o terceiro. Na segunda, o movimento acelera 
e desacelera entre o primeiro e o segundo keyframes e depois faz o 
mesmo entre o segundo e o terceiro. Já a terceira possibilidade trabalha 
com o movimento constante entre os três pontos.
63
Figura 8 – Exemplos de keyframes no After Effects
Fonte: combinação de capturas de tela da aplicação no sistema operacional Windows 10.
Os keyframes ease podem ser separados em ease in, ease out e easy ease, 
e cada um trabalhará com a aceleração de maneira diferente. Além 
destes, pode ser citado também o tipo hold, que irá manter o valor de 
uma propriedade até que o tempo de execução chegue à posição do 
próximo keyframe. Depois temos o continous, que irá inserir um terceiro 
keyframe entre dois selecionados, a fim de criar uma movimentação um 
pouco mais suave, mantendo a velocidade.
Para concluir, pode-se dizer que é possível criar várias combinações de 
movimento, ajustando os tipos de keyframes, a velocidade entre eles, o 
deslocamento dos objetos dentro do plano quadriculado, entre outras 
propriedades. A partir dessas técnicas, aliadas às técnicas da animação 
tradicional, é possível criar vários projetos tanto de motion design quanto 
de movimentação de personagens.
Referências
ADOBE. After Effects User Guide: Animating with Puppet tools. [s.d.]. Disponível 
em: https://helpx.adobe.com/after-effects/user-guide.html/after-effects/using/
animating-puppet-tools.ug.html. Acesso em: 20 jan. 2021.
BARBOSA JÚNIOR, Alberto Lucena. Arte da animação: técnica e estética através da 
história. São Paulo: Senac, 2005.
JÚNIOR, Anibal C.; CARMO, Liana. Adobe After Effects CC. São Paulo: Senac, 2017.
THOMAS, Frank; JOHNSTON, Ollie. The illusion of life: Disney animation. New York: 
Hyperion, 1995.
64
BONS ESTUDOS!
	Sumário
	Evolução histórica e técnica da animação
	Objetivos
	1. Introdução
	2. A Ilusão de Movimento
	3. Brinquedos Ópticos
	4. Primeiras animações criadas
	5. Evolução das técnicas de animação
	6. A animação digital
	7. A relação entre a animação e outras mídias
	Referências
	Técnica de desenho frame a frame
	Objetivos
	1. Introdução
	2. Conceitos técnicos
	3. A respeito das técnicas de desenho
	4. Animação frame a frame
	5. Modos de animar
	6. Uso de softwares para a animação frame a frame
	Referências
	Os 12 Princípios da Animação
	Objetivos
	1. Introdução
	2. Breve conclusão
	Referências
	Animação com keyframes
	Objetivos
	1. Introdução
	2. Animação por keyframes
	3. Animação vetorial e marionetes 
	4. Aplicação de keyframes no After Effects 
	Referências