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

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

Разбиране на събития и жестове при докосване в React Native

React Native елементите са в състояние да реагират на докосване и жестове от потребител. React Native Gesture Responder може да открие тези събития и жестове при докосване.

Gesture Responder оборудва много компоненти в библиотеката React Native с тази функция, като Бутон и TouchableOpacity компоненти, които реагират на натискане или почукване.

Gesture Responder обаче оборудва само прости компоненти с прости жестове. За да обработва и открива по-сложни събития при докосване, React Native използва PanResponder API. Позволява ви да създавате персонализирани разпознаватели на жестове, които реагират на по-сложни взаимодействия с докосване, като щипане, завъртане или плъзгане.

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

Задействане на анимации със събития при докосване

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

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

Например, можете да използвате Animated API, за да анимирате непрозрачността на a TouchableOpacity бутон, когато се натисне, за да се създаде ефект на затихване:

импортиране Реагирайте, {useState, useRef} от"реагира";
импортиране { Изглед, TouchableOpacity, Animated } от"реагиране на родния";
конст AnimatedButton = () => {
// Използвайте useRef за достъп до Animated. Стойност екземпляр
конст opacityValue = useRef(нов Анимиран. Стойност (1)).текущ;
конст handlePress = () => {
 Animated.timing (opacityValue, {
 toValue: 0.5,
 продължителност: 500,
 useNativeDriver: вярно,
 }).старт();
 }
връщане (

непрозрачност: opacityValue }}>

 {/* Вашият компонент на бутона */}
 </TouchableOpacity>
 </Animated.View>
 </View>
 );
}
износпо подразбиране AnimatedButton;

В този пример, opacityValue е пример за Анимиран. Стойност което представлява непрозрачността на бутона. Когато натиснете бутона, handlePress изпълнява функция, която задейства анимация с помощта на Animated.timing() за анимиране на непрозрачността на бутона.

Задействане на анимации с промени в състоянието

Друг подход, който можете да предприемете, е да задействате анимации въз основа на определени промени в състоянието във вашето приложение. Можете да използвате Animated API, за да задействате анимации в отговор на много промени в състоянието, като например промяна в позицията, размера или съдържанието на компонент.

Например, можете да използвате useState и useEffect кукички за задействане на анимация като тази:

импортиране Реагирайте, {useState, useEffect} от"реагира";
импортиране { Изглед, Анимация, Бутон, Текст } от"реагиране на родния";
конст MyComponent = () => {
конст [fadeAnim, setFadeAnim] = useState(нов Анимиран. Стойност (0));
конст [текст, setText] = useState('Здравей свят');
 useEffect(() => {
// Използвайте куката useEffect, за да задействате анимацията при състояние „текст“.
// промени
 startAnimation();
 }, [текст]);
конст startAnimation = () => {
 Animated.timing(
 fadeAnim,
 {
 toValue: 1,
 продължителност: 1000,
 useNativeDriver: вярно,
 }
 ).старт();
 };
връщане (

непрозрачност: fadeAnim }}>
{текст</Text>
 </Animated.View>
„Промяна на текст“ onPress={() => setText(„Нов текст“)} />
 </View>
 );
};
износпо подразбиране MyComponent;

В този пример, useEffect hook ще задейства анимацията всеки път, когато стойността на състоянието на текст промени. The useEffect куката приема функция за обратно извикване като свой първи аргумент, която ще изпълнява всеки път, когато зависимостите, посочени във втория аргумент (в този случай, [текст]) промяна. Вътре в useEffect кука, startAnimation() стартира и задейства избледняващата анимация.

Динамичните анимации ще оживят вашето приложение

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

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