Реализация параллакс-эффекта при скролле в мобильном приложении
Ваш заказчик просит параллакс при скролле? Первая реализация часто даёт дёрганье — 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?
Выбор зависит от платформы и сложности. Ниже таблица с подходами и производительностью:
| Платформа | Подход | Производительность | Сложность |
|---|---|---|---|
| iOS UIKit | layoutSubviews | ~60 FPS | Низкая |
| iOS SwiftUI | GeometryReader / onScrollGeometryChange | ~55–60 FPS | Средняя |
| Android MotionLayout | OnSwipe + ConstraintSet | ~60 FPS | Средняя |
| Android Compose | graphicsLayer + derivedStateOf | ~60 FPS | Низкая |
Дополнительно: при использовании MotionLayout FPS на Pixel 4 вырос с 40 до 60 (Рекомендации Google по анимации).
Как реализовать параллакс за 3 шага?
-
Подготовка изображения: сделайте его выше контейнера на
cellHeight * коэффициент (0.3)с каждой стороны — чтобы не было пустых краёв. -
Привязка к рендерингу: на iOS используйте
layoutSubviewsв ячейке, на Android —onDrawOverв ItemDecoration илиgraphicsLayerв Compose. - Тестирование на слабых устройствах: проверьте 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
| Устройство | До оптимизации | После оптимизации |
|---|---|---|
| iPhone SE 2nd gen | 45 FPS | 58 FPS |
| Pixel 4 | 40 FPS | 60 FPS |
| Xiaomi Redmi 9T | 35 FPS | 57 FPS |
Что входит в работу
- Анализ текущего экрана и прототипирование параллакса.
- Проектирование архитектуры анимации (выбор подхода под платформу).
- Интеграция на iOS (UIKit/SwiftUI) и Android (MotionLayout/Compose).
- Оптимизация: проверка FPS на реальных устройствах (iPhone SE, Pixel 4).
- Предоставление исходного кода, документации и рекомендаций по дальнейшей поддержке.
Сроки
Параллакс для hero-изображения на одном экране: полдня. Параллакс в списке с множеством элементов (RecyclerView / LazyColumn / LazyVStack): 1–2 дня. Стоимость рассчитывается индивидуально.
Получите консультацию по вашему проекту — мы подберем оптимальную реализацию. Свяжитесь с нами для детальной оценки.
Примеры из проектов
В одном из e-commerce проектов мы заменили наивный параллакс на MotionLayout — FPS вырос с 40 до 60 на Android. В другом, для iOS, использовали UICollectionViewCompositionalLayout с параллаксом в ячейках — UI оставался плавным даже при скролле тысячи элементов.Типичные ошибки при реализации параллакса
Первая ошибка — анимация на главном потоке. Использование 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. Мы обязательно тестируем на трёх поколениях устройств перед финальной сдачей проекта.
Избегая этих ошибок, вы получите плавный параллакс без компромиссов по качеству.