Создание микроанимаций элементов интерфейса мобильного приложения

Создание микроанимаций элементов интерфейса мобильного приложения

Кнопка без визуальной реакции на нажатие ощущается сломанной. Не «некрасивой» — именно сломанной. Пользователь нажимает снова, приложение обрабатывает двойной тап. Микроанимации — не декор, это часть функциональной обратной связи интерфейса.

Что такое микроанимация и где она живёт

Микроанимация — изменение состояния одного 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 аниматором) — это отдельный этап.