Skip to main content

Clock e timer

Um relógio ou timer que conta sem nenhum keyframe. Tudo baseado na variável time.

Timer baseado no tempo da comp

// timer que começa em 0:00 e conta para cima
var totalSeconds = Math.floor(time);
var min = Math.floor(totalSeconds / 60);
var sec = totalSeconds % 60;
var minStr = min < 10 ? "0" + min : min.toString();
var secStr = sec < 10 ? "0" + sec : sec.toString();
minStr + ":" + secStr

Timer com décimos

var totalSeconds = time;
var min = Math.floor(totalSeconds / 60);
var sec = Math.floor(totalSeconds % 60);
var dec = Math.floor((totalSeconds % 1) * 10);
function pad(n) { return n < 10 ? "0" + n : n.toString(); }
pad(min) + ":" + pad(sec) + "." + dec

Countdown

Para contador que começa em 5:00 e vai até 0:00:

var totalDuration = 5 * 60; // 5 minutos em segundos
var remaining = Math.max(0, totalDuration - Math.floor(time));
var min = Math.floor(remaining / 60);
var sec = remaining % 60;
function pad(n) { return n < 10 ? "0" + n : n.toString(); }
pad(min) + ":" + pad(sec)

Ponteiros de relógio analógico

Aplique cada expressão em Rotation das layers correspondentes:

// ponteiro dos segundos (1 volta por 60 segundos)
(time % 60) / 60 * 360
// ponteiro dos minutos (1 volta por 60 minutos)
(time % 3600) / 3600 * 360
// ponteiro das horas (1 volta por 12 horas)
(time % 43200) / 43200 * 360

Relógio analógico com hora de início customizada

// ponteiro dos segundos começando às 10:25:30
var startH = 10, startM = 25, startS = 30;
var startTotalSeconds = startH * 3600 + startM * 60 + startS;
var totalSeconds = startTotalSeconds + time;
(totalSeconds % 60) / 60 * 360

Timer controlado por slider

// slider "Velocidade" controla quantas vezes mais rápido o timer corre
var vel = thisComp.layer("CONTROLES").effect("Velocidade")("Slider");
var t = time * vel;
var min = Math.floor(t / 60);
var sec = Math.floor(t % 60);
function pad(n) { return n < 10 ? "0" + n : n.toString(); }
pad(min) + ":" + pad(sec)

Relógio em tempo real

// mostra a hora do sistema
var now = new Date();
var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds();
function pad(n) { return n < 10 ? "0" + n : n.toString(); }
pad(h) + ":" + pad(m) + ":" + pad(s)

Caution

O after não renderiza em tempo real. Essa expressão mostra a hora do frame no momento do render, não a hora atual durante playback. Para relógio em tempo real numa apresentação, use Lottie com JavaScript ou outra solução web.