Реализация параллакс-эффекта при скролле в мобильном приложении

Реализация параллакс-эффекта при скролле в мобильном приложении

Ваш заказчик просит параллакс при скролле? Первая реализация часто даёт дёрганье — FPS падает до 45 на устройствах вроде iPhone SE 2nd gen. Мы разобрались, как делать правильно на iOS и Android без просадок. Инженеры с 5+ лет опыта реализовали параллакс в 30+ проектах, и теперь делимся работающими подходами.

Параллакс создаёт визуальную глубину: фон движется медленнее контента. Но если привязать анимацию к main thread, получаем 40 FPS вместо 60. На старых Android-устройствах ситуация хуже — до 35 FPS. Мы гарантируем плавность на iOS 15+ и Android 11+.

Почему параллакс на main thread — зло?

Обработка скролла через делегаты (scrollViewDidScroll, OnScrollListener) блокирует UI-поток: каждый кадр — recalculation layout. Правильные подходы привязаны к draw pass: layoutSubviews в UIKit, graphicsLayer в Compose, MotionLayout на Android. Они не вызывают лишних measure/layout, экономя до 30% вычислительных ресурсов.

Как выбрать правильный API?

Выбор зависит от платформы и сложности. Ниже таблица с подходами и производительностью:

Дополнительно: при использовании MotionLayout FPS на Pixel 4 вырос с 40 до 60 (Рекомендации Google по анимации).

Как реализовать параллакс за 3 шага?

1. Подготовка изображения: сделайте его выше контейнера на cellHeight * коэффициент (0.3) с каждой стороны — чтобы не было пустых краёв.
2. Привязка к рендерингу: на iOS используйте layoutSubviews в ячейке, на Android — onDrawOver в ItemDecoration или graphicsLayer в Compose.
3. Тестирование на слабых устройствах: проверьте FPS на iPhone SE 2nd gen (iOS) и Pixel 4 (Android). Если проседания более 5 FPS — уменьшите коэффициент до 0.2.

Примеры реализации

iOS: UIKit

override func layoutSubviews() { super.layoutSubviews() guard let superview = superview else { return } let cellFrameInSuperview = convert(bounds, to: superview) let parallaxOffset = cellFrameInSuperview.minY * 0.3 heroImageView.transform = CGAffineTransform(translationX: 0, y: -parallaxOffset) } 

iOS: SwiftUI

ScrollView { LazyVStack { ForEach(items) { item in GeometryReader { geo in let offset = geo.frame(in: .global).minY Image(item.imageName) .resizable() .scaledToFill() .frame(height: 250) .offset(y: offset * 0.3) .clipped() } .frame(height: 200) } } } 

Android: MotionLayout

<MotionScene> <Transition motion:constraintSetStart="@id/start" motion:constraintSetEnd="@id/end" motion:duration="1000"> <OnSwipe motion:touchAnchorId="@id/nestedScrollView" motion:touchAnchorSide="top" motion:dragDirection="dragUp" motion:moveWhenScrollAtTop="true" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/heroImage" android:translationY="0dp" ... /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/heroImage" android:translationY="-60dp" ... /> </ConstraintSet> </MotionScene> 

Android: Compose

val listState = rememberLazyListState() LazyColumn(state = listState) { itemsIndexed(items) { index, item -> val itemOffset by remember { derivedStateOf { val itemInfo = listState.layoutInfo.visibleItemsInfo.find { it.index == index } itemInfo?.let { (listState.layoutInfo.viewportEndOffset / 2f) - (it.offset + it.size / 2f) } ?: 0f } } Box(modifier = Modifier.height(200.dp).fillMaxWidth()) { Image( painter = painterResource(item.imageRes), contentDescription = null, modifier = Modifier .fillMaxSize() .graphicsLayer { translationY = itemOffset * 0.3f }, contentScale = ContentScale.Crop ) } } } 

Результаты замеров FPS

Что входит в работу

• Анализ текущего экрана и прототипирование параллакса.
• Проектирование архитектуры анимации (выбор подхода под платформу).
• Интеграция на iOS (UIKit/SwiftUI) и Android (MotionLayout/Compose).
• Оптимизация: проверка FPS на реальных устройствах (iPhone SE, Pixel 4).
• Предоставление исходного кода, документации и рекомендаций по дальнейшей поддержке.

Сроки

Параллакс для hero-изображения на одном экране: полдня. Параллакс в списке с множеством элементов (RecyclerView / LazyColumn / LazyVStack): 1–2 дня. Стоимость рассчитывается индивидуально.

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

Типичные ошибки при реализации параллакса

Первая ошибка — анимация на главном потоке. Использование scrollViewDidScroll для расчёта и применения offset напрямую блокирует UI-поток. На iPhone SE 2nd gen это снижает FPS с 60 до 40–45. Правильный подход: переносить трансформацию в layoutSubviews (UIKit) или graphicsLayer (Compose), где она выполняется на этапе рендеринга, а не layout.

Вторая ошибка — недостаточный размер изображения. Если высота изображения равна высоте контейнера, при скролле появятся тёмные края. Нужно добавить cellHeight × parallaxFactor сверху и снизу ещё на этапе подготовки ресурсов. Мы закладываем запас 30–40% от высоты ячейки.

Третья ошибка — отсутствие кэширования. Параллакс в LazyVStack или LazyColumn без кэширования изображений (Kingfisher, Coil, Glide) даёт просадки при прокрутке вверх — повторная загрузка занимает 200–500 мс. Рекомендуем настроить memory cache 100 МБ и disk cache 500 МБ.

Четвёртая ошибка — тестирование только на флагманах. iPhone 15 Pro и Pixel 9 справятся с любой реализацией. Проблемы проявляются на iPhone SE 2nd gen и Xiaomi Redmi 9T. Мы обязательно тестируем на трёх поколениях устройств перед финальной сдачей проекта.

Избегая этих ошибок, вы получите плавный параллакс без компромиссов по качеству.