Мы разрабатываем механику Stories — исчезающий контент — в мобильных приложениях под iOS, Android и кроссплатформу. Это нетривиальный UI-паттерн: прогресс-бары с анимацией 60 FPS, навигация по тапу, пауза при удержании, swipe-вниз для закрытия, предзагрузка медиа без задержек и серверный таймер на 24 часа. Ошибка в любом из этих элементов рушит пользовательский опыт. Наш опыт — 10+ лет мобильной разработки, более 50 реализованных проектов. Оценим ваш проект бесплатно.
Как мы реализуем прогресс-бары и навигацию
Горизонтальные прогресс-бары вверху — UIView с анимацией frame.width через CADisplayLink (iOS) или ValueAnimator (Android). CADisplayLink даёт 60/120 FPS синхронизацию с экраном — анимация плавная. Использовать Timer.scheduledTimer не рекомендуется: он дёргается, особенно при нагрузке. Длительность одной stories — для фото обычно 5–7 секунд, для видео — длина клипа (но не более 15 секунд). Прогресс-бар для видео синхронизируем с AVPlayer.currentTime() через addPeriodicTimeObserver, а не с системным таймером.
Навигация: тап в правую половину экрана — следующий сторис, в левую — предыдущий. UITapGestureRecognizer с проверкой location.x > bounds.width / 2. Удержание — UILongPressGestureRecognizer с minimumPressDuration: 0.1: при .began паузируем анимацию и AVPlayer, при .ended — возобновляем. Swipe-вниз для закрытия — интерактивный dismiss через UIPanGestureRecognizer. Масштабирование и перемещение экрана вслед за жестом (transform), при отпускании — либо полное закрытие (dismiss), либо возврат (UIViewPropertyAnimator).
Почему предзагрузка медиа критична?
Задержка при переключении сторис — главный UX-баг. Пользователь тапает — ждёт 1–2 секунды, пока загружается фото или видео. Правильное решение: предзагружать следующие 2–3 сторис. Для фото — SDWebImage.prefetchURLs() или Kingfisher ImagePrefetcher. Для видео — AVAsset.loadValuesAsynchronously(forKeys: ["playable"]) + AVPlayerItem создаём заранее, AVPlayer не запускаем до показа. На Android — Coil ImageLoader.enqueue(ImageRequest) для фото-предзагрузки, ExoPlayer с ConcatenatingMediaSource для видео: добавляем следующий элемент в очередь, ExoPlayer предзагружает буфер. Кэшируем предзагруженные ресурсы в памяти (не только на диске) — повторный просмотр сторис в рамках сессии должен быть мгновенным.
Создание stories: от фото до видео
Фото — PHPickerViewController + опциональный редактор (текст, стикеры). Текст поверх изображения: UITextView поверх UIImageView, при сохранении — объединяем в UIGraphicsImageRenderer. Стикеры — UIView с UIPanGestureRecognizer + UIPinchGestureRecognizer + UIRotationGestureRecognizer.
Видео — запись через AVCaptureSession прямо в stories-камере (как в Instagram/Snapchat) или выбор из галереи. Запись с ограничением 15 секунд — AVCaptureMovieFileOutput.maxRecordedDuration. Удержание кнопки для записи, отпускание — стоп. После создания — upload в фоне. Stories появляется в ленте сразу с placeholder, заменяется на реальный контент после загрузки.
Как работает таймер исчезновения?
24-часовой таймер — на стороне сервера, не клиента. Клиент просто запрашивает список актуальных сторис. Сервер фильтрует по created_at + 24h < now. На клиенте для уже загруженных сторис из кэша — проверяем expiresAt при открытии. Если истёк — не показываем кэш, запрашиваем сервер (или удаляем из локального хранилища). Просмотры — отмечаем на сервере через отдельный API-запрос после показа сторис. Батчим отметки: не один запрос на каждый просмотр, а накапливаем за сессию и отправляем при сворачивании приложения или каждые 30 секунд.
Типичные ошибки при реализации Stories
| Ошибка | Последствие | Решение |
|---|---|---|
Использование Timer для прогресс-бара |
Дёрганая анимация, рассинхрон с видео | CADisplayLink на iOS, ValueAnimator на Android |
| Загрузка медиа «на лету» | Задержки при переключении | Предзагрузка 2-3 следующих сторис |
| Отсутствие кэша в памяти | Повторные загрузки при возврате | Кэширование в NSCache или LruCache |
Игнорирование expiresAt на клиенте |
Показ устаревших сторис | Проверка времени до показа |
| Одиночные запросы просмотров | Нагрузка на сервер | Батчинг раз в 30 секунд |
Что входит в работу
- Документация (API-схемы, диаграммы потоков)
- Исходный код с комментариями
- Доступы к репозиторию, App Store Connect / Google Play Console
- Интеграция с вашим бэкендом (REST/GraphQL)
- Тестирование на реальных устройствах (iOS 15+, Android 10+)
- Пост-релизная поддержка 1 месяц
Сроки и стоимость
Просмотр сторис с прогресс-барами, предзагрузкой, навигацией и таймером исчезновения — 3–4 дня. Создание с камерой, текстом и стикерами + upload — ещё 2–3 дня. Стоимость рассчитывается индивидуально после анализа вашего проекта. Свяжитесь с нами — получите консультацию и предварительную оценку.
| Компонент | Время (дни) |
|---|---|
| Механика просмотра (прогресс-бары, жесты, таймер) | 3-4 |
| Предзагрузка и кэширование медиа | 2-3 |
| Создание stories (камера, редактор, upload) | 2-3 |
| Интеграция с бэкендом и тестирование | 2-3 |
| Итого | 7-10 |
Подробнее о механнике stories можно прочитать в App Store Review Guidelines (Section 4.2 и 5.1) и документации Google Play.
Наша команда — 10+ лет опыта в мобильной разработке, гарантируем качество и соблюдение сроков. Закажите разработку stories в своём приложении — оценим проект за 1 день.