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

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

Почему анимации важны в реагировании на природу

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

Оригинальное название: The Two Animation Powerhouses

React Native предлагает две основные системы анимации: встроенный Animated API и более современная Reanimated library. Понимание их различий имеет решающее значение для выбора правильного инструмента.

Анимированный API

Включенный в React Native, Анимированный API работает, запуская анимацию на потоке JavaScript. Он предоставляет декларативные методы, такие как , и . Для простых переходов в блек-ин или слайде это совершенно адекватно. Однако, поскольку сложные или непрерывные анимации (например, жестовые) могут вызвать jank, когда поток JavaScript занят, Анимированный API лучше всего подходит для простых, изолированных эффектов.

Реанимированная библиотека

Reanimated (версия 2 или 3) запускает анимацию на нити пользовательского интерфейса через рабочие розетки, полностью минуя нить JavaScript. Это делает его идеальным для высокопроизводительной, жестовой или сложной цепной анимации. Reanimated предлагает более гибкий API с крючками, такими как , и . Он легко интегрируется с react-native-gesture-handler для плавного взаимодействия. Для любого приложения производственного класса Reanimated является рекомендуемым выбором.

Основные анимационные техники

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

1.Fade In / Fade Out

Изменение непрозрачности с течением времени является самым простым способом изящно показывать или скрывать элементы. Используйте для анимации от 0 до 1 (или наоборот. Для реанимации используйте и анимированный стиль. Фады отлично подходят для модальных наложений, подсказок или загрузки изображения.

2. Скользящие переходы

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

3. масштаб и отскок

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

4.Вращение

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

5.Формы морфинга (интерполяция)

Интерполяция — мощная концепция: она отображает диапазон ввода в диапазон вывода. Например, положение прокрутки может приводить в действие эффект параллакса, изменять цвета или изменять размер элементов. И анимированная, и реанимированная поддержка интерполяции. Reanimated работает внутри рабочих листов для максимальной производительности.

Расширенные шаблоны для профессиональных приложений

Как только вы будете довольны основными методами, объедините их, чтобы создать богатые взаимодействия.

Цепочка и последовательность

Запуск анимации один за другим с использованием (Animated API) или путем вложения и (Reanimated). Этот шаблон идеально подходит для потоков на борту, пошаговых вводов или пошаговых записей списка.

Параллельные анимации

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

Анимация, управляемая жестами

Интегрируйте react-native-gesture-handler с Reanimated для обработки свайпов, сковородок и щипцов. Например, жест swipe-to-delete, который переводит строку и показывает кнопку удаления. Reanimated работает полностью на нити пользовательского интерфейса, обеспечивая отзывчивость 60 кадров в секунду.

Анимация Layout

API React Native LayoutAnimation автоматически анимирует изменения в макете компонента (добавить, удалить, изменить размер). Хотя он ограничен в настройке, это способ добавить пол. Для большего контроля используйте Reanimated в сочетании с для анимации изменений макета вручную.

Переходы общих элементов

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

Использование анимационных библиотек

Вместо того, чтобы писать все с нуля, рассмотрите эти популярные библиотеки:

• Lottie — Рендер сложных векторных анимаций, экспортируемых из After Effects в виде файлов JSON. Идеально подходит для сложных, предварительно разработанных анимаций, таких как загрузка спиннеров, иллюстраций или микровзаимодействий. Библиотека интегрируется плавно.
• Moti — Построенный поверх Reanimated, Moti предоставляет декларативный API для общих шаблонов анимации (фаде, слайд, масштаб и т. Д.) с минимальным бойлерплатом.
• Анимированный (React Native) — По-прежнему полезен для легких эффектов, где Reanimated перебор. Например, простые заголовки параллакса или вращающиеся спиннеры.

Советы по оптимизации производительности

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

• Использовать нативный драйвер — Для анимированного API установите на или для запуска анимации на нативном потоке. Не все анимированные свойства поддерживают его (непрозрачность, преобразование, цвета делают; свойства компоновки не поддерживают).
• Предпочтите Reanimated для тяжелых анимаций — Reanimated работает полностью на потоке пользовательского интерфейса, поэтому он избегает блокировки потоков JavaScript. Всегда используйте Reanimated для жестовых или непрерывных анимаций.
• Избегать повторного создания анимации на каждом рендере — Воспоминания анимированных значений и стилей с использованием (Анимированный) или (Реанимированный).
• Измерение FPS — Используйте FPS-монитор React Native (встряхивающее устройство, включающее перф-монитор) или библиотеку, такую как , чтобы идентифицировать jank.
• Уменьшить трэш компоновки — Избегать анимационных свойств, которые вызывают перерасчет компоновки (например, , , ) без аппаратного ускорения. по сравнению с изменяющимися размерами.

import { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
// ... inside component
const scale = useSharedValue(1);
const animatedStyle = useAnimatedStyle(() => ({
 transform: [{ scale: scale.value }]
}));
// on touch start
scale.value = withSpring(0.95);
// on touch end
scale.value = withSpring(1);
// Apply animatedStyle to a component