Анимация жестов панорамирования и двойного касания в React Native

Анимация жестов панорамирования и двойного касания в React Native

В последнее время элементы управления на основе жестов давали приложениям очень похожий на реальный опыт действий, выполняемых в приложении. Это одна из функций, которая естественным образом воспринимается пользователями или может быть легко выбрана. Элементы управления на основе жестов, работающие с анимацией, придают приложению некоторую живость и улучшают взаимодействие с пользователем.

В этой статье я покажу, как анимацию жестов панорамирования и анимацию жестов двойной табуляции можно настроить в проекте React Native. Исходный код этого руководства находится здесь, на Github.

Чтобы следовать этому руководству, необходимы базовые знания React Native, и у вас должен быть настроен React Native на вашем компьютере. Также необходимо настроить симулятор Android и iOS для тестирования приложения. Вы можете узнать больше о том, как настроить React Native и симуляторы Android и iOS здесь.

Первые шаги

Первая линия действий в этом руководстве — клонирование демонстрационного проекта, который я настроил для этого руководства по анимации жестов. Вы можете запустить приведенную ниже команду в своем терминале, чтобы клонировать демо-проект, или нажать здесь, чтобы получить его прямо с Github.

git-клон https://github.com/championuz/GestureAnimTest.git

После успешного клонирования откройте его в редакторе кода и перейдите в каталог проекта в терминале. Запустите приведенные ниже команды, чтобы загрузить модули узла и зависимости iOS, а затем создайте приложения на своих эмуляторах Android и iOS.

#Установить модули узла
npm install

# Перейдите в папку ios и установите зависимости iOS
cd ios && pod install

# Вернитесь в корневую папку проекта
cd ..

#Запуск в эмуляторе Android
npx react-native run-android

#Запуск в симуляторе iOS
npx react-native run-ios

Как только это будет успешно, ваши симуляторы Android и iOS будут отображаться следующим образом:

Настройка анимации жестов панорамирования

Первая анимация жестов, о которой я расскажу, — это анимация жестов панорамирования. Каждый раз, когда пользователь перемещает один или несколько пальцев по экрану, он совершает жест панорамирования. Чтобы этот жест был активным, должен быть обработчик жестов, и он должен следовать по пути, по которому движется палец (пальцы) пользователя по экрану, и включать это движение в компонент. Наконец, движение по экрану станет возможным благодаря анимации.

Таким образом, анимация жестов панорамирования включает в себя: Настройка обработчика жестов панорамирования. Применение жеста к компоненту. Анимация движения по экрану.

В этом уроке я буду использовать пакеты React Native Reanimated 2 и React Native Gesture Handler. Эти два пакета будут управлять настройкой жеста панорамирования и анимации. Это не потребует настройки специальных возможностей или запроса разрешения.

Двигаясь дальше, вы должны установить два пакета, используя приведенную ниже команду.

npm установить реактивный родной реанимированный обработчик реактивного жеста

После установки пакетов вы должны добавить следующий плагин в файл babel.config.js в корневую папку проекта.

плагины: [‘react-native-reanimated/plugin’],

После добавления этого остановите свой сервер метро и перезагрузите его, пока вы снова не запустите его. Команда:

npm start — — сброс-кэш

После перезапуска сервера метро перейдите в папку ios и загрузите соответствующие зависимости iOS, а затем перестройте приложения на своих эмуляторах Android и iOS. Команды для этого указаны выше. Подробнее об установке пакета react-native-reanimated можно узнать здесь.

Настройка обработчика жестов панорамирования

Настраивая обработчик жестов панорамирования, сначала вы должны установить следующие хуки из реактивной реанимированной библиотеки, используя:

import Animated, {useAnimatedGestureHandler, useAnimatedStyle, useSharedValue} из 'react-native-reanimated';
import {
PanGestureHandler,
GestureHandlerRootView
} из 'react-native-gesture-handler ';

Видеть это — жест панорамирования, который постоянно отслеживает движения пальца пользователя по экрану. Следующее, что нужно сделать, это определить общие значения для координат x и y, и эти общие значения также будут хранить координаты вида. Узнать больше об общей ценности можно здесь.

const pan = useSharedValue(false);
const startPosition = 0;
const x = useSharedValue(startingPosition);
const y = useSharedValue(startingPosition);

Далее будет добавлен обработчик событий, который будет реагировать на движения пальца пользователя по экрану. Обратите внимание, что useAnimatedGestureHandler — это хук для определения событий, поскольку он специально разработан для беспрепятственной работы с родным обработчиком жестов.

const newPanEvent = useAnimatedGestureHandler({
onStart: (event, ctx) =› {
pan.value = true;
ctx.startX = x.value;
ctx.startY = y.value;
},
onActive: (event, ctx) =› {
x.value = ctx.startX + event.translationX;
y.value = ctx. startY + event.translationY;
},
onEnd: (event, ctx) =› {
pan.value = false;
ctx.startX = x.value;
ctx.startY = y.value;
},
});

Теперь, чтобы применить отслеживаемое движение из состояния общего значения к стилям представления, будет использоваться хук useAnimatedStyle. Это означает, что от движения пальцев пользователя по экрану состояние общего значения обновляет стиль представления с текущей позицией, тем самым переводя компонент в обновленную позицию.

const animStyle = useAnimatedStyle(() =› {
return {
transform: [{ translateX: x.value }, { translateY: y.value }]
};
} );

Применение анимации жеста панорамирования к компоненту

Движение пальца пользователя по экрану отслеживается и может обновлять стиль представления, но это не будет эффективно, потому что вам нужно применить жест и стиль к вашему компоненту.

Для этого оберните компонент, к которому вы хотите применить анимацию жестов, с помощью GestureHandlerRootView.. Он действует как обычный компонент представления, но он создан для включения компонента, к которому применяется анимация жестов.

Внутри компонента GestureHandlerRootView создайте компонент PanGestureHandler. Поскольку жест панорамирования является непрерывным (это означает, что он включает в себя больше, чем касание экрана), добавьте параметр onGestureEvent, с которым будет передаваться newPanEvent, и анимация жеста панорамирования будет применена к заключенному компоненту.

Наконец, я создам компонент Animated.View, который будет заключать в себе целевой компонент, чтобы представление было интерактивным и его можно было анимировать. Затем применяемый стиль будет стилем, созданным для обновления представления общим значением движения пальца пользователя.

return (
‹View style={styles.sectionContainer}›
‹GestureHandlerRootView›
‹PanGestureHandler onGestureEvent={newPanEvent}›
‹Animated.View style={animStyle}›< br /> …..
‹/Animated.View›
‹/PanGestureHandler›
‹/GestureHandlerRootView›
‹/View›
);

Если вы реализовали это, как указано, к вашему приложению должен быть применен жест панорамирования.

Вы можете изменить параметр onEnd в обработчике событий, чтобы компонент возвращался в исходное положение после ответа на жест на экране. Чтобы придать ему более естественное движение при возвращении в исходное положение, добавьте событие withSpring.

onEnd: (event, ctx) =› {
pan.value = false;
x.value = withSpring(startingPosition);
y.value = withSpring(startingPosition);
},

Теперь, куда бы вы ни перемещали компонент в своем приложении, он вернется в исходное положение.

Повтор сеанса с открытым исходным кодом

OpenReplay – это пакет для воспроизведения сеансов с открытым исходным кодом, который позволяет вам видеть, что пользователи делают в вашем веб-приложении, помогая вам быстрее устранять неполадки. OpenReplay размещается на собственном сервере для полного контроля над вашими данными.

Начните получать удовольствие от отладки — начните использовать OpenReplay бесплатно.

Настройка жеста двойного касания

Чтобы настроить жест «Двойное касание», вам необходимо заключить целевой компонент в компонент обработчика жестов касания, импортированный из обработчика «реагировать на жесты», отформатировать его в зависимости от того, чего вы хотите достичь, а затем назначить ему операцию.

В этом уроке я хочу, чтобы маленький обведенный значок сердца был заменен красным значком сердца, когда изображение дважды нажимается, как это обычно происходит в Instagram. Я также хочу, чтобы он зацикливался, чтобы при другом двойном нажатии значок заполненного сердца заменялся значком сердца с контуром.

Во-первых, убедитесь, что TapGestureHandler импортирован из пакета обработчика жестов. Оберните компонент Image с помощью TapGestureHandler и обновите компонент Image до Animated.Image, чтобы сделать изображение интерактивным при применении жеста двойного касания.

Затем numberOfTaps следует установить на два (2). Обратите внимание, что количество нажатий по умолчанию равно одному, поэтому вам не нужно указывать количество нажатий для жеста с одним касанием.

onActivated будет использоваться для установки действия, которое должно срабатывать при двойном нажатии. На данный момент он должен войти в систему «Double Tapped! в консоли.

return (
‹View style={styles.sectionContainer}›
‹GestureHandlerRootView›
….
‹View style={styles.container}›
‹TapGestureHandler< br /> numberOfTaps={2}
onActivated={() =› (
console.log('Double Tapped!')
)}›
‹Animated.Image style ={styles.Image} source={{uri: 'https://uxmag.com/wp-content/uploads/2014/12/gestures-and-animations-small.jpg»}} /›
‹/TapGestureHandler›
….
‹/View›
….
‹/GestureHandlerRootView›
‹/View›
);

Дважды нажмите на изображение, и ваша консоль должна появиться вот так:

Теперь, чтобы установить действие, которое заключается в том, чтобы значок заполненного сердца заменял обведенный значок сердца при двойном нажатии, я создам состояние, используя хук React useState, и я установлю для state "onLiked ' значение false по умолчанию, и при двойном нажатии оно должно быть обратным его текущему состоянию. Это сделает цикл возможным, так что он будет принимать инверсное состояние при двойном нажатии.

const [нравится, setLike] = React.useState({
понравилось: false,
});

const updateLiked = () =› {
setLike({
onliked: !like.onliked,
});
};

Затем я назначу состояние обведенному значку сердца, а затем добавлю заполненный значок сердца, чтобы он отображался, если значок сердца соответствует действительности.

{like.onliked ?
‹Image style={styles.icon} source={require('./image/heartemp32.png')} /›
:
‹Image style={ styles.icon} source={require('./image/heartfilled32.png')} /›
}

Наконец, я назначу функцию updateLiked для onActivated в компоненте TapGestureHandler, чтобы функция срабатывала при двойном нажатии.

‹TapGestureHandler
numberOfTaps={2}
onActivated={updateLiked}›
‹Animated.Image style={styles.Image} source={{uri: 'https://uxmag. com/wp-content/uploads/2014/12/gestures-and-animations-small.jpg'}} /›
‹/TapGestureHandler›

Если вы реализовали это, как показано, дважды нажмите на изображение, работающее в вашем эмуляторе, и у вас должен появиться зацикленный значок сердца и контурный значок сердца.

Заключение

Я рассмотрел две анимации жестов, которые могут придать вашему приложению естественный вид и улучшить взаимодействие с пользователем. Я надеюсь, что это руководство поможет вам настроить анимацию Double Tap и Pan Gesture в вашем проекте React Native. Хорошо, если вы столкнетесь с какими-либо проблемами при работе с этим руководством.

СОВЕТ ОТ РЕДАКТОРА. Чтобы добавить еще один визуальный эффект, не пропустите нашу статью Добавление мерцающих эффектов в приложения React Native.

Первоначально опубликовано на https://blog.openreplay.com 16 сентября 2022 г.