Как создать лучшую анимацию React Native

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

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

Реагировать на родную анимацию

Реагировать на нативную анимацию библиотека — самый популярный способ создания анимации в приложении React Native.

Как Встроенная библиотека анимации React, Animated API является частью библиотеки Animated на основе JavaScript. Animated предоставляет набор классов и методов, позволяющих создавать плавные и плавные анимации. Есть несколько других отличных вариантов для создания анимации React Native, например Reanimated.

Однако создание хороших анимаций в React Native — это не только использование правильной библиотеки или установка правильных свойств. Это также касается понимания принципов анимации и способов их применения в контексте разработки мобильных приложений. Итак, вот несколько ключевых принципов, которые нужно понимать и учитывать при создании анимации.

Настройка продолжительности анимации

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

Продолжительность относится к количеству времени, которое требуется для полного запуска анимации. По умолчанию анимация в React Native имеет продолжительность 500 миллисекунд, но вы можете настроить ее так, чтобы она шла быстрее или медленнее.

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

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

Вот пример того, как добавить пользовательскую продолжительность к простой плавной анимации:

Импортировать Реагируйте, {useRef} от«реагировать»;
Импортировать { Анимация, просмотр } от«реагирующий нативный»;
константа FadeInView = (реквизит) => {
константа исчезатьАним = использоватьСсылка(новый Анимированный. Ценить(0)).текущий; 
 Реагировать.useEffect(() => {
 Анимированный.тайминг(
 фейдАним,
 {
 оценивать: 1,
 продолжительность: 2000, // установить пользовательскую продолжительность
 использовать нативдрайвер: истинный,
 }
 ).начинать();
 }, [угаснутьАним]);
возвращаться (
 стиль = {{
 ...реквизит.стиль,
 непрозрачность: фейдАним,
 }}
 >
 {реквизиты.дети}
 </Animated.View>
 );
}
экспортпо умолчаниюфункцияПриложение() {
возвращаться (
сгибаться: 1, alignItems: 'центр', JustifyContent: 'центр'}}>
ширина: 250, высота: 50, фоновый цвет: 'голубой'}}>
размер шрифта: 28, textAlign: 'центр', допуск: 10}}>Выцветание в</Text>
 </FadeInView>
 </View>
 );
}

При выборе продолжительности анимации важно найти правильный баланс между скоростью и плавностью.

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

Используйте функции плавности

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

Возьмем этот пример использования функции плавности:

Импортировать Реагируйте, {useRef} от«реагировать»;
Импортировать { Анимация, просмотр } от«реагирующий нативный»;
константа FadeInView = (реквизит) => {
константа исчезатьАним = использоватьСсылка(новый Анимированный. Ценить(0)).текущий; 
 Реагировать.useEffect(() => {
 Анимированный.тайминг(
 фейдАним,
 {
 оценивать: 1,
 продолжительность: 2000,
 смягчение: Animated.easeOut, // здесь используем функцию плавности
 использовать нативдрайвер: истинный,
 }
 ).начинать();
 }, [угаснутьАним]);
возвращаться (
 стиль = {{
 ...реквизит.стиль,
 непрозрачность: фейдАним,
 }}
 >
 {реквизиты.дети}
 </Animated.View>
 );
}
экспортпо умолчаниюфункцияПриложение() {
возвращаться (
сгибаться: 1, alignItems: 'центр', JustifyContent: 'центр'}}>
ширина: 250, высота: 50, фоновый цвет: 'голубой'}}>
размер шрифта: 28, textAlign: 'центр', допуск: 10}}>Исчезновение</Text>
 </FadeInView>
 </View>
 );
}

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

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

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

Ключевые кадры помогают со сложной анимацией

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

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

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

Например, допустим, вы хотите анимировать квадрат из начальной позиции (0, 0) в конечную позицию (100, 100) в течение одной секунды.

Вы можете создать массив ключевых кадров следующим образом:

константа ключевые кадры = [
 { Икс: 0, у: 0 },
 { Икс: 50, у: 50 },
 { Икс: 100, у: 100 },
];

В данном случае есть три ключевых кадра: один в начале анимации, один в середине и один в конце. Затем вы можете передать этот массив ключевых кадров в свою библиотеку анимации вместе с длительностью 1000 миллисекунд, чтобы создать плавную анимацию между ключевыми кадрами.

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

Воспользуйтесь преимуществами устройства с аппаратным ускорением

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

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

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