Реализация анимации прогресс-баров и индикаторов в мобильном приложении
Прогресс-бар — это коммуникация. Линейный заполняется до 70% и зависает? Пользователь уже думает, что приложение зависло. Индикатор загрузки крутится одинаково при 0% и 99%? Нет ощущения прогресса. Анимация здесь — не украшение, а функция.
Типы и реализация
Линейный прогресс-бар — самый простой. На iOS: CALayer с анимацией bounds.size.width через CABasicAnimation. На Android: ObjectAnimator.ofInt(progressBar, "progress", from, to) с setInterpolator(DecelerateInterpolator()) — замедление к концу даёт ощущение «почти готово». В Flutter: TweenAnimationBuilder с LinearProgressIndicator(value: progress).
Критичный нюанс: никогда не обновляйте прогресс-бар чаще, чем раз в 100–200мс при сетевой загрузке. Дёрганое обновление каждые 10мс выглядит хуже, чем плавное раз в 200мс с анимацией между значениями.
Circular indicator — CAShapeLayer с strokeEnd на iOS или Canvas + drawArc на Android. Для кастомного дизайна с градиентом по кругу: CAGradientLayer + CAShapeLayer как маска — стандартный, но не очевидный приём.
Skeleton screens вместо спиннеров — правильный выбор для контентных экранов. Реализуем через shimmer-эффект: CAGradientLayer с анимацией locations от [-1, -0.5, 0] до [1, 1.5, 2]. На Android — библиотека Shimmer от Facebook или ValueAnimator + кастомный Drawable.
Индикатор с easing
Прогресс не должен двигаться линейно — это выглядит механически. CAMediaTimingFunction(controlPoints: 0.25, 0.46, 0.45, 0.94) (ease-out) создаёт ощущение нарастающей скорости в начале и плавного завершения. Для многоэтапного прогресса (загрузка → обработка → сохранение) анимируем каждый этап отдельно с микро-паузой между ними.
Срок: 1 день для стандартного прогресс-бара с кастомным дизайном и анимацией.