Първи стъпки с анимации в React Native

Анимациите могат да вдъхнат живот на приложение, като го направят по-ангажиращо и интуитивно за потребителя. Но ако не сте запознати с React Native анимациите, започването може да бъде малко обезсърчително.

Разгледайте React Native анимации и разберете как можете да започнете да създавате красиви, гладки анимации.

Как работят основните анимации на React?

Анимациите могат да създават плавни преходи между различни екрани или елементи. Те могат да подчертават информация или да предоставят обратна връзка за действията на потребителите. Анимациите могат да бъдат прости или сложни и могат да използват различни техники, като 2D или 3D графики на движение.

Преносимостта на React Native го прави добре използван ако се насочвате към няколко платформи. Една от най-силните му характеристики е възможността да създава красиви анимации за мобилни приложения.

Можете да анимирате React Native обект просто като промените състоянието на позицията на желания компонент.

Например:

импортиране Реагирайте, {useState, useEffect} от"реагира";
импортиране { Изглед, стилова таблица } от"реагиране на родния";
конст Приложение = () => {
// Инициализиране на състоянието за проследяване на позицията на кутията
конст [boxPosition, setBoxPosition] = useState(0);
// Използвайте куката useEffect, за да актуализирате позицията на кутията на всяка 1 секунда
 useEffect(() => {
конст интервал = setInterval(() => {
// Актуализирайте позицията на кутията, като добавите 10 към текущата позиция
 setBoxPosition(предишна позиция => предишна позиция + 10);
 }, 1000);
// Връща функция за почистване, за да изчисти интервала, когато компонентът
// демонтира
връщане() => clearInterval (интервал);
 }, []);
// Задайте позицията на кутията, като използвате променливата състояние във вградения стил
конст boxStyle = {
 трансформиране: [{ translateY: boxPosition }]
 };
връщане (


 </View>
 );
};
конст стилове = StyleSheet.create({
 контейнер: {
 гъвкав: 1,
 подравняване на елементи: "център",
 justifyContent: "център",
 },
 кутия: {
 ширина: 100,
 височина: 100,
 Цвят на фона: 'син',
 },
});
износпо подразбиране Приложение;

Този код изобразява синя кутия, която се движи надолу всяка секунда. Анимацията работи с помощта на useEffect кука за създаване на таймер, който актуализира boxPosition променлива на състоянието на всяка 1 секунда.

Въпреки че това може да работи в някои ситуации, това не е най-добрият вариант. Актуализациите на състоянието в React Native работят асинхронно, но анимациите разчитат на синхронни актуализации на състоянието, за да работят правилно. Внедряването на вашата анимация асинхронно ще накара актуализациите на състоянието да не бъдат незабавно отразени в изобразения изход на компонента, което ще обърква времето на вашите анимации.

Те са няколко библиотеки за анимация като Анимиран библиотека, реагира-роден-реанимиран, и реагира-роден-анимационен за изграждане на ефективни анимации в React Native. Всяка от тези библиотеки за анимация премахва проблема с асинхронните актуализации на състоянието и е идеална.

React Native Animated API

Animated е API, който React Native предоставя. Можете да го използвате, за да създавате плавни анимации, които реагират на потребителски взаимодействия или промени в състоянието.

Анимираният API ви позволява да създавате анимирани стойности, които можете да интерполирате и картографирате към различни стилови свойства на вашите компоненти. След това можете да актуализирате тези стойности с течение на времето, като използвате различни методи за анимация. След това стиловете на вашите компоненти ще се актуализират, когато анимираните стойности се променят, което ще доведе до плавни анимации.

Animated работи много добре със системата за оформление на React Native. Поради това вашите анимации ще бъдат правилно интегрирани с останалата част от вашия потребителски интерфейс за още по-добър външен вид.

За да започнете да използвате Animated във вашия проект React Native, трябва да импортирате Анимиран модул от „реагирам нативно във вашия код:

импортиране {Анимиран} от"реагиране на родния";

С импортирания Animated можете да започнете да създавате анимации. За да направите това, първо създайте анимирана стойност, която ще манипулирате в цялата анимация:

конст animatedValue = нов Анимиран. Стойност (0);

The Анимиран. Стойност е клас в React Native Animated API, който представлява променлива стойност. Можете да го инициализирате с първоначална стойност и след това да го актуализирате с течение на времето, като използвате различни методи за анимация, предоставени от Animated API, като .време (), .пролет(), и .разпад(), като посочите продължителността на анимацията, функцията за облекчаване и други параметри.

Анимираната стойност е подобна на стойност на състояние в компонент на React.

Можете да инициализирате Анимиран. Стойност с първоначалната стойност на състоянието на компонент и след това го актуализирайте с течение на времето, като използвате setState метод.

Например, имате компонент, който има стойност на състоянието броя, което представлява броя пъти, когато потребителят е щракнал върху този бутон.

Можете да създадете Анимиран. Стойност и го инициализирайте със стойността на първоначалното състояние на броя:

конст Приложение = () => {
конст [count, setCount] = useState(0);
конст animatedValue = нов Анимиран. Стойност (брой);
};

След това, когато броя актуализации на стойността на състоянието, можете да актуализирате animatedValue също:

конст handlebuttonClick = () => {
 setCounter (брой + 1);
 Animated.timing (animatedValue, {
 toValue: брой + 1,
 продължителност: 500,
 useNativeDriver: вярно
 }).старт();
};

Този пример се актуализира animatedValue използвайки Animated.timing() метод всеки път, когато потребител щракне върху бутона. The animatedValue управлява анимацията и променя стойността си за 500 милисекунди.

Чрез свързване Анимиран. Стойност към стойност на състояние по този начин можете да създавате анимации, които отговарят на промените в състоянието на вашия компонент.

След като разбирате как да манипулирате анимирана стойност, след това можете да интерполирате анимираната стойност и да я съпоставите със стилово свойство на вашия компонент, като използвате Animated.interpolate() метод.

Например:

конст opacity = animatedValue.interpolate({
 inputRange: [0, 1],
 outputRange: [0, 1]
});
връщане (

 {/* съдържанието на вашия компонент */}
 </View>
);

Това ще създаде анимация, която постепенно избледнява в Преглед компонент, тъй като анимираната стойност се променя от 0 на 1.

Разбиране на типовете анимация

Разбирането на типовете анимация и как работят е важно за създаването на добри анимации.

Използвайки useNativeDriver опцията с Animated подобрява производителността. Тази опция ви позволява да разтоварвате анимации в основната нишка на потребителския интерфейс. Може значително да подобри производителността чрез намаляване на необходимото количество JavaScript обработка.

Въпреки това, не всички типове анимация поддържат родния драйвер. Опитът да използвате родния драйвер с анимации, които включват промени в цвета или оформлението, може да доведе до неочаквано поведение.

В допълнение, анимации, включващи сложни поредици, могат да причинят значителни проблеми с производителността на устройства с ограничена процесорна мощност или памет. Тези дефицити на производителност може също да бъдат забележими, ако вашият проект React Native работи с по-ниска версия, която не работи поддържат двигателя на Hermes.

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

Настанете се удобно с React Native Animations

Анимациите са мощен инструмент за създаване на ангажиращи и динамични потребителски интерфейси в приложенията на React Native. Animated API предоставя гъвкав и ефективен начин за създаване както на прости, така и на сложни последователни анимации.

Все пак е важно да вземете предвид въздействието на анимациите върху производителността и да изберете подходящия подход и библиотека, които да използвате за вашата ситуация.