Использование метода Animated.spring() для динамической анимации в React Native

Библиотека Animated API React Native может помочь вам создавать динамичные, плавные анимации без особых усилий.

Узнайте, как создавать анимации с эффектом пружины, а затем узнайте, как управлять их продолжительностью и скоростью и применять их в реальных сценариях.

Что такое динамические анимации?

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

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

Анимации в мобильных приложениях с годами становятся все более и более сложными. Анимированный API React Native по умолчанию был расширен, чтобы учесть эти сложности.

Анимированный.весна() метод, предоставляемый API, может анимировать объекты React Native, создавая динамический эффект.

Управление анимацией

При использовании Анимированный.весна() метод, вам нужно будет контролировать анимацию, чтобы убедиться, что она ведет себя так, как вы хотите. Animated предоставляет набор методов для ручного управления анимацией React Native и управления ею.

Одним из таких методов является останавливаться(), из-за чего анимация останавливается на текущем значении. Этот метод полезен, когда вам нужно отменить анимацию или сбросить ее в исходное состояние.

Например:

константа остановить анимацию = () => {
 позиция.стоп(ценить => {
 position.setValue(0);
 });
};

Обратите внимание, как вы можете использовать установить значение() метод для сброса значения позиции в исходное состояние 0.

Другой доступный вам метод перезагрузить(), который возвращает анимацию в исходное состояние. Этот метод полезен, когда вам нужно перезапустить анимацию.

Реальные приложения

Вы можете изучить практическое использование Анимированный.весна() методом создания простой анимации. Круглый мяч упадет на поверхность, когда пользователь взаимодействует с ним, а затем отскочит обратно в воздух. У вас уже должен быть проект React Native, с которым вы можете работать.

Сначала создайте переменную состояния для отслеживания положения мяча:

Импортировать Реагировать, {useState} от«реагировать»;
Импортировать {Анимированный} от«реагирующий нативный»;
константа Приложение = () => {
константа [позиция, setPosition] = useState(новый Анимированный. Ценить(0));

возвращаться (
трансформировать: [{ перевестиY: позиция }] }}>
 {/* Компонент шара здесь */}
 </Animated.View>
 );
};

Использовать Анимированный. Ценить для создания переменной состояния с именем позиция который будет отслеживать вертикальное положение мяча. Оберните Вид компонент в Анимированный. Вид так что вы можете применить анимацию к нему.

Затем создайте функцию анимации, которая заставит мяч падать и подпрыгивать:

константа стартанимация = () => {
 Animated.spring (позиция, {
 оценивать: 300,
 трение: 1,
 напряжение: 10,
 использовать нативдрайвер: истинный,
 }).начинать(() => {
 Animated.spring (позиция, {
 оценивать: 0,
 трение: 1,
 напряжение: 10,
 использовать нативдрайвер: истинный,
 }).начинать();
 });
};

Использовать Анимированный.весна() чтобы создать анимацию, которая будет перемещать мяч из начальной позиции 0 в конечную позицию 300. Указать трение и напряжение значения для управления эффектом отскока мяча при настройке использованиеNativeDriver к истинный для повышения производительности.

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

возвращаться (

трансформировать: [{ перевестиY: позиция }] }}>
 {/* Компонент шара здесь */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Этот код обертывает Анимированный. Вид компонент в TouchableБез обратной связи чтобы анимация срабатывала, когда пользователь нажимает на мяч. Вы также можете запустить анимацию при монтировании компонента, вызвав метод начать анимацию () функция внутри React использоватьЭффект() крюк.

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

Динамическая анимация в React Native

Вы видели, как реализовать анимацию падающего мяча с помощью Animated.spring(), но есть много других способов использовать его для создания динамических анимаций.

Например, вы можете использовать Animated.spring() для создания анимаций, имитирующих другие физические движения, такие как раскачивание или вращение объектов.

Комбинируя Animated.spring() с другими функциями анимации, такими как Animated.timing() или Animated.sequence(), вы можете создавать сложные и плавные анимации, улучшающие взаимодействие с пользователем.