Ant Motion

Выравнивание по центру

Анимационные спецификации и компоненты Ant Design.

Зависимости

DevDependencies

Что такое Ant Motion?

Ant Motion — это спецификация дизайна движения от Ant Design, а также комплексное решение с множеством готовых анимаций для ваших приложений React.

Возможности Ant Motion:

— создание аккуратных анимаций с помощью компонентов React с простой конфигурацией; — создание красивой целевой страницы с движениями за несколько шагов.

Демоверсии:

— анимации списков; — подробное объяснение эффекта переключения; — сортируемый анимированный список перетаскивания; — расширение эскизов с анимацией деталей; — и многое другое.

Спецификация

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

Компоненты анимации:

1. rc-tween-one (http://motion.ant.design/components/tween-one) — это оболочка React для анимации ваших компонентов. Вы можете выполнять все анимации стилей, включая transform3d, fuzzy и другие эффекты, вы также можете выполнить анимацию кривой Безье. Подробные параметры см. в API.
2. rc-animate (http://motion.ant.design/components/animate) — на одном элементе в соответствии со статусом анимации отображается скрытый, необходимо объединить css или другой сторонний класс анимации вместе; подробные параметры см. в API.
3. rc-queue-anim (http://motion.ant.design/components/queue-anim) — добавляет последовательный подход к рендерингу группы элементов. Подробные параметры см. в API.
4. rc-scroll-anim (http://motion.ant.design/components/scroll-anim) — с помощью простой конфигурации вы можете добавить анимации, которые следуют за полосой прокрутки на элементах страницы. Подробные параметры см. в API.
5. rc-banner-anim (http://motion.ant.design/components/banner-anim) — с простой конфигурацией вы можете настроить современный и профессиональный слайдер баннера. Подробные параметры см. в API.

Решение целевой страницы

Целевая страница официально запущена, подробнее. 🎉🎉🎉

Это основано на компонентах React Ant Motion, чтобы следовать спецификациям дизайна Ant Design для завершения демонстрационной страницы, вы можете быстро и гибко настроить шаблон страницы по своему желанию.

Он предоставляет пример одного элемента и пример полной страницы после настройки.

ant-motion-dva-cli-example

umi-example

Подробнее.

Разработка

npm install
npm start

Перейдите на http://localhost:8111.