Около 5 минути · React 16.8+ · React DOM

Начало

От инсталирането до жестовете и движението при влизане и излизане в шест стъпки. Всяка стъпка е малък работещ компонент.

1
Инсталиране
Animated няма зависимости по време на изпълнение. React 16.8+ е peer зависимост.
Входната точка на пакета е маркирана с 'use client'. В App Router на Next.js сървърен layout може да рендерира AnimatedProvider; използвайте hooks и 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) кара една стойност да следва друга с пружина.
Всичко, декларирано във factory на useAnimated, принадлежи на компонента: слушателите и пружините спират при демонтиране или промяна на зависимост.
Подготовка на примера…
Картата се накланя към показалеца и се успокоява, когато той се отдалечи.
Анимирайте излизането
Премахването на дъщерен елемент на React обикновено го маха веднага. Animated.Keep задържа децата с key, докато не приключи позата им depart.
wait рендерира нови деца само след като всички излизания приключат.
Подготовка на примера…
Затворените съобщения излизат с избраното движение, преди да изчезнат.

Вече знаете целия модел

Стойности, цели, вход и излизания споделят едни и същи контролери, правила за прекъсване и почистване. Ръководствата навлизат в дълбочина за всяко.

Инсталиране

Раздвижете първата стойност

Изведете много изходи от една стойност

Опишете цел

Свържете вход

Анимирайте излизането

Вече знаете целия модел