Реалізація анімації прогресс-баарів та індикаторів у мобільних додатках
Прогресс-бар — це комунікація. Лінійний заповнюється до 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мс з анімацією між значеннями.
Круговий індикатор — 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 день для стандартного прогресс-бара з кастомним дизайном та анімацією.