Nahtloser Loop: so machst du ein Video, das nie springt

Ein nahtloser Loop ist ein Video, dessen letztes Frame direkt ins erste führt, sodass es sich endlos wiederholen kann, ohne dass jemand sieht, wo es beginnt. Das Geheimnis: Alles im Bild muss genau im richtigen Moment nach Hause kommen. Jede Position, Farbe, Helligkeit und jedes Partikel endet einen Schritt vor dem Punkt, an dem es begann. Stimmt das, kann ein zehnsekündiger Clip den ganzen Tag laufen.

Dieser Leitfaden zeigt, warum Loops springen, wie du Bewegung gestaltest, die von selbst zurückkehrt, wie du Material rettest, das nicht zum Loopen gedreht wurde, und wie du die Naht vor dem Veröffentlichen prüfst. Zum Look des Loops selbst siehe animierte Farbverlauf-Hintergründe.

Warum die meisten Loops springen

Ein Sprung an der Naht hat immer eine bestimmte Ursache, und jede hat eine bestimmte Lösung. Es hilft, zu benennen, welche du gerade vor dir hast.

Die dritte Ursache ist tückisch. Animierst du von A nach B und zurück mit Easing an beiden Enden, bremst die Bewegung an der Naht bis zum Stillstand, und der Loop scheint zu zögern. Easing gehört an Anfang und Ende einer einmaligen Bewegung, nicht an die Naht eines Loops. Easing erklärt den Unterschied.

Bewegung gestalten, die von selbst loopt

Die saubersten Loops bestehen aus periodischer Bewegung: Bewegung, die sich von Natur aus wiederholt, wie ein Punkt, der einen Kreis abfährt, oder ein Licht, das an- und abschwillt. Durchläuft alles, was sich bewegt, eine ganze Zahl von Zyklen in der Länge des Videos, passt das letzte Frame automatisch zum ersten. Kreise, Sinuswellen und volle Umdrehungen des Farbtons sind alle periodisch.

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
}

Dieses letzte Detail verhindert das Ruckeln. Ist dein letztes Frame identisch mit dem ersten, zeigt der Player bei jeder Wiederholung dasselbe Bild zweimal hintereinander. Das letzte Frame sollte das direkt vor dem ersten sein.

Rauschen, Körnung und Partikel loopen

Organische Texturen entstehen oft aus Rauschen, das sich standardmäßig nicht wiederholt. Der übliche Trick ist, sich im Kreis statt geradeaus durch das Rauschen zu bewegen, sodass du nach einem Loop wieder am selben Punkt bist. Partikelsysteme sind anders: Die Position jedes Partikels hängt von den vorigen ab. Lässt du die Simulation vor der Aufnahme einen ganzen Loop lang laufen, finden die Partikel ihren Rhythmus, und das aufgenommene Ende liegt nah am Anfang.

So loopst du Material, das nicht zum Loopen gedreht wurde

Gefilmte Clips, etwa Wellen, Rauch oder Wolken, enden selten dort, wo sie beginnen. Die klassische Lösung funktioniert in jedem Videoeditor: Verleg die Naht in die Mitte des Clips, wo das Material ohnehin durchgehend ist, und versteck den neuen Schnitt mit einer Überblendung.

1. 1

   Teil den Clip in der Mitte

   Schneide den Clip in zwei Hälften, A und B, an einer Stelle mit gleichmäßiger Bewegung.

2. 2

   Tausch die Hälften

   Setz B an den Anfang und A dahinter. Das Ende von A fließt jetzt in den Anfang von B, weil das im Original ein durchgehender Moment war, also ist der Loop-Punkt nahtlos.

3. 3

   Überblende die neue Mitte

   Wo B auf A trifft, lass sie eine halbe bis zwei Sekunden überlappen und blende eine in die andere über. Weiches, texturiertes Material versteckt eine Überblendung am besten.

4. 4

   Kürze auf eine runde Länge

   Ziel auf eine ganze Zahl von Sekunden, dann lässt sich der Loop leicht timen und wiederverwenden.

Die Länge des Loops wählen

Längere Loops wirken weniger repetitiv, sind aber größere Dateien und brauchen mehr periodische Bewegung, um interessant zu bleiben. Kurze Loops wiederholen sich oft, also muss ihre Bewegung dezent genug sein, um nicht hypnotisch zu werden. Bei 30 Frames pro Sekunde hat ein Loop von 10 Sekunden 300 Frames, die sich sauber in Hälften, Drittel und Viertel für deine Zyklen teilen lassen.

So prüfst du die Naht

Beurteile einen Loop nicht, indem du ihn einmal im Editor ansiehst. Sieh ihn so, wie Leute ihm begegnen: wiederholt, in voller Größe, länger als nötig erscheint. Nähte, die sich in einer kleinen Vorschau verstecken, zeigen sich oft auf einem großen Bildschirm.

# 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

• Sieh dir die vierfache Datei im Vollbild an und achte nur auf die Naht.
• Schau auf Ränder und Ecken, wo Abweichungen am deutlichsten sind.
• Beobachte Körnung und Partikel getrennt von der Farbe.
• Siehst du an der Naht ein weiches Pulsieren, ist es Kompression: Exportiere in höherer Qualität.

Machst du Loops in Gradiently, ist das für dich erledigt: Jeder exportierte Loop ist so gebaut, dass die bewegte Fläche in der gewählten Länge von 5 bis 30 Sekunden ganze Zyklen durchläuft und ihr Ende auf ihren Anfang trifft. Es ist derselbe Ansatz wie im Code, angewendet auf deinen Mark. Loops eignen sich auch gut als Live-Wallpaper und Videohintergründe für Websites.