Използвайте непрекъсната анимация, за да подобрите потребителското изживяване във вашето приложение React Native и да го направите по-завладяващо и оживено.
Една от ключовите характеристики на Animated API на React Native е Animated.loop() метод, чрез който можете да създадете непрекъсната анимация, която се повтаря безкрайно.
Ще проучим как да използваме метода Animated.loop() за създаване на непрекъсната анимация в React Native и ще научим как да персонализираме и подобрим тези анимации.
Разбиране на метода Animated.loop().
За да използвате метода Animated.loop(), първо трябва да създадете Анимиран. Стойност обект. Тази стойност се актуализира на всеки кадър от анимационния цикъл и ще се използва за анимиране на целевия компонент.
След като Анимираният. Създаден е обект стойност, можете да го предадете на метода Animated.loop() заедно с обект за конфигуриране на анимация, който дефинира поведението на анимацията.
Този конфигурационен обект може да включва свойства като продължителност, облекчаване, и забавяне, които определят как ще се държи анимацията.
Цикъл на вашата анимация
По подразбиране методът Animated.loop() създава безкраен цикъл на анимацията, което означава, че анимацията ще продължи да се повтаря, докато не бъде спряна ръчно. Можете обаче да зададете продължителност за цикъла на анимацията, като зададете итерации свойство в обекта за конфигуриране на анимация.
Следният пример, който демонстрира как да използвате Animation.loop() за създаване на циклична ротационна анимация:
импортиране Реагирайте, {useState, useEffect} от"реагира";
импортиране { StyleSheet, View, Animated, Image } от"реагиране на родния";износпо подразбиранефункцияПриложение() {
конст [spinValue] = useState(нов Анимиран. Стойност (0));useEffect(() => {
конст spin = spinValue.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', "360 градуса"],
});Animated.loop(
Animated.timing(
spinValue,
{
toValue: 1,
продължителност: 2000,
useNativeDriver: вярно,
}
)
).старт();
}, []);връщане (
стил={{ ширина: 200, височина: 200, трансформирам: [{ завъртане: spinValue }] }}
източник={{ uri: ' https://reactjs.org/logo-og.png' }}
/>
</View>
);
}
конст стилове = StyleSheet.create({
контейнер: {
гъвкав: 1,
подравняване на елементи: "център",
justifyContent: "център",
},
});
В този пример създаваме Animated. Извиква се стойностен обект spinValue и задайте първоначалната му стойност на 0. След това се обаждаме на цикъл () метод на Animated.timing() обект, който приема spinValue на състоянието като свой аргумент. Обектът Animated.timing() описва как анимацията ще се развива във времето и в този случай той завърта изображение на 360 градуса.
За да зададем продължителността на цикъла, сме предали a продължителност свойство към обекта Animated.timing(), което ще определи колко дълго ще се изпълнява анимацията преди зацикляне. Задаваме свойството duration на 2000, което означава 2 секунди преди рестартиране.
Можете също така да зададете колко пъти анимацията да се повтаря, като подадете итерации свойство на метода loop().
Да предположим например, че искате анимацията да се повтори пет пъти, преди да спре. В такъв случай можете да извикате Animated.loop() с итерации: 5. Ако искате анимацията да се повтаря за неопределено време, можете да пропуснете итерации собственост напълно.
Чрез използване на Animation.loop(), задаване на неговата продължителност и правилно прилагане на CSS стил към върнатия изглед обект, можете да създавате плавни циклични анимации в React Native.
Работа със сложна анимация
Работата със сложна анимация не е толкова лесна, колкото работата с единична анимация. Те обикновено изискват малко повече работа, за да се гарантира, че се държат според очакванията.
Ето два съвета, които ще ви помогнат, когато повтаряте сложни анимации в React Native:
1. Разделете анимацията на по-малки части
Можете да разбиете сложните анимации на по-малки, по-прости анимации, които могат да се повтарят поотделно. Например сложна анимация, която включва както завъртане, така и транслация, може да бъде разделена на две отделни анимации, които ще се повтарят независимо. Като разделите анимацията на по-малки части, можете да опростите кода и да го направите по-лесен за работа.
2. Използвайте метода Animated.sequence().
The Animated.sequence() метод ви позволява да изпълнявате поредица от анимации една след друга. Този метод може да създаде сложни зациклени анимации чрез верижно завъртане на анимации с единичен цикъл. Можете да използвате Animated.sequence(), за да създадете анимация, която първо избледнява в изображение, завърта го и след това изчезва, повтаряйки цялата последователност, след като бъде готова.
Тези съвети, предоставени заедно с общи съвети за оптимизиране на вашите React Native приложения ще ви помогне да създадете ефективни зациклени анимации.
Експериментирайте с вашата анимация
Зациклените анимации в React Native могат да бъдат мощен инструмент за създаване на по-ангажиращо и динамично потребителско изживяване. Трябва да експериментирате с различни техники за създаване на зациклени анимации, за да постигнете както визуално привлекателна, така и ефективна анимация.
