Animierte Bilder

Ein Logo, ein Bild im Inhalt eines Videos, ein Moderatorbild oder das Hintergrundbild einer Marke kann eine animierte SVG-Datei sein, und ihre Animation läuft im fertigen Video ab. Laden Sie die Datei wie jedes andere Bild in die Mediathek hoch und verwenden Sie sie dort, wo Sie auch ein stehendes Bild verwenden würden. Sie müssen nichts weiter einschalten.

Was abgespielt wird, und wie

Eine SVG-Datei kann sich auf zwei Arten bewegen, und Reelwire gibt beide wieder: Animationen, die in der Datei selbst mit den Animationselementen von SVG geschrieben sind (animate, animateTransform, animateMotion, set), und Animationen, die mit CSS geschrieben sind (@keyframes).

Jedes Bild des Videos wird mit der Uhr der SVG-Datei auf den Zeitpunkt dieses Bildes im Video gerendert. Die Animation läuft daher flüssig, sie ist bei jedem Erstellen des Videos dieselbe, und sie beginnt in dem Moment, in dem das Bild auf dem Schirm erscheint. Ein Logo, das sich in der ersten Sekunde hineindreht, tut das in dem Moment, in dem die Vorlage es zeigt.

Alles andere wird wie bisher gerendert. Ein PNG, JPEG, WebP oder GIF und eine SVG-Datei ohne Bewegung erscheinen genau wie immer, sodass sich kein bestehendes Video ändert.

Beispiele

Jedes Bild unten ist eine vollständige SVG-Datei, die in Ihrem Browser so abläuft wie in einem Video, mit der ganzen Datei darunter. Zum Ausprobieren kopieren Sie den Code in eine Textdatei, speichern sie unter einem Namen, der auf .svg endet, und laden sie in die Mediathek hoch.

Alle folgen demselben Muster: Ein Animationselement sitzt in der Form oder Gruppe, die es bewegt, und gibt an, was sich ändert (attributeName), über welche Schritte (values, oder from und to) und wie lange ein Durchlauf dauert (dur).

Bewegen

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180" width="320" height="180">
  <rect width="320" height="180" rx="16" fill="#0F1420"/>
  <g>
    <circle cx="80" cy="90" r="28" fill="#C6F432"/>
    <animateTransform attributeName="transform" type="translate"
      values="0 0; 160 0; 0 0" dur="3s" repeatCount="indefinite"/>
  </g>
</svg>

Die Gruppe bewegt sich alle drei Sekunden um 160 nach rechts und wieder zurück. Ihr letzter Schritt ist derselbe wie der erste, die Schleife hat also keine Naht. Der Punkt steckt in einer Gruppe, und die Gruppe wird bewegt. So lässt sich alles am schnellsten bewegen (siehe Das Erstellen des Videos schnell halten).

Drehen

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180" width="320" height="180">
  <rect width="320" height="180" rx="16" fill="#0F1420"/>
  <rect x="130" y="60" width="60" height="60" rx="8" fill="#4FD1FF">
    <animateTransform attributeName="transform" type="rotate"
      from="0 160 90" to="360 160 90" dur="4s" repeatCount="indefinite"/>
  </rect>
</svg>

from="0 160 90" bedeutet 0 Grad um den Punkt 160, 90, den Mittelpunkt des Quadrats. Eine volle Drehung endet dort, wo sie begonnen hat, auch diese Schleife hat also keine Naht.

Farbe ändern

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180" width="320" height="180">
  <rect width="320" height="180" rx="16" fill="#0F1420"/>
  <circle cx="160" cy="90" r="40" fill="#C6F432">
    <animate attributeName="fill"
      values="#C6F432; #4FD1FF; #FF7A59; #C6F432" dur="4s" repeatCount="indefinite"/>
  </circle>
</svg>

animate ändert ein beliebiges Attribut über seine Schritte, hier die Füllfarbe. Dasselbe Element kann eine Größe, eine Position oder die Dicke einer Linie ändern.

Einem Pfad folgen

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180" width="320" height="180">
  <rect width="320" height="180" rx="16" fill="#0F1420"/>
  <path d="M60 90 C60 30 260 30 260 90 S60 150 60 90" fill="none" stroke="#2A3245" stroke-width="4"/>
  <circle r="12" fill="#C6F432">
    <animateMotion path="M60 90 C60 30 260 30 260 90 S60 150 60 90"
      dur="4s" repeatCount="indefinite"/>
  </circle>
</svg>

animateMotion führt den Punkt entlang des Pfads, den es benennt. Die Linie ist nur gezeichnet, um den Weg zu zeigen; der Punkt folgt dem Pfad, ob er sichtbar ist oder nicht.

Ausblenden, mit CSS

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180" width="320" height="180">
  <style>
    .blink { animation: blink 2s ease-in-out infinite; }
    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
  </style>
  <rect width="320" height="180" rx="16" fill="#0F1420"/>
  <circle class="blink" cx="104" cy="90" r="14" fill="#FF4D4D"/>
  <text x="130" y="102" font-family="sans-serif" font-size="34" font-weight="700" fill="#FFFFFF">LIVE</text>
</svg>

Dieselbe Animation in CSS geschrieben: @keyframes benennt die Schritte, und animation weist sie allem mit der Klasse blink zu, zwei Sekunden pro Durchlauf, endlos. Ausblenden mit opacity lässt sich schnell erstellen.

Einmal, ab dem Moment, in dem das Bild erscheint

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180" width="320" height="180">
  <rect width="320" height="180" rx="16" fill="#0F1420"/>
  <g transform="translate(160 80)">
    <g>
      <rect x="-32" y="-32" width="64" height="64" rx="14" fill="#C6F432"/>
      <animateTransform attributeName="transform" type="scale"
        from="0" to="1" dur="1s" fill="freeze"/>
    </g>
  </g>
  <text x="160" y="150" text-anchor="middle" font-family="sans-serif" font-size="22"
    font-weight="700" fill="#FFFFFF" opacity="0">Hello
    <set attributeName="opacity" to="1" begin="1s"/>
  </text>
</svg>

Ohne repeatCount läuft eine Animation einmal ab, und fill="freeze" behält ihren letzten Schritt, statt zum ersten zurückzuspringen. set ändert etwas zu einem bestimmten Zeitpunkt, hier eine Sekunde nach dem Start. In einem Video werden diese Zeitpunkte ab dem Moment gezählt, in dem die Vorlage das Bild zeigt, ein solches Logo wächst also hinein, sobald es auf dem Schirm erscheint. Auf dieser Seite werden sie ab dem Öffnen der Seite gezählt: Laden Sie sie neu, um es noch einmal zu sehen.

Die Teile, die das Timing bestimmen

In der Datei	Was es bewirkt
attributeName	Was sich ändert: transform, fill, opacity oder eine Position wie cx
values	Die Schritte, die durchlaufen werden, durch Semikolons getrennt. Ist der letzte Schritt gleich dem ersten, hat die Schleife keine Naht
from, to	Ein erster und ein letzter Schritt, anstelle von values
dur	Wie lange ein Durchlauf dauert, zum Beispiel 3s
repeatCount	indefinite wiederholt sie, solange das Bild zu sehen ist; ohne Angabe läuft sie einmal ab
begin	Wann sie beginnt, gezählt ab dem Moment, in dem das Bild erscheint: 1s ist eine Sekunde später
fill="freeze"	Behält am Ende den letzten Schritt
@keyframes, animation	Dasselbe in CSS, in einem style-Element in der Datei

Was weggelassen wird, und warum

Eine SVG-Datei ist ein kleines Programm, und Reelwire rendert sie in der Seite des Videos, deshalb wird sie zuerst bereinigt:

• Skripte und alles, was Code ausführt, werden entfernt. Eine Animation, die ein Skript in der Datei erzeugt, läuft nicht ab. Verwenden Sie stattdessen die Animationselemente der Datei oder CSS.
• Verweise auf andere Dateien und Webadressen werden entfernt. Ein Bild innerhalb der SVG-Datei muss als PNG, JPEG, WebP oder GIF in einer Datenadresse eingebettet sein, diese bleibt erhalten.
• Frames, eingebettete Seiten sowie Ton oder Video innerhalb der SVG-Datei werden entfernt.

Lässt sich eine Datei gar nicht lesen, wird sie als gewöhnliches Bild gerendert, und eine stehende SVG-Datei erscheint unverändert.

Wo es anders aussieht

• Einpassen und Fokus. Ein Bild in einem Rahmen füllt ihn oder passt ganz hinein, wie jedes Bild. Wo eine Vorlage beim Zuschneiden einen Teil eines Bildes im Blick behält, wird der Fokus einer SVG-Datei in drei Stufen verschoben (links, Mitte, rechts und oben, Mitte, unten) statt stufenlos.
• Größe. Geben Sie der SVG-Datei eine viewBox oder eine Breite und eine Höhe, damit sie ihre Proportionen kennt.

Das Erstellen des Videos schnell halten

Wie sich eine SVG-Datei bewegt, bestimmt viel stärker als ihr Detailgrad, wie lange das Erstellen des Videos dauert. Reelwire erstellt Videos ohne Grafikkarte, daher muss ein visueller Effekt (Unschärfe, Leuchten, Schlagschatten, eine Textur aus Rauschen), der auf etwas Bewegtem liegt, in jedem Bild neu gerendert werden. Eine detaillierte Landschaft, deren Effekte stillstehen, braucht ungefähr so lange wie eine schlichte; dieselbe Landschaft mit einem Filter, der sich darüber bewegt, kann zehnmal länger brauchen.

• Ganze Gruppen verschieben. Fassen Sie das Bewegte in einer Gruppe zusammen und animieren Sie Position, Drehung oder Größe dieser Gruppe, statt einer Form, die einen Filter trägt.
• Animieren Sie nie einen Filter selbst. Verändern Sie weder die Stärke einer Unschärfe noch die Einstellungen eines Rauschfilters.
• Blenden Sie mit Opazität aus, und zwar an einer eigenen Gruppe, statt einen Filter zu ändern.
• Formverändernde Teile trennen. Setzen Sie Flügel, Wellen oder alles, was sich verformt, in eine eigene Gruppe, damit seine Änderungen nicht dazu führen, dass das Bild darunter neu gerendert wird.
• Nahtlos wiederholen. Wiederholt sich die Animation, lassen Sie sie genau dort enden, wo sie beginnt, damit im Video nie der Moment des Neustarts zu sehen ist.

Ein weiches Leuchten, das sich verschiebt, ist schnell, wenn das Leuchten gleich bleibt und seine Gruppe sich bewegt:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180" width="320" height="180">
  <defs>
    <filter id="glow"><feGaussianBlur stdDeviation="6"/></filter>
  </defs>
  <style>
    .slide { animation: slide 3s ease-in-out infinite; will-change: transform; }
    @keyframes slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(160px); } }
  </style>
  <rect width="320" height="180" rx="16" fill="#0F1420"/>
  <g class="slide">
    <circle cx="80" cy="90" r="28" fill="#C6F432" filter="url(#glow)"/>
  </g>
</svg>

Es ist langsam, wenn sich der Filter selbst ändert, weil die Unschärfe in jedem Bild neu berechnet wird:

<filter id="glow">
  <feGaussianBlur stdDeviation="6">
    <!-- Avoid: the blur's amount changes, so it is drawn again on every frame -->
    <animate attributeName="stdDeviation" values="6;14;6" dur="3s" repeatCount="indefinite"/>
  </feGaussianBlur>
</filter>