106.9K+Скачать
Перейти к руководству
Motion Canvasавтор VideoZero

Motion Canvas Навык.

Пишите сцены Motion Canvas с генераторами, реактивными сигналами и переиспользуемыми узлами.

  • TypeScript
  • Canvas-анимация
Скачать OpenDesignОткрыть руководство по использованию
Обзор исходных материалов · motion-canvasSKILL.md
Задача Пишите сцены Motion Canvas с генераторами, реактивными сигналами и переиспользуемыми узлами. Результаты Код сцены Motion Canvas с существующей настройкой проекта. Перед началом Предоставьте существующий проект Motion Canvas, установленную версию и бриф сцены с порядком действий. Решите, какие значения будут общими сигналами и каким моментам нужны именованные события.
Редакционное описание · исходные материалы проверены 2026-11-02 · не сгенерированный пример

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

Пишите сцены Motion Canvas с генераторами, реактивными сигналами и переиспользуемыми узлами

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

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

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

motion-canvas — справочник фреймворка для написания сцен Motion Canvas на TypeScript. Объясняет генераторную последовательность, реактивные сигналы, ссылки и иерархию сцены, затем показывает их сочетание с фигурами, текстом, путями и медиа.

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

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

  • Код сцены Motion Canvas с существующей настройкой проекта.
  • Переиспользуемые сигналы, компоненты и временные последовательности.
  • Проект, готовый к настроенному процессу превью и рендера.
Смотреть пример задания

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

  1. 01
    Определите объекты сцены

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

  2. 02
    Свяжите состояние с таймингом

    Используйте сигналы для меняющихся значений и генераторы для последовательности. all() запускает действия вместе, yield* задаёт последовательность с ожиданием завершения анимации. Именованные события waitUntil() могут согласовать сцену с репликой озвучки.

  3. 03
    Проверьте переходы и выход

    Добавьте узлы входящей сцены до slideTransition(), чтобы они не возникли внезапно позже. Собственный useTransition() возвращает функцию завершения, которую нужно вызвать после анимации перехода. Проверьте настроенное превью или рендер и сохраните настройки выхода проекта.

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

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

Предоставьте существующий проект Motion Canvas, установленную версию и бриф сцены с порядком действий. Решите, какие значения будут общими сигналами и каким моментам нужны именованные события.

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

  • Кодовой анимации нужна точная последовательностьГенераторы и именованные события явно задают отношения действий.
  • Несколько объектов используют общее меняющееся значениеВычисляемые сигналы выводят геометрию из одного источника вместо ручного обновления каждого узла.

Ограничения

  • Фреймворк должен быть доступенНавык — справочник, а не встроенная рабочая среда Motion Canvas.
  • Отдельно от автоматизации редактораПеремотка, скриншоты и HTTP-управление рендером относятся к сопутствующему motion-canvas-agent.
  • Примерам нужны проверки проектаАдаптацией примеров должны управлять текущая версия фреймворка и настройки выхода.

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

  • Бриф сценыОпишите видимые объекты, порядок действий и объяснение или историю.
  • Настройка проектаПредоставьте текущие исходники Motion Canvas и установленную версию.
  • Тайминг и выходЗадайте длительность, события, размер кадра и нужный формат рендера.

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

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

  1. Реактивные связи сцены

    Вычисляемый сигнал синхронизирует зависимые размеры.

  2. Читаемая последовательность

    Генераторный код показывает ожидания, параллельные действия и переходы в исходнике.

  3. Переиспользуемые компоненты

    Собственные узлы и сохранённые состояния поддерживают повторяющиеся элементы и обратимые действия.

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

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

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

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

Опишите видимые объекты, порядок действий и объяснение или историю.

Исходный файл в репозитории
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas/SKILL.md

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

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

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

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

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

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

  • Проверьте связи сигналов и устойчивые ссылки на объекты.
  • Проверьте порядок, фоновые потоки и завершение переходов.
  • Отдельно проверьте настроенное превью и фактический результат рендера.

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

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

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

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

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

Владелец источника
VideoZero
Репозиторий
VideoZero/skills
Файл навыка
SKILL.md
Лицензия
Apache-2.0
Проверенный снимок
2026-11-02 · 670ff96af614
Редакционное резюме источника
Пишите сцены Motion Canvas с генераторами, реактивными сигналами и переиспользуемыми узлами.

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

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

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

Что дают функции-генераторы?

Они описывают действия сцены во времени через yields, ожидания и составные анимационные операции. Источник использует их как основной механизм последовательности.

Для чего сигналы?

Сигналы хранят меняющиеся значения и реактивно выводят другие, например размер фигуры из общего радиуса.

Есть ли автоматизация скриншотов?

Справочник охватывает создание сцен. Сопутствующий motion-canvas-agent документирует HTTP-управление и мост скриншотов работающего редактора.

OpenDesign

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

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

Скачать OpenDesignПросмотреть дизайн-навыки
Исходный файл в репозитории
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas/SKILL.md