Створення мікроанімацій елементів інтерфейсу мобільного додатку

##創建微анімаций елементів інтерфейсу мобільного додатка

Кнопка без візуальної реакції на натискання ощущається сломаною. Не «некрасивою»—саме сломаною. Користувач натискає ще раз, додаток обробляє подвійний тап. Мікроанімації—не декор, це частина функціональної зворотного зв'язку інтерфейсу.

Що таке мікроанімація й де вона живе

Мікроанімація—зміна стану одного UI-елемента тривалістю 80–300ms. Кнопка при натисканні, іконка переключателя при активації, лічильник при інкременті, індикатор завантаження. Все, що реагує на дію користувача або зміну даних.

Неправильно робити одне стандартне натискання для всіх кнопок. Spring-анімація з dampingRatio: 0.6 підходить для деструктивних дій (кнопка видалення), але виглядає дивно на кнопці «Далі» в онбординге.

Реалізація на iOS: від UIKit до SwiftUI

UIKit: scale + haptics = правильний тап

Мінімальна реалізація feedback на UIButton:

class SpringButton: UIButton {
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesBegan(touches, with: event)
        UIImpactFeedbackGenerator(style: .light).impactOccurred()
        UIView.animate(
            withDuration: 0.12,
            delay: 0,
            usingSpringWithDamping: 0.6,
            initialSpringVelocity: 8,
            options: [.allowUserInteraction]
        ) {
            self.transform = CGAffineTransform(scaleX: 0.94, y: 0.94)
        }
    }

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesEnded(touches, with: event)
        UIView.animate(
            withDuration: 0.3,
            delay: 0,
            usingSpringWithDamping: 0.45,
            initialSpringVelocity: 6,
            options: [.allowUserInteraction]
        ) {
            self.transform = .identity
        }
    }
}

.allowUserInteraction—обов'язково. Без нього кнопка не реагує на тапи поки анімується, що створює ощущение «залипання».

SwiftUI: символьні анімації та keyframe

SF Symbols 5 (iOS 17+) дають symbolEffect(_:)—готові анімації для системних іконок:

Image(systemName: "heart.fill")
    .symbolEffect(.bounce, value: isLiked)
    .symbolEffect(.variableColor.iterative.reversing, isActive: isLoading)

.bounce—один раз отпружинив при зміні isLiked. Не потрібно писати анімацію вручну.

Для складних багатокрокових мікроанімацій—KeyframeAnimator:

KeyframeAnimator(initialValue: CheckmarkState()) { value in
    Circle()
        .scaleEffect(value.scale)
        .opacity(value.opacity)
} keyframes: { _ in
    KeyframeTrack(\.scale) {
        LinearKeyframe(0.0, duration: 0.05)
        SpringKeyframe(1.2, duration: 0.2, spring: .bouncy)
        SpringKeyframe(1.0, duration: 0.15)
    }
    KeyframeTrack(\.opacity) {
        LinearKeyframe(0.0, duration: 0.05)
        LinearKeyframe(1.0, duration: 0.1)
    }
}

Це паттерн для анімації галочки після успішної дії—scale+opacity одночасно, з різними кривими.

Android: Jetpack Compose та AnimatedVisibility

У Compose мікроанімації будуються на animateFloatAsState, animateColorAsState та updateTransition:

val scale by animateFloatAsState(
    targetValue = if (isPressed) 0.93f else 1f,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessHigh
    ),
    label = "button_scale"
)

Box(modifier = Modifier
    .scale(scale)
    .clickable(
        interactionSource = interactionSource,
        indication = null  // забираємо ripple, замінюємо на spring
    ) { onClick() }
)

indication = null забирає стандартний ripple. Це спірне рішення: Material Design 3 передбачає ripple як стандарт. Забирати його варто тільки де є своя повноцінна заміна.

AnimatedVisibility з кастомними enter/exit—для появи елементів:

AnimatedVisibility(
    visible = showBadge,
    enter = scaleIn(
        animationSpec = spring(Spring.DampingRatioLowBouncy),
        transformOrigin = TransformOrigin(1f, 0f)
    ) + fadeIn(),
    exit = scaleOut(transformOrigin = TransformOrigin(1f, 0f)) + fadeOut()
) {
    Badge { Text(count.toString()) }
}

TransformOrigin(1f, 0f)—анімація від правого верхнього кута, як у бейджей сповіщень.

Lottie для іконок зі станами

Коли дизайнер хоче складну іконку—лайк, улюблене, кастомний переключатель—Lottie простіше, ніж програмно. Аніматор експортує JSON через Bodymovin з After Effects, інтегруємо через lottie-ios або lottie-android.

Проблема Lottie: файли можуть бути важкими. 200 KB JSON для іконки улюбленого—занадто. Оптимізуємо через lottie-web's dotLottie формат (.lottie—ZIP-архив), або обрізаємо зайві шари в редакторі.

Часті помилки

Анімувати backgroundColor напрямку через UIView—це Core Animation CATransaction без GPU-прискорення для кольору. Правильно: змінювати через UIView.animate або використовувати CABasicAnimation на backgroundColor шару.

Забувати про reduceMotion. UIAccessibility.isReduceMotionEnabled на iOS, Settings.Global.TRANSITION_ANIMATION_SCALE на Android. Користувачі з вестибулярними розладами вимикають анімації. Поважаємо це:

if UIAccessibility.isReduceMotionEnabled {
    // Простий fade замість scale+bounce
} else {
    // Повна анімація
}

Процес роботи

Збір UI-інвентарю: всі інтерактивні елементи в додатку. Узгодження з дизайнером: які елементи анімуються, які ощущення повинні передавати (впевненість, легкість, термінність). Розробка бібліотеки анімацій—переіспользуємі компоненти під кожен тип. Haptic feedback де це доцільно. Перевірка на reduceMotion.

Терміни

Бібліотека мікроанімацій для 10–15 елементів інтерфейсу—2–3 робочих дні. Якщо потрібна анімація через Lottie з нуля (створення JSON аніматором)—це окремий етап.