Na introdução, explico a ideia do projeto.
Animações de Carregamento (série de 10 partes)
Animações de Carregamento é uma série de doze animações de carregamento minimalistas, usando exclusivamente círculos como o principal elemento gráfico. Para cada mês do ano, uma animação é criada com uma quantidade de círculos equivalente à ordem do mês, i.e. a animação de janeiro tem um círculo, fevereiro tem dois círculos, e assim por diante.
Os seguintes princípios orientam o design e o comportamento dessas animações:
Diretrizes de design
- Tamanho: Os círculos devem ter 16 pixels de diâmetro.
- Cor: Os círculos são pretos em um fundo branco.
- Opacidade: sempre 100%.
- Quantidade: O número de círculos deve permanecer o mesmo do início ao fim.
- Distorção: Os círculos podem se deformar levemente para expressar efeitos como velocidade ou impacto.
- Sobreposição: Os círculos não devem se sobrepor em nenhum momento.
- Movimento: Os círculos devem permanecer em movimento constante para transmitir dinamismo.
- Velocidade de movimento: As velocidades podem ser fixas ou variar ao longo da animação.
- Trajetória: Os círculos podem seguir trajetórias lineares, curvas ou complexas (ex.: espirais).
- Tempo do ciclo: As animações devem ter um looping contínuo ou um início e fim claramente definidos.
Padrões de comportamento
- Colidir: Os círculos podem interagir colidindo e alterando seus movimentos.
- Quicar: O círculo rebate após atingir uma superfície.
- Looping: O círculo segue repetidamente um caminho circular ou elíptico.
- Saltar: O círculo se projeta para cima, imitando um salto.
- Cair: O círculo desce em um caminho reto sob a influência da gravidade.
- Empurrar: O círculo aplica força para mover ou deslocar outro círculo.
- Balançar: O círculo se move para frente e para trás em um arco, como se estivesse suspenso.
- Deslizar: O círculo se move suavemente e de forma constante, com pouca resistência.
- Ricochetear: O círculo rebate em várias superfícies em rápida sucessão.
- Orbitar: O círculo se move continuamente ao redor de outro círculo em um caminho circular ou elíptico.
- Grudar: O círculo adere temporariamente a uma superfície antes de se soltar.
- Comprimir: O círculo se deforma temporariamente sob pressão e retorna à sua forma original.
- Desviar: O círculo evita colisões mudando de direção no último momento.
- Flutuar: O círculo permanece suspenso no lugar com pequenos e sutis movimentos.
Essas diretrizes ajudam a manter uma estética coesa em todas as animações.