Реализация анимации скелетонов загрузки (Skeleton Loading) в мобильном приложении

Реализация анимации скелетонов загрузки (Skeleton Loading) в мобильном приложении

Skeleton loading — плейсхолдеры, которые показывают форму контента пока данные грузятся. Серые прямоугольники, иногда с анимацией мерцания или shimmer. Цель — снизить воспринимаемое время ожидания: пользователь видит структуру экрана сразу, а не белый экран с spinner.

Правильный skeleton не просто «серые блоки» — его форма точно повторяет будущий контент, shimmer движется в одном направлении по всему экрану (не отдельно в каждом блоке), а переход к реальному контенту — плавный.

Android: Shimmer через Facebook Shimmer или кастомный drawable

Проще всего — библиотека com.facebook.shimmer:shimmer:0.5.0:

<com.facebook.shimmer.ShimmerFrameLayout
    android:id="@+id/shimmerContainer"
    app:shimmer_duration="1200"
    app:shimmer_angle="20"
    app:shimmer_base_alpha="0.7"
    app:shimmer_highlight_alpha="1.0">

    <!-- Layout-копия реального контента с заглушками -->
    <include layout="@layout/skeleton_user_card" />
</com.facebook.shimmer.ShimmerFrameLayout>

В коде:

shimmerContainer.startShimmer()

// По завершении загрузки:
shimmerContainer.stopShimmer()
shimmerContainer.visibility = View.GONE
realContentView.visibility = View.VISIBLE

Плюс подхода: shimmer синхронизирован по всем блокам skeleton через один ShimmerFrameLayout. Минус: лишняя зависимость, ShimmerFrameLayout пересчитывает bounds при каждом кадре — на сложных layout это заметно.

Кастомный вариант — AnimatedVectorDrawable с gradient animation как background:

<!-- res/drawable/skeleton_shimmer.xml -->
<animated-vector xmlns:android="..." xmlns:aapt="...">
    <aapt:attr name="android:drawable">
        <vector android:width="400dp" android:height="50dp" android:viewportWidth="400" android:viewportHeight="50">
            <path android:fillType="evenOdd"
                android:pathData="M0,0 L400,0 L400,50 L0,50 Z"
                android:fillColor="#E0E0E0" />
        </vector>
    </aapt:attr>
    <!-- animator для gradient offset -->
</animated-vector>

В Compose — InfiniteTransition для shimmer:

@Composable
fun ShimmerBox(modifier: Modifier = Modifier) {
    val shimmerColors = listOf(
        Color.LightGray.copy(alpha = 0.6f),
        Color.LightGray.copy(alpha = 0.2f),
        Color.LightGray.copy(alpha = 0.6f),
    )

    val transition = rememberInfiniteTransition(label = "shimmer")
    val translateAnim by transition.animateFloat(
        initialValue = 0f,
        targetValue = 1000f,
        animationSpec = infiniteRepeatable(
            animation = tween(1200, easing = FastOutSlowInEasing),
        ),
        label = "shimmer_translate"
    )

    val brush = Brush.linearGradient(
        colors = shimmerColors,
        start = Offset(translateAnim - 500f, 0f),
        end = Offset(translateAnim, 0f)
    )

    Box(modifier = modifier.background(brush, RoundedCornerShape(4.dp)))
}

Shimmer через Brush.linearGradient с меняющимся start/end — это GPU операция через graphicsLayer, не вызывает recomposition контента.

iOS: UIKit и SwiftUI

В UIKit — CAGradientLayer с CABasicAnimation:

func addShimmerAnimation(to view: UIView) {
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = CGRect(x: -view.bounds.width, y: 0,
                                  width: view.bounds.width * 3, height: view.bounds.height)
    gradientLayer.colors = [
        UIColor.systemGray5.cgColor,
        UIColor.systemGray6.cgColor,
        UIColor.systemGray5.cgColor
    ]
    gradientLayer.locations = [0, 0.5, 1]
    gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)

    view.layer.mask = gradientLayer

    let animation = CABasicAnimation(keyPath: "position.x")
    animation.fromValue = -view.bounds.width
    animation.toValue = view.bounds.width * 2
    animation.duration = 1.2
    animation.repeatCount = .infinity
    animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)

    gradientLayer.add(animation, forKey: "shimmerAnimation")
}

CABasicAnimation на CALayer работает полностью на render thread — main thread не участвует в каждом кадре анимации.

В SwiftUI — аналогично Compose через TimelineView (iOS 15+) или withAnimation + @State:

struct SkeletonView: View {
    @State private var phase: CGFloat = 0

    var body: some View {
        Rectangle()
            .fill(LinearGradient(
                gradient: Gradient(colors: [Color(.systemGray5), Color(.systemGray6), Color(.systemGray5)]),
                startPoint: .init(x: phase - 0.5, y: 0.5),
                endPoint: .init(x: phase + 0.5, y: 0.5)
            ))
            .onAppear {
                withAnimation(.linear(duration: 1.2).repeatForever(autoreverses: false)) {
                    phase = 2.0
                }
            }
    }
}

Переход от skeleton к контенту

Резкое появление контента на месте skeleton — грубо. Плавный crossfade:

// Compose
AnimatedContent(
    targetState = isLoading,
    transitionSpec = { fadeIn(tween(300)) togetherWith fadeOut(tween(300)) }
) { loading ->
    if (loading) SkeletonCard() else RealCard(data = data)
}

// SwiftUI
if isLoading {
    SkeletonCard()
        .transition(.opacity)
} else {
    RealCard(data: data)
        .transition(.opacity)
}
// withAnimation(.easeInOut(duration: 0.3)) { isLoading = false }

Сроки

Skeleton для одного экрана (список или детальный) с shimmer анимацией: 1 день. Компонентная система skeleton-ов для всего приложения с переходами: 1–2 дня. Стоимость рассчитывается индивидуально.