106.9K+Download
Zur Nutzungsanleitung springen
Whiteboard Animationvon iart-ai

Whiteboard Animation Skill.

SVG-Zeichenanimationen mit einer Markerhand erstellen, die jedem Strich folgt.

  • Whiteboard
  • Erklärvideo
OpenDesign herunterladenNutzungsanleitung ansehen
Quellprüfung · whiteboard-animationSKILL.md
Aufgabe SVG-Zeichenanimationen mit einer Markerhand erstellen, die jedem Strich folgt. Ergebnisse Eine eigenständige HTML-Zeichenszene oder eine angeforderte Videokomposition. Vor dem Start Zeichenreihenfolge, Liniengrafiken und ein Markerhand-Asset mit erkennbarer Spitze mitbringen. Bei sprachsynchronem Zeichnen Erzähl-Timing ergänzen und HTML-Vorschau oder Videoausgabe ausdrücklich wählen.
Redaktionelle Zusammenfassung · Quelle geprüft am 2026-11-02 · kein generiertes Beispiel

01 Funktionen

SVG-Zeichenanimationen mit einer Markerhand erstellen, die jedem Strich folgt

Whiteboard-Szenen mit geordneten Strichen, kalibrierter Stiftspitze, Erzähl-Timing und visuellen Prüfungen an exakten Zeitpunkten erstellen.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

whiteboard-animation erzeugt die Illusion einer Hand, die ein Diagramm oder eine Beschriftung zeichnet. SVG-Striche werden der Reihe nach sichtbar, während das Bild einer Markerhand der aktuellen Zeichenspitze folgt. Handposition und sichtbarer Pfad teilen denselben Fortschrittswert und können deshalb zu einem genauen Zeitpunkt gemeinsam geprüft werden.

Die Quelle unterscheidet eine kurze Browserszene von einem Videoexport mit Sprechertext. Eine eigenständige Szene nutzt eine HTML-Datei und eine ansteuerbare Zeitleiste; ein vollständiger Film überführt dieselbe Mechanik in eine framegesteuerte Komposition. Strichreihenfolge, Abheben des Stifts und Erzähl-Timing gehören zum Design.

Erwartete Ergebnisse

  • Eine eigenständige HTML-Zeichenszene oder eine angeforderte Videokomposition.
  • Geordnete SVG-Striche und ein kalibriertes Markerhand-Asset.
  • Standbildnachweise der Hand während eines Strichs und des fertigen Boards.
Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

  1. 01
    Zeichenbare Grafik vorbereiten

    Die Illustration in offene Striche mit plausibler Zeichenreihenfolge umwandeln. Gefüllten Bereichen eine Kontur geben, die vor der Farbe erscheinen kann.

  2. 02
    Stiftspitze an den Strich binden

    Den Spitzenversatz im Hand-Asset messen und die Position mit demselben Fortschritt wie die Strichdarstellung steuern. Die Hand zwischen getrennten Pfaden abheben.

  3. 03
    Sequenzieren und prüfen

    Jede Zeichnung auf ihren Erzählabschnitt abstimmen und dann mitten im Strich einfrieren. Spitzenausrichtung, vollständigen Abschluss, Layout und Übergänge zwischen Board-Bereichen prüfen.

02 Einsatzbereiche

Wann einsetzen?

Zeichenreihenfolge, Liniengrafiken und ein Markerhand-Asset mit erkennbarer Spitze mitbringen. Bei sprachsynchronem Zeichnen Erzähl-Timing ergänzen und HTML-Vorschau oder Videoausgabe ausdrücklich wählen.

Gut geeignet

  • Ein Diagramm soll sich mit der Erklärung entfaltenSchrittweises Zeichnen lenkt Aufmerksamkeit auf den aktuellen Zusammenhang, statt das gesamte Board auf einmal zu zeigen.
  • Handschrift gehört zum EffektDie Quelle behandelt Glyphenpfade und Einblendungen in Lesereihenfolge.

Zu prüfende Grenzen

  • Gefüllte Grafik ist nicht automatisch zeichenbarEine gefüllte zusammengesetzte Form braucht Vorbereitung für eine glaubwürdige Einstrich-Darstellung.
  • Vertonter Export ergänzt eine PipelineDas Webbeispiel in einer Datei erzeugt allein keine MP4 mit Sprechertext.

Diese Eingaben mitbringen

  • Geordnete InhalteIllustrationen, Beschriftungen und vorgesehene Zeichenreihenfolge bereitstellen.
  • Hand-AssetEin Bild einer Markerhand liefern oder eines mit messbarer Stiftspitze freigeben.
  • Sprechertext und ZielVoiceover oder zeitlich markiertes Skript, Frame-Größe und nötiges Ausgabeformat einschließen.

03 Wichtige Entscheidungen

Wichtige Entscheidungen

  1. Überzeugende Zeichenspitze

    Gemeinsamer Fortschritt verhindert, dass die Hand der sichtbaren Linie vorauseilt.

  2. Zweckvolle Strichreihenfolge

    Abheben und nacheinander gezeichnete Elemente machen die Aktion physisch nachvollziehbar.

  3. Prüfbare Zwischenstände

    Ein Standbild mitten im Strich kann Fehler zeigen, die bei normaler Wiedergabe verschwinden.

04 Beispielbriefing

Ein konkretes Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Quelle und Einrichtung prüfen

Illustrationen, Beschriftungen und vorgesehene Zeichenreihenfolge bereitstellen.

Upstream-Quelldatei
https://github.com/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/whiteboard-animation/SKILL.md

Der folgende Verweis öffnet die Originalanleitung. Prüfe vor der Nutzung die Einrichtung des Repositorys; dies ist kein Installationsbefehl.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Rahmenbedingungen in diesem Briefing an, bevor Sie den Skill ausführen.

Beispiel-Briefing
Verwende whiteboard-animation, um mit meinen Linienzeichnungen und meinem Sprechertext einen dreistufigen Anmeldeprozess zu erklären. Zeige die Schritte nacheinander in gesprochener Reihenfolge und verwende durchgehend dieselbe Markerhand. Bereite offene Pfade vor und kalibriere die Spitze, damit sie am vordersten Zeichenpunkt bleibt. Halte Füllungen verborgen, bis ihre Konturen fertig sind, und hebe die Hand zwischen getrennten Zeichnungen ab. Liefere eine eigenständige HTML-Vorschau mit exakter Zeitansteuerung sowie einen fertigen Board-Zustand für reduzierte Bewegung. Prüfe Start, einen Moment mitten im Strich für jeden Schritt und das fertige Board, bevor du einen vertonten Videoexport vorschlägst.

Ergebnis prüfen

Prüfen Sie die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

  • Mitten im Strich einfrieren und prüfen, ob die Spitze auf dem gezeichneten Endpunkt sitzt.
  • Abheben, Pfadreihenfolge und Füllung nach Konturabschluss prüfen.
  • Vollständige Endstriche und ein lesbares statisches Board für reduzierte Bewegung verifizieren.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladenSchnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellinhaber
iart-ai
Repository
iart-ai/explainer-video-skills
Skill-Datei
SKILL.md
Lizenz
MIT
Geprüfter Stand
2026-11-02 · 3e2d411b725d
Redaktionelle Quellenzusammenfassung
SVG-Zeichenanimationen mit einer Markerhand erstellen, die jedem Strich folgt.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, keine Skill-Nutzung und keine Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Kann ich ein gefülltes SVG direkt animieren?

Die Quelle verlangt zeichenbare Striche oder vorbereitete Konturen. Eine gefüllte Silhouette allein bietet nicht den Pfad, dem ein Marker folgen würde.

Wie bleibt die Hand ausgerichtet?

Der dokumentierte Mechanismus tastet den Pfad mit demselben Fortschritt wie stroke-dashoffset ab und zieht den gemessenen Spitzenversatz von der Handposition ab.

Ist Sprechertext enthalten?

Zeichnen kann passend zum Sprechertext geplant werden. Ein fertig vertontes Video benötigt den framegesteuerten Videoweg, nicht nur die eigenständige HTML-Vorschau.

OpenDesign

Briefing und Designarbeit an einem Ort.

Halten Sie Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladenDesign-Skills durchsuchen
Upstream-Quelldatei
https://github.com/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/whiteboard-animation/SKILL.md