Реалізація анімації Icon Morphing у мобільних додатках
Кнопка «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 інтерполяцію через проміжні keyframe або бібліотеку 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 дні залежно від кількості іконок та складності переходів.