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

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

Ваш заказчик просит параллакс при скролле? Первая реализация часто даёт дёрганье — 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. Мы обязательно тестируем на трёх поколениях устройств перед финальной сдачей проекта.

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