Реализация анимации морфинга иконок в мобильном приложении
Кнопка «play → pause» с плавным переходом между иконками, hamburger-меню, трансформирующееся в крестик, иконка лайка, которая «прыгает» при нажатии — это не декор. Это обратная связь, которая убирает когнитивную нагрузку. Пользователь не читает подпись — он видит состояние через форму.
Технические подходы по платформам
На iOS морфинг иконок реализуется через CAShapeLayer и анимацию path. Два UIBezierPath должны иметь одинаковое количество контрольных точек — иначе Core Animation не сможет интерполировать между ними и даст артефакт в виде «схлопывания» в точку. Это самая частая ошибка: дизайнер экспортирует play-иконку с 3 точками, а pause — с 4, и результат неприемлем.
let morphAnimation = CABasicAnimation(keyPath: "path")
morphAnimation.fromValue = playPath.cgPath
morphAnimation.toValue = pausePath.cgPath
morphAnimation.duration = 0.25
morphAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
shapeLayer.add(morphAnimation, forKey: "morphing")
shapeLayer.path = pausePath.cgPath
Для сложных иконок с несовпадающим числом точек используем CGPath интерполяцию через промежуточный ключевой кадр или библиотеку Lottie — она берёт на себя всю математику.
На Android — AnimatedVectorDrawable с <animated-vector> и <objectAnimator на pathData. Android Studio поддерживает импорт SVG с автоматической нормализацией путей, но при сложных формах нормализатор иногда ломает совместимость точек. Проверяем через PathParser.createPathFromPathData и ручной аудит точек в векторном редакторе.
В Flutter два варианта: CustomPainter с Path.lerp для простых форм или Lottie для сложных. Path.lerp требует одинакового числа вершин — та же проблема. Для иконок с разной топологией (например, звезда ↔ круг) используем MorphableShape из пакета morphable_shape или промежуточные keyframe-состояния.
Lottie как универсальный инструмент
Когда морфинг сложнее чем play/pause — например, иконка переходит через 3–4 состояния с перекрывающимися элементами — правильный путь: дизайнер делает анимацию в After Effects или Rive, экспортирует в .lottie / .json, а мы воспроизводим через lottie-ios / lottie-android / lottie-flutter. Никакой математики в коде, полная точность дизайна.
Важный нюанс с Lottie: LottieAnimationView.setMinAndMaxProgress(0f, 0.5f) позволяет воспроизвести только первую половину анимации (например, переход A→B), а setMinAndMaxProgress(0.5f, 1f) — обратный переход (B→A). Это стандартный паттерн для двусостоянных иконок.
Что входит в работу
Получаем от дизайнера SVG-иконки или Lottie-файл. Если SVG — нормализуем пути (одинаковое число точек), конвертируем под целевую платформу. Реализуем анимацию с согласованными timing-параметрами. Добавляем haptic feedback там, где уместно. Проверяем на slow animations и в accessibility-режиме (Reduce Motion).
Срок: 1–3 дня в зависимости от количества иконок и сложности переходов.