Как использовать React Spring для анимации компонентов

Реагистрационная пружина может помочь вам с анимацией, которые новеренно сложно реализовать в Интернете. CSS анимации Лучшим выбором, но создание гладкого результата, требует тщательного жонглирования классов, продолжений и событий. Бросать а JavaScript Framework Как реагируют в микс, только усложняет вещи дальше.

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

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

Хотя большую часть времени это используется для визуальных эффектов, библиотека будет переходить между двумя значениями независимо от того, используется ли это значение для стиля или нет. Например, его можно использовать для подсчета ряда подписчиков, чтобы подчеркнуть, насколько велико сообщество.

В этом руководстве мы сделаем компонент карты, который позволяет пользователям оценивать изображения. Карта переворачивает, чтобы раскрыть рейтинг звезды, и пользователи могут нажать, чтобы добавить свои собственные. Мы будем использовать новые реактивные реактивные крючки React Spring, которые требуют реагирования версии 16,8 или выше. Прежде чем ты начнешь, Загрузите учебные посылки здесь (и обратно их в облачное хранилище ).

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

01. Установите зависимости

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

В командной строке найдите файлы проекта и установите, затем запустите их.

 & gt; пряжа
и GT; Запуск пряжи 

02. Создание изображений в состоянии

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

 const [Cards] = umsetate ([
CreedImage (Image1),
CreedImage (Image2),
createImage (Image3)
]); 

03. Отображение каждой карты изображения

Поскольку изображения хранятся в массиве, мы можем закрутить это состояние и создать отдельные компоненты для каждого. Логика анимации для реактивной пружины будет жить внутри & lt; rotingingscard / & gt; Компонент, который мы можем использовать где угодно, надо.

Внутри метода Render of app.js создайте копию этого компонента для каждой карты в состоянии состояния. Он получит каждое значение в состоянии, включая изображение и первоначальный рейтинг.

 {Cards.map (((карта, индекс) = & gt;
& lt; rotingscard ключ = {index} {... карта} / & gt;
))} 

04. Добавить карту структуру

Прежде чем мы сможем добавить анимацию, карта нуждается в некотором содержании. Каждая карта имеет переднюю и спину, которая реализована как отдельная & lt; div & gt; Элементы слоистые друг на друга.

Открыть Ratingscard / index.js. и добавьте структуру карты. Нам нужно применить изображение в качестве фона на переднюю карту, а спина в конце концов, содержащих рейтинг.

 & lt; classname = "Ratingscard" & gt;
& lt; div
ClassName = «RatingsCard__front»
стиль = {{
Фон .Image: `URL ($ {image})`
}}
/ & gt;
& lt; justname = "ratingscard__back" / & gt;
& lt; / div & gt; 

05. Применить стили Hover

Любые стили, которые не обновляются непосредственно через наши анимации, могут быть применены через CSS. Это включает в себя базовый 3D-эффект тени для каждой карты, когда зависел. Внутри Ratingscard / style.css. Добавьте некоторые дополнительные стили, чтобы открыть карту выпрыгнуть из страницы на наличие, нанесение фильтра.

 .ratingscard: hover {
Фильтр: Drop-Shadow (0 14px 28px
RGBA (0, 0, 0, 0,25))
Drop-Shadow (0 10px 10px
 RGBA (0, 0, 0, 0,1));
} 

06. Установите тень по умолчанию

Внезапная тень на валют - это беспокойный опыт. Поэтому мы должны медленно переходить между государствами, чтобы вести себя гладкими. Добавьте тень Drop-Shader для карты, когда не зависейте. Использовать переход свойство, чтобы оживить между этими двумя государствами.

 .ratingscard {
[...]
Фильтр: Drop-Shadow (0 3PX 6PX
RGBA (0, 0, 0, 0.16))
Drop-Shadow (0 3PX 6PX
RGBA (0, 0, 0, 0,1));
Переход: фильтр 0,5с;
} 

07. Держите выбранное состояние

Нам нужно хранить и обновить информацию о том, какая сторона карты обращена вверх. Мы можем использовать встроенный React stestate. Крючок, чтобы определить начальное значение, и оно оно вернет текущее значение и способ обновления его.

В начале Ratingscard. Функция компонента, создать определить это выбранный государственный.

 const [выбрано, setselected]
 = umestate (false); 

08. Определите анимацию Flip

Реагистрационная пружина отвечает за переходные числа между одним значением и другим. Это можно сделать с весной и ISISTPRING крюк. Мы предоставляем ему некоторую информацию настройки, и она возвращает набор значений, которые обновляются в соответствии с его физическими расчетами.

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

 const {непрозрачность, преобразование}
 = ISISPRING ({{
Непрозрачность: выбрана? 1: 0,
Преобразование: `ROTATEY (
$ {выбран? 180: 0} deg) `
}); 

09. Преобразовать в анимированный контейнер

Объекты, возвращаемые ISISTPRING Определите их анимацию, но не предоставляйте нужные нам числовые значения. То анимированный Заводская функция передает эту информацию, а затем подает значения в виде номеров к компонентам.

Конвертировать Ratingscard элемент для использования анимированный функция. То анимировано Синтаксис сообщает функцию, чтобы вернуть & lt; div & gt; Отказ

 & lt; animated.div classname = "Ratingscard" & GT;
& lt; animated.div
ClassName = «RatingsCard__front»
стиль = {{
Фон .Image: `URL ($ {image})`
}}
/ & gt;
& lt; animated.div classname =
«RatingsCard__back» / & gt;
& lt; /anited.div> 

10. Анимируйте переднюю карту

Реактивная пружина анимирует только значения и не делает никакой анимации самого элементов. Мы можем связать эти значения в стиле PROP и создать эту анимацию на лету. Обновите переднюю карту, чтобы использовать новый непрозрачность и преобразовать значения. В этом случае нам нужно будет интерполировать значение непрозрачности, которое мы будем решать в ближайшее время.

 & lt; animated.div
ClassName = «RatingsCard__front»
стиль = {{
Фон .Image: `URL ($ {Image})`,
непрозрачность: непрозрачность .interpolate (
InverseoPacity),
преобразовать
}}
/ & gt; 

11. Анимируйте заднюю карту

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

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

 & lt; animated.div
ClassName = «RatingsCard__back»
стиль = {{
непрозрачность,
Преобразование: трансформация
.interpolate (InverseTransform)
}}
/ & gt; 

12. Интерполировать значения

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

Определите пару интерполяционных функций к вершине Ratingscard / index.js. Отказ Они применяют обратное как непрозрачность, так и преобразуют анимацию при выборе или отложениях.

Const Inverseopacity = O = & GT; 1 - O;
const inversetransform = t = & gt;
 `$ {t} ROTATEY (180DEG)`; 

13. Уключить состояние на клик

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

Добавьте прослушиватель на экране Ratingscard элемент. Когда это произойдет, он переключает логическое значение, проводимую в штате.

 & lt; animated.div
ClassName = "Ratingscard"
onclick = {() = & gt;
setselected (! выбранный)}
& gt; 

14. Настроить карту Flip Physics

Прямо сейчас наша анимация работает, но кажется больше плавающим, чем флип. Мы можем изменить некоторые значения на каждой пружине, чтобы изменить, как это ведет себя. Внутри объекта установки для пружины создайте конфигурация объект для уменьшения трения и увеличение натяжения. Это даст анимацию почувствовать Snappier.

 ISISPRING ({{{{
config: {
трение: 22,
Напряжение: 500.
},
[...]
}); 

15. Создать пружину для наклона эффекта

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

 const [rops, set] = innifypring (() = & gt; ({
Состояние: [0, 0, 1]
}
)); 

16. Применить стили наклона

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

Создать трансформация функция интерполяции и применять стили к основным Ratingscard элемент.

 const dransformcard = (x, y, шкала) = & gt;
 `Перспектива (1000px) Rotatex ($ {x} deg)
ROTATEY ($ {y y y} deg) ($ {scale}) `;
[...]
& lt; animated.div
 ClassName = "Ratingscard"
 onclick = {() = & gt; setselected (! выбранный)}
 Стиль = {{преобразование:! Выбранный & amp; & amp;
ropps.state.interpolate (
трансформация)}} & gt; 

17. Установить значения на Mouse Move

События мыши обеспечивают координаты курсора в то время. Мы заинтересованы в координатах клиента, чтобы получить положение курсора в рамках Viewport. Добавить мышь двигаться и оставить события во внешнее & lt; div & gt; Отказ Мы передаем координаты функции на перемещении и сброшенном к значениям по умолчанию, когда курсор оставляет & lt; div & gt; Отказ

 OnMouseLeave = {() = & gt; набор({
 Состояние: [0, 0, 1]})}
OnMouseMove = {({ClientX: X,
 Clientsy: Y}) = & gt; набор({
 Состояние: расчетные значения (x, y)})
} 

18. Рассчитайте анимационные значения

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

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

 Const CalculateValues ​​= (x, y) = & gt; [
- (y - window.innerheight / 2) / 40,
(x - window.innerwidth / 2) / 40,
1.1]; 

19. Показать звездный рейтинг

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

Во-первых, создайте новый кусочек состояния, чтобы провести рейтинг, затем создать & lt; ролинг & gt; компонент внутри задней части & lt; div & gt; Отказ

 const [текущая, настройка]
 = umestate (рейтинг);
[...]
{выбранный & amp; & amp; (
 & lt; ролительный рейтинг = {текущие страницы}
setrating = {setrating} / & gt;
)} 

20. Создать звездную анимацию

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

Открыть Приниматься в голову / index.js. и добавьте крючок в. Первый аргумент будет определять количество пружин.

 Const AnimatedStars = Потребитель (5, {
config: {
трение: 22,
Напряжение: 500.
},
От: {непрозрачность: 0,
Преобразование: «Шкала (0,8)»},
Непрозрачность: 1,
Преобразование: «Шкала (1)»
}); 

21. Применить звезды к компоненту

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

Для каждой звезды показать & lt; animatedstar & gt; Компонент внутри основных Звездный рейтинг девочка Распределите реквизиты стиля, чтобы применить все эффекты для каждого компонента. При нажатии, отправьте новый рейтинг родителю & lt; РейтингCard & GT; компонент.

 {AnimatedStars.map (((реквизит, индекс) = & gt;
& lt; animatedstar
Active = {index + 1 & lt; = рейтинг}
onclick = {e = & gt; {
E.STOPPropagation ();
Сетрирование (индекс + 1);
}}
ключ = {индекс}
Стиль = {{... реквизит}}
/ & gt;
))} 

Эта статья была первоначально опубликована в Creative Web Design Magazine Веб-дизайнер Отказ Купить проблему 288. или же подписываться Отказ

Прочитайте больше:

• Разработка многоразовых реагирования
• Лучшие ноутбуки для программирования в 2019 году
• 35 веб-дизайн инструменты, чтобы помочь вам работать умнее