# Sømløs loop: slik lager du en video som aldri hopper

[Canonical HTML page](https://gradiently.design/nb/guide/seamless-loop-video)

En løkke som hopper én gang hvert tiende sekund, er verre enn ingen bevegelse i det hele tatt. Løsningen er ikke et bedre redigeringsprogram, men bevegelse som er designet for å komme hjem.

## The short version

- En sømløs loop er en video der det siste bildet leder rett inn i det første, så den kan gjentas uten et synlig hopp.
- Generert bevegelse looper rent når alt som beveger seg, fullfører et helt antall sykluser i løpet av videoens lengde.
- Det vanligste hakket er et duplisert bilde: det siste bildet skal være det som kommer rett før det første, ikke en kopi av det.
- Opptak som ikke ble laget for å loope, kan rettes ved å bytte om de to halvdelene og krysstone i den nye skjøten.
- Sjekk en loop ved å spille den av gjentatte ganger i full størrelse og sammenligne det siste bildet med det første.

En **sømløs loop** er en video der det siste bildet leder rett inn i det første, så den kan gjentas i det uendelige uten at noen ser hvor den starter. Hemmeligheten er at alt i bildet må komme hjem i nøyaktig riktig øyeblikk: hver posisjon, farge, hvert lysnivå og hver partikkel ender ett steg før der den begynte. Får du det til, kan et klipp på ti sekunder spilles hele dagen.

Denne guiden tar for seg hvorfor looper hopper, hvordan du designer bevegelse som vender tilbake av seg selv, hvordan du redder opptak som ikke ble laget for å loope, og hvordan du sjekker skjøten før du publiserer. For selve uttrykket i loopen, se [animerte gradientbakgrunner](https://gradiently.design/nb/guide/animated-gradient-background).

## Hvorfor de fleste looper hopper

Et hopp i skjøten har alltid en bestemt årsak, og hver årsak har en bestemt løsning. Det hjelper å sette navn på hvilken du ser på.

| Årsak | Hva du ser | Løsning |
| --- | --- | --- |
| Slutten stemmer ikke med starten | Farge eller posisjon spretter tilbake | Gjør bevegelsen periodisk, eller krysston |
| Duplisert bilde | Et bitte lite hakk eller en pause i skjøten | Tegn det siste bildet ett steg før det første |
| Bevegelsen bremser til stopp i endene | Et øyeblikks stillhet, så bevegelse igjen | Hold farten jevn gjennom skjøten |
| Tilfeldig støy eller partikler som ikke gjentas | Tekstur eller prikker hopper | Loop støyen, eller la partiklene sette seg først |
| Kraftig komprimering | Et mykt pulsslag av uskarphet i skjøten | Eksporter i høyere kvalitet |

Den tredje årsaken er lumsk. Hvis du animerer fra A til B og tilbake med easing i begge ender, bremser bevegelsen til stopp i skjøten, og loopen ser ut til å nøle. Easing hører hjemme i starten og slutten av en enkeltstående bevegelse, ikke i skjøten på en loop. [Easing](https://gradiently.design/nb/guide/easing) forklarer forskjellen.

## Designe bevegelse som looper av seg selv

De reneste loopene er laget av periodisk bevegelse: bevegelse som gjentar seg av natur, som et punkt som går rundt en sirkel, eller et lys som svulmer og faller. Hvis alt som beveger seg, fullfører et helt antall sykluser i løpet av videoens lengde, faller det siste bildet automatisk på linje med det første. Sirkler, sinusbølger og hele omdreininger av fargetone er alle periodiske.

```js
const fps = 30
const seconds = 10
const frames = fps * seconds            // 300 frames, numbered 0 to 299

for (let i = 0; i < frames; i++) {
  const phase = i / frames              // 0 up to, but never reaching, 1
  const turn = phase * Math.PI * 2      // one full turn per loop

  const x = Math.cos(turn) * 40         // drift in a circle, 40 px across
  const y = Math.sin(turn) * 40
  const hue = 280 + Math.sin(turn * 2) * 20   // two gentle hue swings per loop
  const glow = 0.5 + 0.5 * Math.sin(turn)     // light breathes once per loop

  drawFrame(i, { x, y, hue, glow })     // your renderer
}
```

Periodisk bevegelse for en loop på 10 sekunder. Hver verdi fullfører hele sykluser, og fordi `phase` stopper like før 1, blir bilde 300 (en kopi av bilde 0) aldri tegnet.

Den siste detaljen er det som hindrer hakket. Hvis det siste bildet ditt er identisk med det første, viser avspilleren det bildet to ganger på rad ved hver gjentakelse. Det siste bildet skal være det som kommer rett før det første.

- Bilde 298: `linear-gradient(150deg, #0f172a 0%, #1d4ed8 52%, #22d3ee 100%)`
- Bilde 299: siste: `linear-gradient(151deg, #0f172a 0%, #1d4ed8 51%, #22d3ee 100%)`
- Bilde 0: første: `linear-gradient(152deg, #0f172a 0%, #1d4ed8 50%, #22d3ee 100%)`
- Bilde 1: `linear-gradient(153deg, #0f172a 0%, #1d4ed8 49%, #22d3ee 100%)`

Over en god skjøt skiller hvert bilde seg fra det neste med det samme lille steget. Det finnes ikke noe bilde der endringen er større, og ikke noe bilde som gjentas.

### Loope støy, korn og partikler

Organiske teksturer lages ofte av støy, som ikke gjentar seg som standard. Standardtrikset er å bevege seg gjennom støyen i en sirkel i stedet for en rett linje, så du etter én loop er tilbake på samme punkt i den. Partikkelsystemer er annerledes: posisjonen til hver partikkel avhenger av de forrige. Å kjøre simuleringen i en hel loop før du tar opp, lar partiklene finne rytmen sin, så slutten på opptaket ligger nær starten.

## Slik looper du opptak som ikke ble laget for å loope

Filmede klipp, som bølger, røyk eller skyer, ender sjelden der de begynner. Den klassiske løsningen fungerer i ethvert videoredigeringsprogram: flytt skjøten til midten av klippet, der opptaket allerede er sammenhengende, og skjul det nye kuttet med en krysstoning.

1. **Del klippet på midten** Klipp det i to halvdeler, A og B, i et øyeblikk med jevn bevegelse.
2. **Bytt om halvdelene** Legg B først og A etterpå. Slutten av A glir nå over i starten av B, fordi det var ett sammenhengende øyeblikk i originalen, så looppunktet er sømløst.
3. **Krysston den nye midten** Der B møter A, lar du dem overlappe med et halvt til to sekunder og toner den ene over i den andre. Myke opptak med mye tekstur skjuler en krysstoning best.
4. **Trim til en rund lengde** Sikt mot et helt antall sekunder, som gjør loopen lett å time og å bruke på nytt.

> **Unngå tydelige landemerker** En krysstoning skjuler tekstur godt, men ikke gjenstander. Hvis en fugl krysser bildet under toningen, ser folk to spøkelser. Velg en strekning av opptaket uten noe særpreget i.

## Velge lengde på loopen

Lengre looper føles mindre repeterende, men de gir større filer og trenger mer periodisk bevegelse for å holde på interessen. Korte looper gjentas ofte, så bevegelsen må være diskret nok til ikke å bli hypnotisk. Med 30 bilder per sekund er en loop på 10 sekunder 300 bilder, som deler seg pent i halve, tredeler og kvarte for syklusene dine.

| Hvor den spilles | Foreslått lengde | Hvorfor |
| --- | --- | --- |
| Storyer og korte innlegg | 5 til 10 sekunder | Seerne går raskt videre, og filene er små |
| Reels og videobakgrunner | 10 til 15 sekunder | Plass til en langsommere, roligere syklus |
| Hero på nettsted | 8 til 15 sekunder | Kort nok til å holde filen lett |
| Skjermer, display, bakgrunnsbilder | 15 til 30 sekunder | Folk ser lenger, så gjentakelser må være mindre merkbare |

Utgangspunkter, ikke regler. Filformatet betyr også noe. Se [GIF eller MP4](https://gradiently.design/nb/guide/gif-vs-mp4).

## Slik sjekker du skjøten

Ikke bedøm en loop ved å se den én gang i et redigeringsprogram. Se den slik folk kommer til å møte den: gjentatt, i full størrelse, lenger enn det føles nødvendig. Skjøter som gjemmer seg i en liten forhåndsvisning, synes ofte på en stor skjerm.

```bash
# Play the loop four times in a row as one file, to watch the joins
ffmpeg -stream_loop 3 -i loop.mp4 -c copy loop-x4.mp4

# Save the first and last frames as images to compare side by side
ffmpeg -i loop.mp4 -vf "select=eq(n\,0)" -frames:v 1 first.png
ffmpeg -sseof -0.5 -i loop.mp4 -update 1 last.png
```

To raske sjekker med ffmpeg. Det siste bildet skal skille seg fra det første med nøyaktig ett normalt bevegelsessteg.

- Se filen med fire gjentakelser i fullskjerm, og se bare på skjøten.
- Se på kantene og hjørnene, der drift er mest synlig.
- Se på kornet og partiklene for seg, atskilt fra fargen.
- Hvis du ser et mykt pulsslag i skjøten, er det komprimering: eksporter i høyere kvalitet.

Hvis du lager looper i Gradiently, er dette ordnet for deg: hver eksporterte loop bygges slik at feltet i bevegelse fullfører hele sykluser innenfor lengden du velger, fra 5 til 30 sekunder, og slutten møter starten. Det er samme tilnærming som du ville brukt i kode, anvendt på Marken din. Looper blir også gode [levende bakgrunnsbilder](https://gradiently.design/nb/guide/live-wallpaper) og [videobakgrunner til nettsteder](https://gradiently.design/nb/guide/video-background-website).

## FAQ

### Hva er en sømløs loop?

Det er en video eller animasjon der det siste bildet leder rett inn i det første, så den kan gjentas kontinuerlig uten et synlig hopp eller en pause.

### Hvorfor hakker loopen min på slutten?

Som regel fordi det siste bildet er en kopi av det første, så samme bilde vises to ganger. La det siste bildet være det som kommer rett før det første.

### Hvordan looper jeg en video som ikke ble filmet for å loope?

Del den på midten, bytt om de to halvdelene og krysston der de nå møtes. Den opprinnelige skjøten blir sammenhengende, og krysstoningen skjuler den nye.

### Hvor lang bør en video i loop være?

5 til 10 sekunder for storyer og innlegg, 10 til 15 for reels og nettbakgrunner, og 15 til 30 for skjermer og bakgrunnsbilder folk ser på lenger.

### Hvorfor er det en uskarphet i looppunktet?

Det er som regel komprimering, ikke animasjonen. Å eksportere i høyere kvalitet eller bitrate fjerner det.