Как создать непрерывную анимацию в React Native с помощью Animated.loop()

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

Мы рассмотрим, как использовать метод Animated.loop() для создания непрерывной анимации в React Native, и узнаем, как настраивать и улучшать эти анимации.

Понимание метода Animated.loop()

Чтобы использовать метод Animated.loop(), вам сначала нужно создать Анимированный. Ценить объект. Это значение обновляется в каждом кадре цикла анимации и будет использоваться для анимации целевого компонента.

Однажды Анимированный. Объект-значение создан, вы можете передать его методу Animated.loop() вместе с объектом конфигурации анимации, который определяет поведение анимации.

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

Зацикливание анимации

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

В следующем примере показано, как использовать Animation.loop() для создания зацикленной анимации вращения:

Импортировать Реагировать, {useState, useEffect} от«реагировать»;
Импортировать {Таблица стилей, вид, анимация, изображение} от«реагирующий нативный»;
экспортпо умолчаниюфункцияПриложение() {
константа [spinValue] = useState(новый Анимированный. Ценить(0));
 использоватьЭффект(() => {
константа спин = spinValue.interpolate({
 диапазон ввода: [0, 1],
 выходной диапазон: [«0 градусов», «360 градусов»],
 });
 Анимированный.цикл(
 Анимированный.тайминг(
 спиновое значение,
 {
 оценивать: 1,
 продолжительность: 2000,
 использовать нативдрайвер: истинный,
 }
 )
 ).начинать();
 }, []);
возвращаться (

 стиль = {{ ширина: 200, высота: 200, трансформировать: [{ вращать: spinValue }] }}
 источник={{ ури: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
константа стили = Таблица стилей.create({
 контейнер: {
 гибкий: 1,
 выравнивание элементов: 'центр',
 выравнивание содержимого: 'центр',
 },
});

В этом примере мы создаем Animated. Объект значения называется spinValue и установите его начальное значение равным 0. Затем мы вызываем петля() метод на Анимированный.время() объект, который принимает состояние spinValue в качестве аргумента. Объект Animated.timing() описывает, как анимация будет развиваться с течением времени, и в данном случае он поворачивает изображение на 360 градусов.

Чтобы установить продолжительность цикла, мы передали продолжительность объекту Animated.timing(), который будет определять, как долго будет выполняться анимация до зацикливания. Мы устанавливаем свойство продолжительности на 2000, что означает 2 секунды до перезапуска.

Вы также можете установить, сколько раз анимация должна повторяться, передав итерации свойство метода loop().

Например, предположим, что вы хотите, чтобы анимация повторялась пять раз перед остановкой. В этом случае вы можете вызвать Animated.loop() с помощью повторений: 5. Если вы хотите, чтобы анимация повторялась бесконечно, вы можете опустить итерации имущество полностью.

Используя Animation.loop(), установив его продолжительность и правильное применение стилей CSS к возвращаемому объекту представления, вы можете создавать плавные зацикленные анимации в React Native.

Работа со сложной анимацией

Работать со сложной анимацией не так просто, как с одиночной анимацией. Обычно им требуется немного больше работы, чтобы убедиться, что они ведут себя так, как ожидалось.

Вот два совета, которые помогут вам при зацикливании сложных анимаций в React Native:

1. Разбейте анимацию на более мелкие части

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

2. Используйте метод Animated.sequence()

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

Эти советы, предоставленные вместе с общие советы по оптимизации приложений React Native поможет вам создать эффективную зацикленную анимацию.

Экспериментируйте со своей анимацией

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