106.9K+Скачать
Перейти к руководству
Whiteboard Animationавтор iart-ai

Whiteboard Animation Навык.

Создавайте SVG-объяснения с прорисовкой и рукой с маркером, следующей каждому штриху.

  • Белая доска
  • Объясняющий ролик
Скачать OpenDesignОткрыть руководство по использованию
Обзор исходных материалов · whiteboard-animationSKILL.md
Задача Создавайте SVG-объяснения с прорисовкой и рукой с маркером, следующей каждому штриху. Результаты Отдельная HTML-сцена прорисовки либо запрошенная видеокомпозиция. Перед началом Подготовьте порядок рисования, линейную графику и руку с различимым наконечником. Если рисунок следует речи, добавьте тайминг озвучивания; явно выберите HTML-предпросмотр или видео.
Редакционное описание · исходные материалы проверены 2026-11-02 · не сгенерированный пример

01 Возможности

Создавайте SVG-объяснения с прорисовкой и рукой с маркером, следующей каждому штриху

Стройте сцены доски с порядком штрихов, калибровкой пера, таймингом озвучивания и визуальной проверкой точных моментов.

Процесс на основе источникаНе тест выполнения

Принцип работы

whiteboard-animation создаёт иллюзию руки, рисующей диаграмму или подпись. Штрихи SVG раскрываются по порядку, изображение маркера следует текущему кончику рисунка. Рука и видимый путь используют один прогресс, поэтому их можно проверить вместе в точный момент.

Источник отличает короткую браузерную сцену от экспорта видео с озвучиванием. Отдельная сцена использует один HTML и таймлайн с переходом по времени; полный фильм переносит ту же механику в покадровую композицию. Порядок штрихов, отрывы пера и тайминг голоса входят в дизайн.

Ожидаемые результаты

  • Отдельная HTML-сцена прорисовки либо запрошенная видеокомпозиция.
  • Упорядоченные штрихи SVG и откалиброванное изображение руки с маркером.
  • Свидетельства в стоп-кадрах: рука посередине штриха и готовая доска.
Смотреть пример задания

От задания до проверки

  1. 01
    Подготовьте рисуемую графику

    Превратите иллюстрацию в открытые штрихи с правдоподобным порядком. Заполненным областям дайте контур, который проявится раньше цвета.

  2. 02
    Привяжите наконечник к штриху

    Измерьте смещение наконечника на изображении руки; управляйте положением тем же прогрессом, что раскрытием штриха. Поднимайте руку между отдельными путями.

  3. 03
    Выстройте последовательность и проверьте

    Согласуйте рисунки с фразами озвучивания, затем остановитесь посередине штриха. Проверьте совпадение наконечника, завершение, раскладку и переходы секций доски.

02 Когда использовать

Когда использовать

Подготовьте порядок рисования, линейную графику и руку с различимым наконечником. Если рисунок следует речи, добавьте тайминг озвучивания; явно выберите HTML-предпросмотр или видео.

Хорошо подходит

  • Диаграмма должна раскрываться вместе с объяснениемПоследовательное рисование направляет внимание на текущую связь, а не показывает всю доску сразу.
  • Рукопись — часть эффектаИсточник рассматривает пути глифов и раскрытие в порядке чтения.

Ограничения

  • Залитая графика не рисуется автоматическиСплошной составной фигуре нужна подготовка для правдоподобного раскрытия по штрихам.
  • Озвученный экспорт добавляет конвейерОднофайловый веб-пример сам по себе не создаёт MP4 с голосом.

Что подготовить

  • Упорядоченный контентПредоставьте иллюстрации, подписи и задуманный порядок рисования.
  • Изображение рукиПредоставьте или одобрите руку с маркером, чей наконечник можно измерить.
  • Озвучивание и цельВключите голос или сценарий с таймингом, размер кадра и формат результата.

03 Важные решения

Важные решения

  1. Убедительный наконечник

    Общий прогресс не даёт руке опережать видимую линию.

  2. Осмысленный порядок штрихов

    Отрывы пера и последовательность сохраняют физическую понятность действия.

  3. Проверяемые промежуточные состояния

    Стоп-кадр внутри штриха выявляет дефекты, скрытые обычной скоростью.

04 Пример задания

Попробуйте конкретное задание

Приведённое ниже задание не тестировалось. Перед использованием проверьте настройку навыка.

Изучите исходные инструкции и настройку

Предоставьте иллюстрации, подписи и задуманный порядок рисования.

Исходный файл в репозитории
https://github.com/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/whiteboard-animation/SKILL.md

Ссылка ниже открывает инструкции автора. Перед использованием изучите требования к настройке в репозитории; это не команда установки.

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания
Используй whiteboard-animation для объяснения трёх шагов регистрации по моим линейным рисункам и озвучиванию. Показывай по шагу в порядке речи одной и той же рукой с маркером. Подготовь открытые пути и откалибруй наконечник на переднем крае. Скрывай заливки до окончания контуров, поднимай руку между рисунками. Предоставь отдельный HTML с переходом к точному времени и готовой доской для режима уменьшения движения. До предложения озвученного экспорта проверь начало, середину штриха каждого шага и итоговую доску.

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

  • Остановитесь внутри штриха и проверьте наконечник на конце видимой линии.
  • Проверьте отрывы пера, порядок путей и заливку после контура.
  • Убедитесь в завершённости штрихов и читаемости статической доски уменьшения движения.

OpenDesign предоставляет локальное дизайн-пространство для кодинг-агентов. Этот список не означает, что навык входит в комплект или что его внешние инструменты, учётные данные и программные зависимости включены.

Скачать OpenDesignЧитать краткое руководство

05 Источник и лицензия

Исходные материалы и лицензия

На этой странице описана зафиксированная версия источника по ссылке ниже. Поведение и требования апстрима могут измениться.

Владелец источника
iart-ai
Репозиторий
iart-ai/explainer-video-skills
Файл навыка
SKILL.md
Лицензия
MIT
Проверенный снимок
2026-11-02 · 3e2d411b725d
Редакционное резюме источника
Создавайте SVG-объяснения с прорисовкой и рукой с маркером, следующей каждому штриху.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Можно анимировать залитый SVG напрямую?

Источник требует рисуемых штрихов или подготовленных контуров. Одна залитая силуэтная форма не даёт путь маркера.

Как сохраняется совпадение руки?

Механизм берёт точку пути при том же прогрессе, что stroke-dashoffset, и вычитает измеренное смещение наконечника из позиции руки.

Озвучивание включено?

Можно планировать рисование под голос. Готовому озвученному видео нужен покадровый видеопроцесс, не только отдельный HTML-предпросмотр.

OpenDesign

Храните задание и работу над дизайном вместе.

Храните задание, исходные материалы и дизайн-работу вместе в локальном рабочем пространстве. Перед добавлением навыка в рабочий процесс проверьте его собственную настройку.

Скачать OpenDesignПросмотреть дизайн-навыки
Исходный файл в репозитории
https://github.com/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/whiteboard-animation/SKILL.md