106.9K+Скачать
Перейти к руководству
UI Animationавтор mblode

UI Animation Навык.

Создавайте, отлаживайте и измеряйте осмысленное движение интерфейса.

  • Движение UI
  • Уменьшение движения
Скачать OpenDesignОткрыть руководство по использованию
Обзор исходных материалов · ui-animationSKILL.md
Задача Создавайте, отлаживайте и измеряйте осмысленное движение интерфейса. Результаты Целевая реализация либо проверка движения интерфейса. Перед началом Предоставьте код компонента или чёткую референсную запись, частоту действия и целевые устройства. Определите, нужна проверка движения, изменение реализации или измеряемая реконструкция.
Редакционное описание · исходные материалы проверены 2026-11-02 · не сгенерированный пример

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

Создавайте, отлаживайте и измеряйте осмысленное движение интерфейса

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

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

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

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

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

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

  • Целевая реализация либо проверка движения интерфейса.
  • Измеренная по записи спецификация easing или пружины.
  • Материалы для передачи в разработку с таймингом, фазами свойств и наблюдениями проверки.
Смотреть пример задания

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

  1. 01
    Решите, зачем состояние движется

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

  2. 02
    Выберите или измерьте движение

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

  3. 03
    Протестируйте реальное взаимодействие

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

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

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

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

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

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

Ограничения

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

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

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

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

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

  1. Цель прежде украшения

    Система решений может и рекомендовать анимацию, и отклонять ненужную.

  2. Обработка прерывания

    Быстрые переключения выявляют проблемы перезапуска и смены цели, незаметные при обычном воспроизведении.

  3. Передача в разработку на основе измерений

    Отдельные тайминги свойств и подобранные параметры делают реконструкцию точнее.

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

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

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

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

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

Исходный файл в репозитории
https://github.com/mblode/agent-skills/blob/391508702523088f564fecfdd95ce76304efb117/skills/ui-animation/SKILL.md

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

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

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

Пример задания
Используй ui-animation для диагностики выдвижной панели по предоставленной записи и React-компоненту. Измерь открытие и закрытие отдельно с реальной частотой записи. Определи причину ощущаемой задержки: easing, начальная пауза или блокирующая главный поток работа. Сохрани мгновенный клавиатурный фокус и текущее поведение панели. Предложи минимальное изменение, затем проверь быстрые переключения и уменьшение движения. Если подбираешь пружину или кривую, укажи ограничения подгонки и сравни запись изменённого взаимодействия с референсом, не заявляя визуальное совпадение только по параметрам.

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

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

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

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

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

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

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

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

Владелец источника
mblode
Репозиторий
mblode/agent-skills
Файл навыка
SKILL.md
Лицензия
MIT
Проверенный снимок
2026-11-02 · 391508702523
Редакционное резюме источника
Создавайте, отлаживайте и измеряйте осмысленное движение интерфейса.

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

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

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

Может найти места для анимации?

Да. Маршрут поиска сообщает возможности по цели и частоте, включая отвергнутые предложения. Сам поиск не разрешает реализацию.

Зачем измерять открытие и закрытие отдельно?

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

CSS-правило уменьшения движения покрывает всё?

Не обязательно. Источник отмечает, что движению на JavaScript нужна собственная обработка уменьшения движения и проверка реальным взаимодействием.

OpenDesign

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

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

Скачать OpenDesignПросмотреть дизайн-навыки
Исходный файл в репозитории
https://github.com/mblode/agent-skills/blob/391508702523088f564fecfdd95ce76304efb117/skills/ui-animation/SKILL.md