Обои React Native Pexels.com с анимированной каруселью
Catalin Miron
0:00 / 0:00
Обои React Native Pexels.com с анимированной каруселью
14 547 просмотров · 1 год назад
Catalin Miron
35,4 тыс. подписчиков
14 547 просмотров · 1 год назад
🔥🔥 React Native Reanimated Carousel отображает коллекцию мобильных обоев, полученных из API Pexels, а также анимирует фон и слайды с помощью React Native Reanimated.
Извлечение данных с помощью React Query:
Обои извлекаются из API Pexels с помощью useQuery. Во время извлечения данных отображается индикатор загрузки.
Анимированная прокрутка:
scrollX — это общее значение, хранящее текущее положение прокрутки горизонтального слайдера изображений. Оно обновляется с помощью useAnimatedScrollHandler для отслеживания горизонтальной прокрутки и нормализации значения в зависимости от ширины и расстояния между слайдами.
Анимация: При прокрутке пользователем каждое изображение анимируется с помощью плавных перемещений, поворотов и масштабирования для создания глубины и фокусировки на центральном слайде.
Фон
Фоновое изображение синхронизируется с прокруткой, включая изменение прозрачности и положения, обеспечивая плавную визуальную обратную связь.
Горизонтальный FlatList:
Animated.FlatList используется для отображения изображений/обоев в виде горизонтально прокручиваемого списка. Прокрутка обновляет scrollX, управляя всеми анимациями.
----
👉👉 Доступ к более чем 120 анимациям React Native, крупнейшей в мире коллекции анимаций React Native: https://www.AnimateReactNative.com
----
👉👉 Есть вопросы? Присоединяйтесь к Discord: / discord .
Вы можете найти меня в:
Твиттер: / mironcatalin
Сайт: https://www.AnimateReactNative.com
---
#react-native-reanimated #react-native-animation #react-native-carousel #react-native-wallpapers #react-native-reanimated-carousel #reanimated-useAnimatedScrollHandler #reanimated-interpolate #reanimated