106.9K+Скачать
Перейти к руководству
text-to-lottieавтор diffusionstudio

Text to Lottie Навык.

Создавайте и исправляйте Lottie-анимации с проверкой в реальном плеере, а не только на валидность JSON. Text to Lottie ориентирован на локальный предпросмотр Skia Skottie из репозитория и выводит важные значения в редактируемые элементы управления.

  • Lottie
  • Движение
  • Skottie
Скачать OpenDesignОткрыть руководство по использованию
Обзор исходных материалов · text-to-lottieSKILL.md
Задача Создание и редактирование JSON-анимации Lottie. Результаты • lottie.json сцены • Необязательные редактируемые элементы управления • Покадровая проверка в локальном плеере Перед началом Используйте исходный проект плеера и предоставьте шрифты или рисунки, нужные сцене.
Редакционное резюме · источник проверен 2026-11-02 · не отрендеренная демонстрация

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

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

Источник связывает создание анимации с официальным локальным Skottie. Валидация JSON — одна проверка, а не доказательство правильного вида сцены.

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

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

Навык записывает lottie.json сцены и при необходимости controls.json внутри проекта плеера. Он выбирает основной рецепт для задачи и читает лишь необходимые дополнительные справки по шрифтам, преобразованию SVG, структуре анимации или управлению.

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

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

  • Lottie JSON сцены в выбранном проекте и каталоге сцены.
  • Необязательные подписанные элементы управления регулируемыми значениями анимации.
  • Проверка репрезентативных кадров в локальном плеере Skottie.
Смотреть пример задания

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

  1. 01
    Определите сцену

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

  2. 02
    Выберите рецепт и материалы

    Определите задачу анимации и предоставьте SVG или файлы шрифтов. Для логотипов, загрузчиков и оверлеев источник по умолчанию использует прозрачный фон.

  3. 03
    Выведите изменяемые значения

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

  4. 04
    Проверьте реальные кадры

    Проверьте JSON, откройте локальный плеер и изучите первый, средний и последний видимый кадры. Проверьте недостающие материалы, обрезку, порядок слоёв и тайминг.

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

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

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

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

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

Ограничения

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

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

  • Целевая сценаУкажите путь проекта и сцены и поясните, создаётся новая сцена или редактируется существующая.
  • Рисунки и файлы шрифтовПредоставьте разрешённый к использованию SVG или логотип и нужные шрифты. Укажите, какие фигуры и текст должны оставаться редактируемыми.
  • Бриф движенияЗадайте длительность, размер холста, прозрачность, поведение цикла и значения для будущей настройки.

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

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

  1. Валидный файл всё равно может быть пустой сценой

    Источник требует проверки в реальном плеере помимо валидации JSON. Успешный разбор не выявляет каждый отсутствующий шрифт или невидимый слой.

  2. Последний видимый кадр находится до op

    Конечная точка Lottie исключается из диапазона. Рекомендуется проверять кадр op минус один, а не считать саму конечную точку видимым содержимым.

  3. Управление меняет процесс редактирования

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

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

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

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

Проверьте настройку плеера

Прочитайте исходные инструкции и настройку репозитория. Ниже ссылка на источник, не команда установки.

Исходный файл в репозитории
https://github.com/diffusionstudio/lottie/blob/3c72912fad543897f90045ed4d355813837927fc/skills/text-to-lottie/SKILL.md

Используйте отдельную тестовую сцену до изменения существующих файлов проекта.

Опишите одну анимацию

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

Пример задания
Используй text-to-lottie для четырёхсекундной циклической анимации предоставленного SVG-логотипа. Создай новую сцену logo-loop в указанном тестовом проекте; не перезаписывай другие сцены. Сохрани прозрачный фон и пропорции логотипа. Выведи акцентный цвет в подписанный элемент управления. Используй осмысленное сглаживание, а не равномерное линейное движение. Проверь JSON, открой официальный локальный Skottie и изучи нулевой, средний и последний видимый кадры. Сообщи о недостающих материалах, обрезке или разрыве цикла; отличай выполненные проверки от ожидающих проверки.

Изучите отрендеренные кадры

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

  • Используется правильная новая сцена; существующие правки сохранены.
  • На проверенных кадрах логотип видим без обрезки, фон прозрачен.
  • Управление акцентом меняет нужные значения; цикл проверен в реальном плеере.

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

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

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

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

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

Владелец источника
diffusionstudio
Репозиторий
diffusionstudio/lottie
Файл навыка
SKILL.md
Лицензия
MIT
Проверенный снимок
2026-11-02 · 3c72912fad54
Редакционное резюме источника
Редакционная проверка по источнику процесса Text to Lottie: выбор сцены, создание Lottie, редактируемое управление и проверка в локальном Skottie. Для этой страницы пример анимации не запускался.

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

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

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

Валидный Lottie JSON гарантирует правильный рендер?

Нет. Источник требует изучить реальные кадры в локальном плеере. Загрузка шрифтов, порядок слоёв и обрезка всё ещё могут дать неверный результат.

Можно использовать файл в любом Lottie-плеере?

Проверенные инструкции адресованы локальному Skottie. Протестируйте экспортированную анимацию в нужной среде, прежде чем предполагать равную поддержку.

Цвета анимации могут быть редактируемыми?

Да. Источник предписывает использовать слоты и элементы управления с подписями и диапазонами для важных регулируемых значений. Конкретные элементы зависят от сцены.

OpenDesign

Храните анимацию вместе с её брифом.

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

Скачать OpenDesignПросмотреть дизайн-навыки
Исходный файл в репозитории
https://github.com/diffusionstudio/lottie/blob/3c72912fad543897f90045ed4d355813837927fc/skills/text-to-lottie/SKILL.md