EuraStudy
Resumos/Aplicações Informáticas B/Tipos de media dinâmicos: animação
Resumos · Aplicações Informáticas BPT · Secundário

Tipos de media dinâmicos: animação

Estuda-se a animação: os princípios que criam a ilusão de movimento (persistência da visão, fotograma, fps); a animação fotograma a fotograma vs a interpolação (tweening) por keyframes e inbetweens; a distinção entre animação 2D e 3D (modelação, malhas, texturas, rendering); e as técnicas, formatos e aplicações. Tópico da unidade de Multimédia de Aplicações Informáticas B (12.º ano), disciplina de opção sem Exame Nacional, avaliada internamente.

4 secções·~11 min de leitura·4 competências·Nível Base 1 · Padrão 3

T·0888 / 9
Perfil de exame
Explicar como a sequência de fotogramas cria movimentoDistinguir animação fotograma a fotograma de interpolação e calcular inbetweensDistinguir animação 2D de 3DReconhecer técnicas, formatos e aplicações da animação
Operadores:explicadistinguecalculainterpolacomparaidentifica

nível básico

Reconhecer o princípio da animação e distinguir fotograma a fotograma de interpolação e 2D de 3D.

nível avançado

Calcular fotogramas intermédios por interpolação e caracterizar o processo de animação 3D.

Profundidade

Profundidade de leitura: Aprofundado

Texto

Tamanho do texto: Padrão

Conteúdo · 4 secções▾
  1. Tipos de media dinâmicos: animação
    • 01Princípios da animação○
    • 02Fotograma a fotograma vs interpolação (tweening)◐
    • 03Animação 2D e 3D◐
    • 04Técnicas, formatos e aplicações◐
§ 01

Princípios da animação#

●○○BaseLPAE-aplicacoes-informaticas-b-12-media-animacao

Pontos-chave

Animação é a criação da ilusão de movimento a partir de uma sequência de imagens fixas — os fotogramas — ligeiramente diferentes, apresentadas em rápida sucessão (Fig. 1). O mecanismo percetivo é o mesmo do vídeo: a persistência da visão e a perceção de movimento (fenómeno phi) fazem o cérebro «unir» imagens sucessivas num movimento contínuo. A diferença face ao vídeo é a origem: o vídeo capta o real; a animação constrói cada fotograma (desenho, modelo, objeto).

Fotogramas em sequência criam movimento

Sequência de fotogramasGrafo, Fotograma 1 → Fotograma 2, Fotograma 2 → Fotograma 3, Fotograma 3 → Movimento percebidoFotograma 1Fotograma 2Fotograma 3Movimentopercebido
Fig. 1Fig. 1 — Uma sucessão rápida de fotogramas ligeiramente diferentes é percebida como movimento contínuo.
Tal como no vídeo, a fluidez depende da taxa de fotogramas (fps). Historicamente, a animação tradicional trabalhava a 24 fps, por vezes com «twos» (cada desenho mantido durante 2 fotogramas, 12 desenhos por segundo, para poupar trabalho sem perder muita fluidez). Poucos fotogramas por segundo dão um movimento «aos saltos»; muitos dão fluidez, à custa de mais imagens a produzir.
A ideia é antiga: o flipbook (livro de folhear), o taumatrópio e o zootrópio já exploravam, no século XIX, a ilusão de movimento por imagens sucessivas — os antepassados diretos do cinema e da animação. O princípio nunca mudou; mudaram as ferramentas, do desenho à mão ao computador.
A animação é, então, um medium dinâmico (temporal), que herda os conceitos de fotograma e fps do vídeo mas em que cada fotograma é sintetizado. Essa síntese pode fazer-se de duas maneiras — desenhar/construir cada fotograma, ou deixar o computador calcular os intermédios —, o que dá origem à distinção central do tópico seguinte.
Exemplo resolvido

Duração de uma animação

Uma animação tem 120 fotogramas e é reproduzida a 24 fps. Quanto tempo dura? E a 12 fps?

  1. 01A 24 fps

    120 ÷ 24 = 5 segundos.

  2. 02A 12 fps

    120 ÷ 12 = 10 segundos (o dobro do tempo, movimento menos fluido).

  3. 03Leitura

    Para a mesma contagem de fotogramas, menos fps = mais duração e menos fluidez.

Resultado: 5 s a 24 fps; 10 s a 12 fps. A relação é duração = nº de fotogramas ÷ fps.

Foco no Exame Nacional

  • Explicar a ilusão de movimento (persistência da visão) e o papel da taxa de fotogramas na animação.
  • Distinguir animação de vídeo pela origem sintetizada de cada fotograma.

Erros frequentes

  • Classificar a animação como medium estático — é dinâmico (temporal), pois depende do tempo, como o vídeo e o áudio.
  • Confundir animação com vídeo: ambos são sequências de fotogramas, mas na animação cada fotograma é criado, não captado.

Revisão ativa

Explica, com o exemplo de um flipbook, como uma sequência de desenhos cria a ilusão de movimento, e o que muda se folheares mais depressa ou mais devagar.

Evocação ativa

Recorda os pontos-chave — depois revela.

Fontes: Aprendizagens Essenciais de Aplicações Informáticas B — 12.º ano (DGE) (Direção-Geral da Educação (DGE))

§ 02

Fotograma a fotograma vs interpolação (tweening)#

●●○PadrãoLPAE-aplicacoes-informaticas-b-12-media-animacao

Pontos-chave

Há duas grandes formas de produzir os fotogramas de uma animação. Na animação fotograma A fotograma (frame-by-frame), cada fotograma é criado individualmente — desenhado, ou fotografado no caso do stop-motion (objetos reais movidos um pouco entre fotografias). Dá controlo total e um resultado muito expressivo, mas é extremamente trabalhosa: um segundo a 24 fps exige 24 imagens.
Na animação por interpolação (tweening, de in-betweening), o animador define apenas alguns fotogramas-chave (keyframes) — as posições/estados importantes — e o computador calcula automaticamente os fotogramas intermédios (inbetweens) entre eles (Fig. 2). Poupa enormemente trabalho: em vez de desenhar tudo, indicam-se o início e o fim de um movimento e a máquina gera a transição. É a base da animação vetorial 2D e das animações de interface.

Interpolação linear entre dois keyframes

Interpolação linearGráfico de posição, zeros em x = 0, ordenada na origem y = 0, crescente, no intervalo x de 0 a 1024681020406080100keyframe (0)inbetweeninbetweenkeyframe (10)posiçãoposiçãofotograma
Fig. 2Fig. 2 — Interpolação linear: entre os keyframes (frame 0 e frame 10), o valor cresce a ritmo constante; os inbetweens estão sobre a reta.
A forma mais simples de interpolação é linear: uma propriedade (posição, tamanho, opacidade) varia a um ritmo constante entre dois keyframes. Se num keyframe a propriedade vale «v0» (no fotograma inicial) e no seguinte vale «v1» (T fotogramas depois), o valor no fotograma «t» intermédio é «v0 + (v1 − v0) × (t/T)». Há interpolações não-lineares (easing — aceleração/desaceleração) que dão movimentos mais naturais.
Uma ajuda clássica é o onion skinning («pele de cebola»): mostrar, translúcidos, os fotogramas anterior e seguinte enquanto se desenha o atual, para manter a continuidade do movimento. Na prática, combinam-se as abordagens: interpolação para os movimentos regulares, fotograma a fotograma para os detalhes expressivos que a interpolação não capta.
v=v0+(v1−v0)⋅tTv = v_{0} + (v_{1} - v_{0})\cdot\dfrac{t}{T}v=v0​+(v1​−v0​)⋅Tt​

Interpolação linear (inbetween)

v0 e v1 são os valores nos dois keyframes; T é o número de fotogramas entre eles; t é o fotograma intermédio (0 ≤ t ≤ T).

Exemplo resolvido

Calcular inbetweens por interpolação linear

Um objeto vai de x = 0 (fotograma 0) a x = 100 (fotograma 10) por interpolação linear. Determina a posição nos fotogramas 4 e 7.

  1. 01Fórmula

    v = v0 + (v1 − v0)·(t/T), com v0 = 0, v1 = 100, T = 10.

  2. 02Fotograma 4

    v = 0 + 100 × (4/10) = 40.

    v=0+100⋅410=40v = 0 + 100\cdot\dfrac{4}{10} = 40v=0+100⋅104​=40
  3. 03Fotograma 7

    v = 0 + 100 × (7/10) = 70.

Resultado: Fotograma 4 → x = 40; fotograma 7 → x = 70. O computador gera estes inbetweens; o animador só definiu os keyframes 0 e 10.

Foco no Exame Nacional

  • Distinguir animação fotograma a fotograma de interpolação (keyframes + inbetweens) e as suas vantagens.
  • Calcular um fotograma intermédio por interpolação linear entre dois keyframes.

Erros frequentes

  • Pensar que o computador «inventa» todos os fotogramas na interpolação — ele calcula apenas os intermédios entre keyframes definidos pelo animador.
  • Aplicar a fórmula de interpolação sem normalizar pelo número de fotogramas (usar t/T), obtendo valores fora do intervalo.

Revisão ativa

Um objeto está em x = 20 no keyframe do fotograma 0 e em x = 120 no keyframe do fotograma 20. Por interpolação linear, qual é a posição no fotograma 5? E no fotograma 15?

Evocação ativa

Recorda os pontos-chave — depois revela.

Fontes: Aprendizagens Essenciais de Aplicações Informáticas B — 12.º ano (DGE) (Direção-Geral da Educação (DGE))

§ 03

Animação 2D e 3D#

●●○PadrãoLPAE-aplicacoes-informaticas-b-12-media-animacao

Pontos-chave

A animação 2D decorre num plano (duas dimensões): as personagens e cenários são desenhos (vetoriais ou bitmap) ou sprites, e o movimento faz-se no plano da imagem (Fig. 3). É a linguagem da animação tradicional e de muita animação web e de jogos. É relativamente leve de produzir e reproduzir e tem uma estética gráfica característica.

Animação 2D vs 3D

2D vs 3DTabela com 3 colunas e 4 linhas, Dados: Aspeto · Animação 2D · Animação 3D; Espaço · plano (2 dimensões) · espaço (3 dimensões); Elementos · desenhos, sprites · malhas, texturas, luzes, câmaras; Processo-chave · desenho / interpolação no plano · modelar, texturizar, rig, renderizar; Exigência · mais leve · muito cálculo (rendering)ASPETOANIMAÇÃO 2DANIMAÇÃO 3DEspaçoplano (2 dimensões)espaço (3 dimensões)Elementosdesenhos, spritesmalhas, texturas, luzes,câmarasProcesso-chavedesenho /interpolação noplanomodelar, texturizar, rig,renderizarExigênciamais levemuito cálculo (rendering)
Fig. 3Fig. 3 — Animação 2D (plano, desenhos/sprites) vs 3D (espaço, malhas, texturas, rendering).
A animação 3D trabalha num espaço tridimensional. O processo é bem mais complexo: primeiro modela-se cada objeto como uma malha (mesh) de vértices, arestas e faces (polígonos); aplicam-se texturas e materiais à superfície; define-se a iluminação e as câmaras; e, para personagens, monta-se um esqueleto (rigging) que permite animá-las. Finalmente, o computador calcula as imagens finais por renderização (rendering) — um processo que pode ser muito pesado (horas por fotograma em produções de cinema).
A grande vantagem do 3D é que, uma vez construída a cena, se pode filmá-la de qualquer ângulo, com iluminação realista, e reutilizar os modelos. Em troca, exige mais competências (modelação, texturização, rigging) e muito mais poder de cálculo, sobretudo no rendering. O 2D é mais direto e leve; o 3D dá profundidade, realismo e flexibilidade de câmara.
Ambos usam os mesmos princípios de base (fotogramas, fps, keyframes e interpolação): no 3D interpolam-se as posições dos ossos e dos objetos no espaço; no 2D, as propriedades dos desenhos no plano. A escolha entre 2D e 3D é estética e prática — depende do estilo pretendido, do orçamento, do tempo e das competências da equipa.
Exemplo resolvido

Etapas da animação 3D

Coloca por ordem as etapas de animar uma personagem 3D: rendering; rigging; modelação; texturização; animação (keyframes).

  1. 011 — Modelação

    Construir a malha (mesh) de polígonos que define a forma da personagem.

  2. 022 — Texturização

    Aplicar texturas/materiais e definir a superfície (cor, brilho).

  3. 033 — Rigging e animação

    Montar o esqueleto (rig) e animar por keyframes/interpolação as poses.

  4. 044 — Rendering

    Calcular os fotogramas finais com iluminação e câmara — a etapa mais pesada.

Resultado: Ordem: modelação → texturização → rigging/animação → rendering. Cada etapa depende da anterior; o rendering é o passo final e mais exigente.

Foco no Exame Nacional

  • Distinguir animação 2D de 3D quanto ao espaço, ao processo e às exigências.
  • Descrever as etapas da animação 3D (modelação/malha, texturas, rigging, rendering).

Erros frequentes

  • Achar que «3D» significa apenas «mais realista» — envolve um processo próprio (modelação, texturas, rigging, rendering) e muito mais cálculo.
  • Confundir modelação (construir a malha do objeto) com renderização (calcular a imagem final a partir da cena).

Revisão ativa

Ordena e explica as etapas de produção de uma personagem em animação 3D, desde a malha até ao fotograma final. Indica uma vantagem e uma desvantagem do 3D face ao 2D.

Evocação ativa

Recorda os pontos-chave — depois revela.

Fontes: Aprendizagens Essenciais de Aplicações Informáticas B — 12.º ano (DGE) (Direção-Geral da Educação (DGE))

§ 04

Técnicas, formatos e aplicações#

●●○PadrãoLPAE-aplicacoes-informaticas-b-12-media-animacao

Pontos-chave

Existem muitas técnicas de animação, para além da divisão 2D/3D. A tradicional (cel), desenhada à mão sobre acetatos; o recorte (cutout), com peças articuladas movidas por partes; o stop-motion, fotografando objetos reais movidos entre fotografias (massa/plasticina — claymation, marionetas, pixilação); a motion capture, que regista o movimento de um ator real por sensores e o aplica a um modelo 3D; e a animação por computador, 2D ou 3D. Muitas produções misturam técnicas.
Os formatos de saída dependem da complexidade e do destino (Fig. 4). Para animações curtas e simples, o GIF animado (raster, 256 cores) e o APNG (raster com transparência) são cómodos na Web. Para animações mais ricas exporta-se como vídeo (MP4 etc.), aproveitando a compressão de vídeo. Para animação vetorial leve e escalável na Web usam-se formatos como o Lottie (JSON) e o SVG animado, ou animações programadas em HTML5/CSS/JavaScript. Nos jogos, usam-se frequentemente sprite sheets (folhas com vários fotogramas).

Formatos de animação

Formatos de animaçãoTabela com 3 colunas e 5 linhas, Dados: Formato · Tipo · Uso típico; GIF animado · raster (256 cores) · animações curtas e simples na Web; APNG · raster com transparência · animações curtas com alfa; Vídeo (MP4) · raster comprimido · animações ricas e longas; Lottie / SVG animado · vetorial · micro-interações, interfaces, escalável; Sprite sheet · raster (fotogramas em folha) · videojogos 2DFORMATOTIPOUSO TÍPICOGIF animadoraster (256 cores)animações curtas e simplesna WebAPNGraster com transparênciaanimações curtas com alfaVídeo (MP4)raster comprimidoanimações ricas e longasLottie / SVG animadovetorialmicro-interações,interfaces, escalávelSprite sheetraster (fotogramas em folha)videojogos 2D
Fig. 4Fig. 4 — Formatos de saída de animação e o seu uso típico.
As aplicações da animação são vastíssimas: cinema e televisão (longas-metragens, séries), publicidade, videojogos, educação e simulação (explicar processos e fenómenos que uma imagem fixa não mostra), visualização científica e de dados, e sobretudo a animação de interfaces (micro-interações, transições) que hoje faz parte de quase todo o software e sítio web.
A escolha da técnica e do formato segue o mesmo critério de todo o trabalho multimédia: adequar os meios ao objetivo, ao público e aos recursos. Uma micro-interação de botão pede uma animação vetorial leve (Lottie/CSS); uma explicação de um processo pode pedir uma animação 2D; uma personagem de cinema pede 3D. Perceber o leque de opções permite decidir com fundamento.
Exemplo resolvido

Escolher técnica e formato

Escolhe a técnica/tecnologia e o formato de saída para: (a) animação de um ícone de interface; (b) curta com plasticina; (c) personagem realista de cinema.

  1. 01(a) Ícone de interface

    Animação vetorial leve e escalável → Lottie/SVG ou CSS (micro-interação).

  2. 02(b) Curta com plasticina

    Técnica stop-motion (claymation); saída como vídeo (MP4).

  3. 03(c) Personagem de cinema

    Animação 3D (modelação, rigging, rendering), eventualmente com motion capture; saída em vídeo de alta qualidade.

Resultado: (a) vetorial/Lottie; (b) stop-motion em vídeo; (c) 3D em vídeo — a técnica e o formato seguem o objetivo e os recursos.

Foco no Exame Nacional

  • Identificar técnicas de animação (tradicional, recorte, stop-motion, motion capture, computador) e distingui-las.
  • Escolher o formato de saída de uma animação conforme a complexidade e o destino.

Erros frequentes

  • Usar GIF animado para uma animação longa e rica em cores — o limite de 256 cores e o tamanho tornam-no inadequado; usa-se vídeo.
  • Confundir stop-motion (fotografar objetos reais movidos) com animação 3D por computador — são técnicas distintas.

Revisão ativa

Indica a técnica e o formato de saída que escolherias para: (a) uma micro-animação de um ícone num sítio web; (b) uma curta com bonecos de plasticina; (c) uma personagem realista para cinema.

Evocação ativa

Recorda os pontos-chave — depois revela.

Fontes: Aprendizagens Essenciais de Aplicações Informáticas B — 12.º ano (DGE) (Direção-Geral da Educação (DGE))

Conteúdo

Secção -- / 04

    • 01Princípios da animação○
    • 02Fotograma a fotograma vs interpolação (tweening)◐
    • 03Animação 2D e 3D◐
    • 04Técnicas, formatos e aplicações◐

0/4 Lidos

Dos resumos à prática

Tipos de media dinâmicos: animação

Consolida este tema com perguntas do banco de perguntas.

~11
min
4
Competências
Praticar

Referências e fontes

Fontes

Direção-Geral da Educação (DGE)

  • Aprendizagens Essenciais de Aplicações Informáticas B — 12.º ano (DGE)

Tópico anterior

Tipos de media dinâmicos: áudio

Tópico seguinte

Gestão e desenvolvimento de projetos multimédia

EuraStudy·Resumos T·08·MMXXVI

Continua com o tópico seguinte: o teu percurso é mantido.