Як використовувати Reach Spring для анімації компонентів

Реактивна весна може допомогти вам з анімаціями, які, як відомо, хитріть в Інтернеті. Анімація CSS є найкращим вибором, але створюючи гладкий результат, вимагає ретельного жонглювання занять, тривалість та подій. Кидати JavaScript Framework Як реагувати в суміш лише ускладнює речі далі.

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

Реагувати навесні це бібліотека, яка побудована для боротьби з великою кількістю загальних вилучень, коли мова йде про анімацію в Інтернеті. Це займає дещо інший підхід, зосередивши увагу на фізиці над прямими тривалістьми та визначеними функціями полегшення. Це допомагає зберігати речі відчуття гладкого та природного.

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

У цьому підручнику ми будемо створювати компонент картки, який дозволяє користувачам оцінювати зображення. Перелічка картки, щоб розкрити оцінку зірки, і користувачі можуть натискати, щоб додати свої власні. Ми будемо використовувати нових гачків, що реагує на весну, що вимагає реагування версії 16,8 або вище. Перед початком, Завантажте файли підручників тут (і назад хмара зберігання ).

Якщо ви хочете побудувати сайт без складних процесів коду, використовуйте пристойний Веб-будівельник . І обов'язково вивчіть веб хостинг Варіанти теж.

01. Встановлення залежностей

Завдяки завантаженим файлами, залежність упаковки потрібно встановити, перш ніж ми можемо запустити. Це створює проект на основі APP, включає в себе реагування-весна Пакет і весь необхідний локальний сервер, встановлений, необхідний для початку роботи.

У командному рядку знайдіть файли проекту та встановіть, а потім запустіть їх.

 & gt; пряжа
& gt; Початок пряжі 

02. Створіть зображення в державі

По-перше, нам потрібні деякі зображення. Для цього навчального посібника ми йдемо на жорсткий код деяких зображень у стан заявки, але ці дані можуть виникнути з будь-якого джерела. Відкрийте додаток.js і створіть деякі зображення з підхожий гачок від реагування. Це дасть кожному зображенню початковий рейтинг, який ми можемо відображати та оновити пізніше.

 Const [Cards] = Usestate ([
createimage (image1),
createimage (image2),
createimage (image3)
]); 

03. Відображати кожну карту зображень

Оскільки зображення зберігаються в масиві, ми можемо петля за тією державою та створювати окремі компоненти для кожного. Логіка анімації для реагування весни буде жити всередині a & lt; ratingscard / & gt; Компонент, який ми можемо використовувати будь-де, нам потрібно.

Всередині методу Render of App.js, створіть копію цього компонента для кожної картки в масиві держави. Він отримає кожне значення в стані, включаючи зображення та початковий рейтинг.

 {cats.map ((картка, індекс) = & gt; (
& lt; рейтинговий ключ = {index} {... card} / & gt;
))} 

04. Додайте структуру картки

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

відчинено Ratingscard / index.js і додайте структуру картки. Нам потрібно застосувати зображення як фон до передньої картки, з назвою зрештою, що містить рейтинг.

 & lt; div classname = "ratingscard" & gt;
& lt; div
ClassName = "RatingsCard__Front"
стиль = {{
BESDIMAGE: `URL ($ {image})`
}}
/ & gt;
& lt; div classname = "ratingscard__back" / & gt;
& lt; / div & gt; 

05. Застосувати стилі на курсі

Будь-які стилі, які безпосередньо не оновлюються через наші анімації, можуть бути застосовані через CSS. Це включає в себе основний ефект 3D-тіней для кожної картки, коли виникає. Усередині Retivescard / style.css , Додайте деякі додаткові стилі, щоб вийти з роботи з сторінки на курсі, застосовуючи фільтр.

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

06. За замовчуванням встановити тінь

Раптова тінь на курсі - це досвід роботи. Тому ми повинні повільно перейти між державами, щоб тримати речі гладкими. Додайте тінь для падіння набору для картки, коли не зависає. Використовувати перехід майно, щоб анімувати між цими двома державами.

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

07. Утримуйте вибраний стан

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

На початку Рейтинговий Функція компонента, створіть визначення цього обраний держава.

 Const [вибраний, setselected]
 = Usestate (False); 

08. Визначте фліп-анімацію

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

Створіть весну для фліп-анімації. Цей зникає і поворот картки залежно від того, чи є картка обраний держава.

 const {непрозорість, трансформація}
 = використання ({{
Непрозорість: вибрано? 1: 0,
Перетворення: `Rotatey (
$ {вибрано? 180: 0} DEG) `
}); 

09. Перетворити до анімованого контейнера

Об'єкти, повернуті підробка Визначте їх анімацію, але не надайте числові значення, які нам потрібні. Точний анімований Фабрична функція перетравлює цю інформацію, а потім подає значення як цифри до компонентів.

Перетворювати Рейтинговий елемент використовувати анімований функція. Точний animated.div синтаксис розповідає функцію, щоб повернути a & lt; div & gt; .

 & lt; animated.div classname = "athingscard" & gt;
& lt; animated.div
ClassName = "RatingsCard__Front"
стиль = {{
BESDIMAGE: `URL ($ {image})`
}}
/ & gt;
& lt; animated.div classname =
"RatingsCard__Back" / & gt;
& lt; /animated.div> 

10. Анімація передньої картки

Реактивна весна - це лише анімація цінностей і не робить жодної анімації самого елементів. Ми можемо пов'язувати ці значення до стилю, і створити цю анімацію на льоту. Оновіть передню карту, щоб скористатися новим непрозорість і перетворення значення. У цьому випадку нам доведеться інтерполювати вартість непрозорості, яку ми незабаром вирішимо.

 & lt; animated.div
ClassName = "RatingsCard__Front"
стиль = {{
BESDIMAGE: `URL ($ {image})`,
непрозорість: непрозорість. Інтерсполат (
зворотнапротесність),
перетворення
}}
/ & gt; 

11. Анімація задньої картки

При горщиках картки, будь-яка анімація, яку ми застосовуємо до одного обличчя, потрібно буде застосовуватись у зворотному напрямку до іншого. Коли грають разом, вони будуть виглядати, як вони рухаються як один шматок.

У цьому випадку нам потрібно застосувати ті ж стилі до задньої картки, але цього разу інтерполювати перетворення Значення замість цього.

 & lt; animated.div
ClassName = "RatingsCard__Back"
стиль = {{
непрозорість,
Трансформування: перетворення
. Інтерполат (Inversetransform)
}}
/ & gt; 

12. Інтерполювати значення

Замість того, щоб безпосередньо застосовувати значення до властивостей CSS, ми можемо застосувати певну функцію для них, щоб відобразити їх значення для іншого. Цей процес називається інтерполяцією.

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

verswishopacity = o = & gt; 1 - o;
const inversetransform = t = & gt;
 `$ {t} обертання (180deg)`; 

13. Переключити стан на кліку

Перегортання картки повинна бути прив'язана до клацання. Як обраний Значення держави визначає, яке обличчя видно, ми повинні перемикати цю державу при натисканні на картку.

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

 & lt; animated.div
ClassName = "Рейтинги"
onclick = {() = & gt;
SetSelected (! Вибраний)}
& gt; 

14. Налаштуйте картку Flip Fitchics

Зараз наші анімаційні твори, але здається більше поплавкою, ніж фліп. Ми можемо змінити деякі значення на кожну весну, щоб змінити, як це поводиться. Всередині об'єкта налаштування навесні, створіть a конфігурація об'єкт для зменшення тертя та збільшення напруги. Це дасть анімацію, щоб відчути себе.

 Використання ({
Конфігурація: {
тертя: 22,
Напруга: 500
},
[...]
}); 

15. Створіть весну для ефекту нахилу

Незважаючи на те, що ефект Hover Efference CSS надає деякий відгук, ми можемо покращити, що далі, маючи анімацію нахилу, яка реагує на позицію курсора. При оновленні пружини на високій частоті, наприклад, рухається миша, ми можемо отримати кращу продуктивність, використовуючи набір функція, яка повертається кожною весну. Створіть нову весну для цієї анімації та тримайте його повернуту функцію.

 Const [реквізит, встановлений] = використання (() = & GT; ({
Стан: [0, 0, 1]
}
)); 

16. Застосувати стилі нахилу

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

Створити трансформатор Інтерполяційна функція та застосуйте стилі до основного Рейтинговий елемент.

 const transformard = (x, y, шкала) = & gt;
 `Перспектива (1000px) Rotatex ($ {x} deg)
retatey ($ {y} deg) шкала ($ {шкала});
[...]
& lt; animated.div
 ClassName = "Рейтинги"
 onclick = {() = & gt; SetSelected (! Вибраний)}
 стиль = {{перетворення:! вибраний & amp; & amp;
props.state.interpolate (
Transformard)}} & gt; 

17. Встановіть значення на руху миші

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

 onmouseleave = {() = & gt; Набір ({{
 Стан: [0, 0, 1]})}
onmousemove = {({clientic x: x,
 clienty: y}) = & gt; Набір ({{
 Держава: розрахунок цінностей (x, y)})
} 

18. Обчислити значення анімації

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

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

 Const CalculateValues ​​= (x, y) = & gt; ["
- (y - window.innerheight / 2) / 40,
(x - вікно.innerwidth / 2) / 40,
1.1]; 

19. Показати зірковий рейтинг

Кожне зображення має рейтинг, який нам потрібно відобразити у зірках на задній панелі картки. Ця логіка тримається всередині власного компонента, але спочатку потрібно застосовувати до задньої сторони.

По-перше, створіть нову частину держави, щоб утримувати рейтинг, а потім створити a & lt; sharrating & gt; компонент всередині спини & lt; div & gt; .

 Const [DrureRrating, Sefrating]
 = Usestate (рейтинг);
[...]
{обраний & amp; & amp; ("
 & lt; sharrating rating = {recornrating}
setrating = {setrating} / & gt;
)} 

20. Створити зірку анімацію

Рейтинги зірок збираються зникнути після того, як карта перевернулася. За допомогою usetrail Гачок від Reach Spring, ми можемо застосувати пружини до декількох компонентів, один за одним.

Відчини Sharrating / index.js і додати гачок. Перший аргумент визначить кількість пружин, щоб зробити.

 const animatedstars = usetrail (5, {
Конфігурація: {
тертя: 22,
Напруга: 500
},
від: {непрозорість: 0,
Перетворення: "шкала (0,8)"},
непрозорість: 1,
Перетворення: "Шкала (1)"
}); 

21. Нанесіть зірки до компонента

Останнє, що нам потрібно зробити, насправді відображати ці зірки. Точний аніморованістандарт Змінна тепер містить масив пружин, які ми можемо знову і застосовувати до картки.

Для кожної зірки покажіть & lt; animatedstar & gt; компонент всередині головного Пострільний div. Поширюйте стиль реквізиції, щоб застосувати всі ефекти до кожного компонента. Якщо натиснути, надішліть новий рейтинг батьків & lt; RatingCard & GT; компонент.

 {animatedstars.map ((реквізит, індекс) = & gt; (
& lt; animatedstar
Active = {index + 1 & lt; = Рейтинг}
onclick = {e = & gt; {
e.stoppropagation ();
Порада (індекс + 1);
}}
key = {index}
стиль = {{... реквізит}}
/ & gt;
))} 

Ця стаття була опублікована в журналі Creative Web-дизайну Веб-дизайнер . Купити проблему 288 або підписатися .

Читати далі:

• Розробити багаторазові компоненти реагування
• Кращі ноутбуки для програмування в 2019 році
• 35 інструментів веб-дизайну, щоб допомогти вам працювати розумнішим