Реализация анимации чарта/графика в мобильном приложении

Мы не раз видели, как заказчик приносит макет с диаграммой, где столбцы взлетают один за другим, а линия вырисовывается словно рукой художника. На первый взгляд — простая анимация. Но когда доходит до кода, выясняется, что готовая библиотека не умеет такой stagger-эффект, а кастомная реализация на Canvas требует глубокого понимания Core Animation или Android Canvas API. Мы берёмся за такие задачи и за 1-3 дня внедряем анимацию любого уровня сложности, будь то bar chart, line chart или круговая диаграмма. В этой статье разберём типовые проблемы и способы их решения.

Перед тем как выбрать библиотеку или писать с нуля, важно понимать, какие анимации нужны: простое появление или последовательный stagger, поддержка touch-событий и tooltip, работа с большими данными (500+ точек) без просадки FPS. Мы используем профилирование (Instruments, Android Profiler) на каждом этапе, чтобы гарантировать 60fps.

Как выбрать между библиотекой и кастомным Canvas?

Выбор между готовой библиотекой и кастомной реализацией — ключевое решение. Библиотеки вроде MPAndroidChart или Swift Charts дают 80% нужного за 20% времени, но кастомизация анимации в них ограничена. Например, MPAndroidChart поддерживает animateX() и animateY(), но настроить easing per-bar или сделать stagger-анимацию (столбцы появляются поочерёдно) — нельзя без кастомного Renderer. Кастомный Canvas оправдан, когда нужен нестандартный тип чарта, stagger-эффект, анимация отдельных точек или интерактивный tooltip.

Почему stagger-анимация важна для восприятия данных?

Stagger-анимация (поочерёдное появление элементов) привлекает внимание к каждому столбцу или точке, делая данные более читаемыми. Кастомная реализация на Canvas даёт в 3 раза больше контроля над анимацией по сравнению с готовыми библиотеками, что критично для сложных дашбордов. Мы реализовали её на Flutter через AnimationController + Interval:

// Каждый столбец анимируется с задержкой 80мс for (int i = 0; i < bars.length; i++) { final start = (i * 0.08).clamp(0.0, 1.0); final end = (start + 0.4).clamp(0.0, 1.0); animations[i] = Tween(begin: 0.0, end: bars[i].value).animate( CurvedAnimation( parent: controller, curve: Interval(start, end, curve: Curves.easeOutCubic), ), ); } 

На iOS аналогичный эффект достигается через CAKeyframeAnimation с keyTimes — каждый CAShapeLayer (один столбец) получает смещённый beginTime:

bars.enumerated().forEach { index, layer in let anim = CABasicAnimation(keyPath: "bounds.size.height") anim.beginTime = CACurrentMediaTime() + Double(index) * 0.08 anim.duration = 0.4 anim.timingFunction = CAMediaTimingFunction(name: .easeOut) layer.add(anim, forKey: nil) } 

Line chart анимируется через CAShapeLayer с strokeEnd: 0 → 1. Для добавления точек-маркеров, которые появляются в момент прохождения «кисти», нужно синхронизировать появление CALayer с прогрессом strokeEnd. Реализуем через CAAnimationDelegate.animationDidStop для каждого сегмента или через displayLink с отслеживанием presentation().strokeEnd.

Интерактивный tooltip: как не потерять FPS

Tooltip, следующий за пальцем по графику — отдельная задача. На iOS: UIGestureRecognizer → пересчёт координаты в значение данных → UIView.animate для tooltip. Важно использовать setNeedsDisplay() только для той части CALayer, где рисуется highlight-линия — перерисовка всего canvas убивает FPS при быстром движении пальца. Мы гарантируем 60fps даже при интенсивном взаимодействии благодаря инкрементальному рендерингу.

Что входит в работу

• Исходный код анимированного компонента на Swift/Kotlin/Dart/TypeScript
• Документация по кастомизации (цвета, шрифты, параметры анимации)
• Интеграция в существующий проект и настройка тестового окружения
• Оптимизация производительности (downsampling для наборов >500 точек, LOD)
• Гарантия 60fps на устройствах среднего сегмента

Мы разрабатываем мобильные приложения более 5 лет и реализовали свыше 15 проектов с анимированной графикой (финтех, аналитические дашборды). Для работы используем современный стек: SwiftUI + Combine, Jetpack Compose + Coroutines, Flutter 3.x. Рекомендации Apple по анимации: используйте CAMediaTiming для синхронизации.

Как реализовать stagger-анимацию за 4 шага

1. Инициализируйте AnimationController (или CADisplayLink).
2. Создайте массив задержек: delay = index * intervalTime.
3. Для каждого элемента примените анимацию Tween с CurvedAnimation и Interval.
4. Запустите общий контроллер — элементы начнут анимироваться последовательно.

Свяжитесь с нами, чтобы обсудить ваш график — оценим проект бесплатно. Закажите разработку анимации графика под ключ.