# Fundos animados com gradientes: faz o teu

[Canonical HTML page](https://gradiently.design/pt-pt/guide/live-wallpaper)

Um gradiente que desliza devagar por trás do relógio pode dar vida a um ecrã sem nunca pedir atenção. O segredo está em mantê-lo lento, escuro e sossegado.

## The short version

- Um fundo animado é um fundo de ecrã de telemóvel ou computador que se move, normalmente num loop lento ou em resposta ao toque, à hora ou à inclinação.
- O Android suporta fundos animados de origem através de aplicações, enquanto no iPhone, no Mac e no Windows as opções dependem da versão do sistema ou de aplicações de terceiros.
- Um bom fundo animado em gradiente move-se muito devagar, repete sem saltos e mantém calma a zona por trás do relógio e dos ícones.
- Os fundos em movimento gastam mais energia, e nos ecrãs OLED as cores escuras gastam menos, por isso os fundos escuros e lentos são os mais leves para a bateria.
- Faz o fundo como um loop de 15 a 30 segundos na forma do ecrã e guarda uma versão estática para quando quiseres poupar energia.

Um **fundo animado** é um fundo de ecrã para o telemóvel ou o computador que se move: um loop lento de cor, uma cena que desliza ou uma imagem que responde ao toque ou à hora do dia. Os gradientes dão alguns dos melhores, porque um campo suave de cor a deslizar por trás do relógio parece calmo e vivo sem nunca competir com as tuas aplicações. O segredo é mantê-lo lento, fechar bem o loop e deixar sossegadas as zonas mais ocupadas do ecrã.

## Onde funcionam os fundos animados

O suporte varia conforme o sistema e muda de versão para versão, por isso verifica o que o teu oferece antes de desenhar. Em termos gerais:

| Sistema | O que é possível | Caminho habitual |
| --- | --- | --- |
| Android | Os fundos animados são uma funcionalidade de origem | Aplicações de fundos; alguns fabricantes aceitam também um vídeo curto |
| iPhone | As opções de movimento mudaram entre versões do iOS | As versões recentes podem reproduzir brevemente uma Live Photo ao acordar o ecrã bloqueado |
| Mac | Fundos dinâmicos e em movimento de origem | Fundos em vídeo personalizados precisam de uma aplicação de terceiros |
| Windows | Sem fundo em vídeo de origem | Aplicações como o Wallpaper Engine ou o Lively Wallpaper |

Um loop feito como um ficheiro de vídeo normal pode ser usado na maioria destes caminhos. Confirma as opções atuais do teu dispositivo.

## O que faz um bom fundo animado em gradiente

Vais ver o teu fundo centenas de vezes por dia, quase sempre durante um segundo, enquanto tentas fazer outra coisa. Isso muda as regras. Um fundo animado que entusiasma à primeira vista cansa ao segundo dia. Os melhores estão quase parados: só reparas no movimento quando o procuras.

### Cansativo

- Movimento rápido ou cores sempre a mudar
- Cores vivas por todo o ecrã
- Pormenor por trás do relógio e dos ícones
- Um salto visível quando o loop recomeça

### Calmo

- Um deslizar lento ou uma luz que respira
- Um fundo escuro com uma só cor iluminada
- Uma zona sossegada onde ficam o relógio e os ícones
- Um loop que se junta sem costura

Um ecrã bloqueado de telemóvel, alto, com a hora 07:42 sobre um gradiente escuro, calmo por trás do relógio

Desenha em função do relógio: a zona por trás dele deve ser a parte mais calma do campo, com a cor e o movimento por baixo e à volta.

## Cores para um fundo animado

Os fundos escuros são o lugar natural dos fundos em movimento. Mantêm os ícones e o texto brancos legíveis em todos os momentos do loop, são repousantes à noite e, nos ecrãs OLED, onde cada píxel produz a sua própria luz, os píxeis mais escuros gastam menos energia. Escolhe uma base quase preta puxada para a tua cor principal e deixa uma ou duas cores iluminadas moverem-se sobre ela. [Fundos em gradiente escuro](https://gradiently.design/pt-pt/guide/dark-gradient-backgrounds) aprofunda como criar profundidade sem ficar sombrio.

- Brasa violeta: `radial-gradient(120% 80% at 30% 85%, #6d28d9 0%, #2e1065 45%, #0b0716 100%)`
- Lagoa funda: `radial-gradient(120% 80% at 70% 90%, #0d9488 0%, #134e4a 40%, #04110f 100%)`
- Sol baixo: `radial-gradient(120% 80% at 40% 95%, #ea580c 0%, #7c2d12 40%, #120806 100%)`
- Azul noturno: `radial-gradient(120% 80% at 60% 90%, #2563eb 0%, #1e3a8a 45%, #060a18 100%)`

Fundos escuros com a luz em baixo no enquadramento, longe do relógio no topo. Qualquer um podia deslizar devagar para o lado num loop.

Acrescenta um pouco de grão se puderes. Os gradientes escuros são onde as faixas mais se notam, e um grão fino e em movimento esconde-as enquanto dá à superfície uma textura de película. [Gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients) explica quanto usar.

## Tamanhos e formas para telemóvel e computador

Faz o loop na forma do ecrã onde vai viver. Os telemóveis são altos, cerca de 9:19,5 em muitos modelos atuais, e a maioria amplia ou recorta ligeiramente o fundo, por vezes com um efeito de paralaxe quando inclinas o aparelho. Os computadores são normalmente 16:9. Mantém a cor importante longe das margens para que os recortes não a percam. Para os tamanhos exatos de telemóvel e a composição do ecrã bloqueado, vê [tamanhos de fundo para telemóvel](https://gradiently.design/pt-pt/guide/phone-wallpaper-size).

- Telemóvel, cerca de 9:19,5: 18 × 39
- Computador 16:9: 1920 × 1080

Duas formas, duas composições. Um fundo de computador recortado de um design de telemóvel, ou o contrário, raramente funciona.

## Como fazer um fundo animado em gradiente

1. **Desenha a versão estática** Começa com um gradiente parado na forma do ecrã. Vê-o com os teus ícones e o relógio reais por cima antes de acrescentar movimento.
2. **Escolhe um movimento lento** Um deslizar lateral, um fluxo lento ou uma luz que respira. Um só movimento, mais lento do que parece necessário.
3. **Dá-lhe 15 a 30 segundos** Os loops mais longos repetem-se menos vezes, por isso a repetição nota-se menos. O movimento muito lento precisa de menos duração.
4. **Fecha o loop** O último fotograma tem de voltar ao primeiro sem saltos. [Loops contínuos](https://gradiently.design/pt-pt/guide/seamless-loop-video) mostra como.
5. **Exporta como vídeo** O MP4 é o ficheiro mais aceite por aplicações de fundos e telemóveis. Guarda também um PNG estático do mesmo design.
6. **Vive com ele durante um dia** Aplica-o e usa o telemóvel normalmente. Se reparares nele de uma forma que incomoda, abranda-o ou escurece-o.

## Bateria e desempenho

Qualquer fundo em movimento obriga o dispositivo a continuar a desenhar, o que gasta alguma energia extra. Quanto depende do dispositivo, da aplicação e do fundo: loops lentos e escuros na resolução do próprio ecrã são os mais leves, e muitas aplicações pausam a animação quando uma janela tapa a secretária ou o telemóvel está bloqueado. Se num dado dia a bateria importar mais do que o movimento, muda para a versão estática; vai parecer igual, só que em repouso.

Se fizeres o teu gradiente na Gradiently, podes desenhá-lo num tamanho personalizado, exportá-lo como vídeo em loop de 5 a 30 segundos com um movimento lento como Deriva ou Respiração e exportar um PNG estático do mesmo design. Os loops são feitos para que o fim encontre o início. Para mais ideias de fundos, vê [fundos de ecrã em gradiente](https://gradiently.design/pt-pt/guide/gradient-wallpaper) e [fundos estéticos](https://gradiently.design/pt-pt/guide/aesthetic-backgrounds).

## FAQ

### O que é um fundo animado?

É um fundo de ecrã de telemóvel ou computador que se move, como um loop lento de cor, em vez de uma imagem parada. Alguns também reagem ao toque, à inclinação ou à hora do dia.

### Os fundos animados gastam a bateria?

Gastam alguma energia extra, porque o dispositivo continua a desenhá-los. Os loops lentos e escuros são os que menos gastam, sobretudo em ecrãs OLED, e muitas aplicações pausam-nos quando não estão visíveis.

### Posso usar um vídeo como fundo animado?

No Android, muitas aplicações de fundos e alguns fabricantes aceitam um vídeo. No Mac e no Windows costuma ser preciso uma aplicação de terceiros, e no iPhone as opções dependem da versão do iOS.

### Quanto deve durar o loop de um fundo animado?

15 a 30 segundos funciona bem. Quanto mais longo e lento for o loop, mais difícil é perceber onde se repete.

### Que cores funcionam melhor num fundo animado?

Um fundo escuro com uma ou duas cores iluminadas a mover-se devagar. Mantém os ícones legíveis, é repousante e gasta menos energia em ecrãs OLED.