Sömlös loopvideo: så gör du en som aldrig hoppar

En sömlös loop är en video vars sista bildruta leder rakt in i den första, så att den kan upprepas i evighet utan att någon ser var den börjar. Hemligheten är att allt i bilden måste komma hem i exakt rätt ögonblick: varje position, färg, ljusnivå och partikel slutar ett steg före där den började. Får du det rätt kan ett klipp på tio sekunder spelas hela dagen.

Den här guiden tar upp varför loopar hoppar, hur du designar rörelse som återvänder av sig själv, hur du räddar material som inte gjordes för att loopa och hur du kontrollerar skarven innan du publicerar. För själva looken på loopen, se animerade gradientbakgrunder.

Därför hoppar de flesta loopar

Ett hopp i skarven har alltid en specifik orsak, och var och en har en specifik lösning. Det hjälper att namnge vilken du tittar på.

Den tredje orsaken är lömsk. Om du animerar från A till B och tillbaka med mjuk start och stopp i båda ändar saktar rörelsen in till stopp vid skarven och loopen verkar tveka. Mjuk acceleration hör hemma i början och slutet av en enstaka rörelse, inte vid skarven i en loop. Easing förklarar skillnaden.

Designa rörelse som loopar av sig själv

De renaste looparna görs av periodisk rörelse: rörelse som upprepas av naturen, som en punkt som färdas runt en cirkel eller ett ljus som sväller och avtar. Om varje rörligt objekt fullbordar ett helt antal cykler under videons längd, linjerar den sista bildrutan med den första automatiskt. Cirklar, sinusvågor och hela varv av nyans är alla periodiska.

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
}

Den sista detaljen är det som förhindrar hackandet. Om din sista bildruta är identisk med den första visar spelaren den bilden två gånger i rad vid varje upprepning. Den sista rutan ska vara den strax före den första.

Loopa brus, korn och partiklar

Organiska texturer görs ofta av brus, som inte upprepas som standard. Standardknepet är att röra sig genom bruset i en cirkel i stället för i en rak linje, så att du efter en loop är tillbaka på samma punkt i det. Partikelsystem är annorlunda: varje partikels position beror på de föregående. Att köra simuleringen ett helt varv innan du spelar in låter partiklarna hitta sin rytm, så att det inspelade slutet ligger nära sin början.

Så loopar du material som inte gjordes för att loopa

Filmade klipp, som vågor, rök eller moln, slutar sällan där de börjar. Det klassiska knepet fungerar i vilken videoredigerare som helst: flytta skarven till mitten av klippet, där materialet redan är kontinuerligt, och dölj den nya klippningen med en övertoning.

1. 1

   Dela klippet på mitten

   Klipp klippet i två halvor, A och B, vid ett ögonblick med jämn rörelse.

2. 2

   Byt plats på halvorna

   Lägg B först och A sedan. Slutet av A flödar nu in i början av B, eftersom det var ett sammanhängande ögonblick i originalet, så loopens skarv blir sömlös.

3. 3

   Tona över den nya mitten

   Där B möter A, låt dem överlappa med en halv sekund till två sekunder och tona den ena in i den andra. Mjukt, texturerat material döljer en övertoning bäst.

4. 4

   Trimma till en rund längd

   Sikta på ett helt antal sekunder, vilket gör loopen lätt att tajma och återanvända.

Välja loopens längd

Längre loopar känns mindre repetitiva, men de är större filer och behöver mer periodisk rörelse för att förbli intressanta. Korta loopar upprepas ofta, så deras rörelse måste vara subtil nog för att inte bli hypnotisk. Med 30 bilder per sekund är en loop på 10 sekunder 300 bildrutor, vilket delas snyggt i halvor, tredjedelar och fjärdedelar för dina cykler.

Så kontrollerar du skarven

Bedöm inte en loop genom att se den en gång i en redigerare. Se den som folk kommer att möta den: upprepad, i full storlek, längre än det känns nödvändigt. Skarvar som döljer sig i en liten förhandsgranskning syns ofta på en stor skärm.

# 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

• Titta på filen med fyra upprepningar i helskärm och se bara på skarven.
• Titta på kanterna och hörnen, där drift syns mest.
• Titta på kornet och partiklarna för sig, skilt från färgen.
• Om du ser en mjuk puls vid skarven är det komprimering: exportera i högre kvalitet.

Om du gör loopar i Gradiently sköts det här åt dig: varje exporterad loop är byggd så att det rörliga fältet fullbordar hela cykler inom den längd du väljer, från 5 till 30 sekunder, och dess slut möter dess början. Det är samma tillvägagångssätt som du skulle ta i kod, tillämpat på din Mark. Loopar passar också bra som levande bakgrundsbilder och videobakgrunder på webbplatser.