Близько 5 хвилин · React 16.8+ · React DOM
Початок
Від встановлення до жестів і анімації появи та виходу за шість кроків. Кожен крок — невеликий робочий компонент.
Встановлення
Animated не має залежностей під час виконання. React 16.8+ — peer-залежність.
Точку входу пакета позначено 'use client'. В App Router Next.js серверний layout може рендерити
AnimatedProvider; хуки йAnimated.<tag>використовуйте всередині Client Components.npm install @kkwaenggwari/animatedІмпорт
@kkwaenggwari/animatedрозпізнається у вашому редакторі.Зрушіть перше значення
useAnimatedValue(1)володіє живим числом упродовж усього життя компонента. Передайте його прямо вstyle: воно стане CSS-змінною, тож React не перемальовує, поки воно змінюється.timing(value, { toValue, duration }).start()рухає його. Повторне натискання на півдорозі починається з поточної прозорості.Підготовка прикладу…
Блок зникає й з’являється знову, а повторне натискання на півдорозі розвертає його з поточного місця.
Багато виходів з одного значення
interpolateперетворює значення на довжини, кути чи числа. Без easing це точнийcalc()тієї самої змінної, тож п’ять доріжок коштують стільки ж, скільки одна.Різні вхідні діапазони одного значення створюють каскад без п’яти окремих анімацій.
Підготовка прикладу…
Одне натискання рухає п’ять доріжок каскадом; зміна розкиду змінює лише діапазони.
Опишіть ціль
Animated.buttonрендерить звичайну кнопку.seed— перший кадр,pose— де елемент має бути зараз, аtempo— як він туди дістанеться.Коли
poseзмінюється на півдорозі, елемент повертає з того місця, де він на екрані, зберігаючи швидкість пружини.Підготовка прикладу…
Швидкі натискання на картки ніколи не змусять жодну стрибнути.
Підключіть введення
input(ref, moveInput(...))записує координати вказівника в значення.follow(target, source)змушує одне значення пружно йти за іншим.Усе, що оголошено у фабриці
useAnimated, належить компоненту: слухачі й пружини зупиняються під час демонтування або зміни залежності.Підготовка прикладу…
Картка нахиляється до вказівника й повертається на місце, коли вказівник іде.
Анімуйте вихід
Видалення дочірнього елемента React зазвичай прибирає його одразу.
Animated.Keepутримує дочірні елементи з key, доки не завершиться їхня позаdepart.waitрендерить нові дочірні елементи лише після завершення всіх виходів.Підготовка прикладу…
Закриті повідомлення йдуть із вибраним рухом, перш ніж зникнути.
Ви знаєте всю модель
Значення, цілі, введення й виходи використовують ті самі контролери, правила переривання й очищення. Посібники детально розбирають кожне.