Реалізація паралакс-ефекту при скролі в мобільному додатку
Ваш замовник просить паралакс при скролі? Перша реалізація часто дає ривки — FPS падає до 45 на пристроях на кшталт iPhone SE 2nd gen. Ми розібралися, як робити правильно на iOS та Android без просадок. Інженери з 10+ років досвіду реалізували паралакс у 30+ проєктах, і тепер ділимося робочими підходами. Вартість впровадження паралаксу для одного екрану — від 200$ до 500$, для списку — від 800$ до 1500$. Економія при використанні нашого підходу складає до 30% часу розробки.
Паралакс створює візуальну глибину: фон рухається повільніше контенту. Але якщо прив'язати анімацію до main thread, отримуємо 40 FPS замість 60. На старих Android-пристроях ситуація гірша — до 35 FPS. Ми гарантуємо плавність на iOS 15+ та Android 11+.
Паралакс-ефект у мобільних додатках: що потрібно знати
Паралакс-ефект став стандартом UI/UX — він додає глибини та залучає користувача. Однак неправильна реалізація руйнує враження. У цій статті ми розглянемо правильні підходи для iOS і Android.
Чому паралакс-ефект у мобільному додатку на main thread — зло?
Обробка скролу через делегати (scrollViewDidScroll, OnScrollListener) блокує UI-потік: кожен кадр — recalculate layout. Правильні підходи прив'язані до draw pass: layoutSubviews в UIKit, graphicsLayer в Compose, MotionLayout на Android. Вони не викликають зайвих measure/layout, заощаджуючи до 30% обчислювальних ресурсів. Наш підхід з layoutSubviews у 2 рази швидший за scrollViewDidScroll на iPhone SE.
Як вибрати правильний 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 з анімації). Використання MotionLayout підвищує FPS в 1.5 рази порівняно з OnScrollListener.
Як реалізувати паралакс-ефект за 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
| Пристрій | До оптимізації | Після оптимізації |
|---|---|---|
| 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-зображення на одному екрані: півдня (від 200$). Паралакс у списку з багатьма елементами (RecyclerView / LazyColumn / LazyVStack): 1–2 дні (від 800$). Вартість розраховується індивідуально.
Отримайте консультацію щодо вашого проєкту — ми підберемо оптимальну реалізацію. Зв'яжіться з нами для детальної оцінки.
Приклади з проєктів
В одному з e-commerce проєктів ми замінили наївний паралакс на MotionLayout — FPS виріс з 40 до 60 на Android. В іншому, для iOS, використовували UICollectionViewCompositionalLayout з паралаксом у комірках — UI залишався плавним навіть при скролі тисячі елементів.Типові помилки при реалізації паралакс-ефекту
Найпоширеніша помилка — анімація на головному потоці. Використання scrollViewDidScroll для розрахунку та застосування offset безпосередньо блокує UI-потік, знижуючи FPS з 60 до 40–45 на iPhone SE. Правильний підхід: переносити трансформацію в layoutSubviews (UIKit) або graphicsLayer (Compose), де вона виконується на етапі рендерингу. Інша поширена помилка — недостатній розмір зображення: якщо його висота дорівнює висоті контейнера, при скролі з'являються темні краї. Потрібно додати запас 30–40% від висоти комірки. Також часто ігнорують кешування зображень (Kingfisher, Coil, Glide), що дає просадки при прокрутці вгору через повторне завантаження. Рекомендуємо налаштувати memory cache 100 МБ та disk cache 500 МБ. Нарешті, тестування тільки на флагманах приховує проблеми: iPhone 15 Pro та Pixel 9 впораються з будь-якою реалізацією, тоді як на iPhone SE або Xiaomi Redmi 9T FPS падає. Ми обов'язково тестуємо на трьох поколіннях пристроїв перед фінальною здачею.