Logótipos animados: formas simples de dar vida a um logótipo

Um logótipo animado é o teu logótipo com um movimento curto e com propósito: revela-se, desenha as suas próprias linhas, monta-se a partir das suas partes, muda de cor ou respira suavemente em loop. Os melhores são breves, normalmente de um a três segundos numa introdução, e terminam sempre no logótipo exato que as pessoas já conhecem. Pensa nele como o logótipo a chegar, não a atuar.

Cinco formas de animar um logótipo

Quase toda a boa animação de logótipo é uma de cinco técnicas, por vezes duas combinadas. Escolhe a que se adequa à forma do teu logótipo e ao carácter da marca.

Regras que mantêm de bom gosto uma animação de logótipo

Uma animação de logótipo repete-se muitas vezes: no início de cada vídeo, em cada carregamento de página, em cada evento. Tudo o que é engenhoso cansa depressa. A contenção é o que permite às pessoas gostar dela à centésima vez. Os princípios do motion design explicam o raciocínio com mais profundidade.

Ajusta o movimento à marca da mesma forma que ajustas as cores e a tipografia. O logótipo de um escritório de advogados pode surgir com um fundido de um segundo e uma suavização delicada. O de um festival de música pode encaixar de repente, com um pequeno excesso. A personalidade da marca ajuda-te a dar nome ao carácter primeiro, e a suavização transforma-o em curvas.

Como fazer uma animação de logótipo com desenho em SVG

O efeito de desenho usa um truque simples em SVG. Um traço pode ser desenhado como tracejado, e se um só traço for tão comprido como o caminho todo, podes fazê-lo entrar em vista animando o seu deslocamento. Definir pathLength="1" no caminho simplifica as contas: o caminho conta como uma unidade de comprimento, seja qual for o seu comprimento real.

<svg viewBox="0 0 120 120" width="120" height="120" role="img" aria-label="Northlight">
  <path class="draw" d="M20 100 L20 20 L100 100 L100 20" pathLength="1"
        fill="none" stroke="#1e1b4b" stroke-width="10"
        stroke-linecap="round" stroke-linejoin="round" />
</svg>

.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1; /* hidden: the dash starts one full length away */
  animation: draw 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; } /* drawn */
}

@media (prefers-reduced-motion: reduce) {
  .draw { animation: none; stroke-dashoffset: 0; }
}

Animar um logótipo de gradiente

Os logótipos de gradiente têm um movimento embutido: deixa a cor viajar. Uma deslocação lenta do gradiente por uma marca nominal ou um ícone parece luz a mover-se pela superfície e mantém a forma totalmente parada, o que é bom para a legibilidade. O truque para um loop limpo é um gradiente que termina na cor com que começa, para que a repetição não tenha costura.

.wordmark {
  background: linear-gradient(90deg, #6d28d9 0%, #db2777 50%, #6d28d9 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}

@keyframes shimmer {
  to { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark { animation: none; }
}

O texto com gradiente tem as suas próprias regras de legibilidade; vê texto com gradiente em CSS. E garante que o logótipo existe também numa só cor lisa, como explicam os logótipos com gradiente.

Que duração deve ter um logótipo animado

• Introduções e finais de vídeo: cerca de um a três segundos, e depois mantém o logótipo final por um momento.
• Cabeçalho de um site: passa uma vez, depressa, na primeira visita; nunca em cada mudança de página.
• Estados de carregamento: um loop lento em repouso que não pareça impaciente.
• Ecrãs de palco e transmissões: um loop muito lento, porque pode estar horas no ecrã.

Em que formato exportar um logótipo animado

Para mais sobre loops e tipos de ficheiro, vê GIF vs MP4. E o que quer que exportes, junta-lhe um fundo que lhe sirva: um logótipo animado sobre um campo estático e calmo lê-se melhor do que sobre filmagem carregada. Pôr um logótipo sobre um gradiente trata do contraste e da colocação.