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

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

Параллакс при скролле — фоновое изображение движется медленнее контента, создавая иллюзию глубины. Применяется в карточках товаров, hero-секциях, профилях пользователей. Разница между плохой и хорошей реализацией — не в визуальной идее, а в том, происходит ли это на main thread или нет.

iOS: правильный параллакс без main thread

Наивная реализация через UIScrollViewDelegate.scrollViewDidScroll + обновление frame или transform изображения работает, но дёргается. Каждый кадр — вызов делегата на main thread, расчёт offset, обновление layout. На iPhone SE 2nd gen при быстром скролле — просадка до 45 FPS.

Правильный подход в UIKit — через CAScrollLayer или UIScrollView с отдельным layer, привязанным через CALayer transform. Но самый элегантный вариант — UICollectionViewCompositionalLayout с orthogonalScrollingBehavior и supplementaryContentInsetsReference. Для простого параллакса в ячейке достаточно:

override func layoutSubviews() {
    super.layoutSubviews()
    // Вызывается при изменении bounds — в т.ч. при скролле collection view
    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)
}

layoutSubviews в ячейке вызывается при каждом layout pass, включая скролл — это работает на main thread, но без лишних делегатов и DispatchQueue. Коэффициент 0.3 — 30% от смещения скролла. Изображение должно быть выше ячейки примерно на cellHeight * parallaxRatio с каждой стороны.

В SwiftUI параллакс через ScrollView и GeometryReader:

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) // видимая область меньше изображения
        }
    }
}

GeometryReader читает позицию в глобальной системе координат — это recalculates при каждом скролле. На iOS 17+ лучше использовать .scrollTargetBehavior и ScrollView с onScrollGeometryChange — более performant API.

Android: параллакс без janк

На Android наивная реализация через RecyclerView.OnScrollListener + view.translationY = offset * factor даёт аналогичные проблемы: scroll listener на main thread, лишние measure/layout passes.

Лучший путь — MotionLayout с OnSwipe скролл-триггером через NestedScrollView:

<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>

MotionLayout управляет анимацией на основе scroll progress — изображение смещается по мере скролла без callback на main thread.

Для RecyclerView с параллаксом в каждом item — RecyclerView.ItemDecoration c override onDrawOver:

class ParallaxDecoration(private val factor: Float = 0.3f) : RecyclerView.ItemDecoration() {
    override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        for (i in 0 until parent.childCount) {
            val child = parent.getChildAt(i)
            val imageView = child.findViewById<ImageView>(R.id.heroImage) ?: continue
            val centerOffset = (parent.height / 2f) - (child.top + child.height / 2f)
            imageView.translationY = centerOffset * factor
        }
    }
}

onDrawOver вызывается при каждом draw pass — это performant, так как привязано к рендерингу, а не к scroll event.

Jetpack Compose

@Composable
fun ParallaxCard(item: Item) {
    val density = LocalDensity.current

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp)
            .clip(RoundedCornerShape(12.dp))
    ) {
        var offsetY by remember { mutableStateOf(0f) }

        Box(modifier = Modifier
            .fillMaxSize()
            .onGloballyPositioned { coordinates ->
                // Вызывается при размещении — использовать осторожно
            }
        )

        // Используем ScrollState через LazyListState
        // Реализация через rememberLazyListState() + derivedStateOf
    }
}

В Compose правильный параллакс — через LazyListState и derivedStateOf:

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
            )
        }
    }
}

graphicsLayer применяет трансформацию на GPU без invalidate layout — самый performant способ в Compose.

Сроки

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