Skip to main content
Nesta página

Contador animado

Um contador animado é um dos elementos mais pedidos em motion design corporativo. Com expressões, você cria uma vez e nunca mais keyframeia número a número.

O conceito

Em vez de keyframear o texto “0, 1, 2, 3…” frame a frame:

  1. Cria um Slider Control que vai de 0 a 100 (com animação suave)
  2. Arredonda o valor do slider
  3. Usa expressão em Source Text para exibir o número atual

Setup

  1. Crie um nulo e nomeie “CONTADOR”
  2. Aplique Effect > Expression Controls > Slider Control
  3. Renomeie o efeito para “Valor”
  4. Crie keyframes: frame 0 = 0, frame 60 = 100 (ou seus valores)
  5. Aplique F9 (Easy Ease) nos keyframes
  6. Crie um text layer e adicione expressão em Source Text
// referencia o slider e arredonda para inteiro
var valor = thisComp.layer("CONTADOR").effect("Valor")("Slider");
Math.round(valor).toString()

O texto exibe o número em tempo real conforme o slider anima.

Formatação: zeros à esquerda

Para exibir 005 em vez de 5:

var valor = thisComp.layer("CONTADOR").effect("Valor")("Slider");
var n = Math.round(valor);
var str = n.toString();


// adiciona zeros à esquerda para sempre ter 3 dígitos
while (str.length < 3) str = "0" + str;
str

Formatação: separador de milhar

Para exibir 1.234.567 com pontos:

var valor = thisComp.layer("CONTADOR").effect("Valor")("Slider");
var n = Math.round(valor);
var str = n.toString();
var result = "";
var count = 0;


for (var i = str.length - 1; i >= 0; i--) {
  if (count > 0 && count % 3 == 0) result = "." + result;
  result = str[i] + result;
  count++;
}
result

Prefixo/sufixo 

var valor = thisComp.layer("CONTADOR").effect("Valor")("Slider");
"R$ " + Math.round(valor).toString()  // com prefixo


Math.round(valor).toString() + "%"    // com sufixo

Contador com decimal

Para exibir 3.7 com uma casa decimal:

var valor = thisComp.layer("CONTADOR").effect("Valor")("Slider");
var n = Math.round(valor * 10) / 10;
n.toFixed(1)

Múltiplos contadores

Com um único nulo de controle com múltiplos sliders:

// cada texto referencia um slider diferente
var valor = thisComp.layer("DADOS").effect("Slider 1")("Slider");
Math.round(valor) + "%"

Easing do contador

A animação do slider controla o easing. Para o número “ficar” no valor final por mais tempo: no graph editor, puxe a handle final pra criar uma desaceleração longa. A chegada lenta faz o número parecer mais pesado e real.