Реализация анимации Confetti/Celebration в мобильном приложении

После завершения ключевого действия в приложении пользователь ожидает визуального отклика. Без анимации триумфа эмоция гаснет, а retention падает. Confetti-анимация — это инженерная задача: синтезировать десятки частиц, не вызвав просадок FPS и не нарушив UX. Наши инженеры с 5-летним опытом и более 50 успешных проектов по интеграции particle effects гарантируют плавную анимацию. Свяжитесь с нами, чтобы обсудить интеграцию под ключ.

Технические сложности рендеринга confetti

Основная проблема — рендеринг множества частиц без просадок FPS. На iOS CAEmitterLayer решает это аппаратно, но неправильные параметры (слишком высокий birthRate, сложные формы) могут нагрузить даже флагманы. На Android кастомный Canvas.onDraw() — узкое место: каждая перерисовка синхронна с UI-потоком. При 200+ частицах нужен SurfaceView или TextureView с отдельным потоком. Во Flutter CustomPainter работает на Dart-потоке, но при активной физике может вызывать задержки.

Вторая сложность — согласование с платформенными гайдлайнами. App Store Review Guidelines (Section 4.2) требуют, чтобы анимация не мешала основному функционалу. Для Android важно не блокировать back-button. Мы учитываем эти нюансы на этапе проектирования.

iOS: CAEmitterLayer — нативный подход

CAEmitterLayer — правильный инструмент для particle effects на iOS. Как указано в документации Apple, это рекомендованный способ. Рендеринг через Metal, анимация на render thread — main thread не участвует.

func startConfetti(in view: UIView) { let emitter = CAEmitterLayer() emitter.emitterPosition = CGPoint(x: view.bounds.midX, y: -10) emitter.emitterShape = .line emitter.emitterSize = CGSize(width: view.bounds.width, height: 0) let colors: [UIColor] = [.systemRed, .systemBlue, .systemYellow, .systemGreen, .systemPurple] let shapes = ["square", "circle", "triangle"] emitter.emitterCells = colors.flatMap { color in shapes.map { _ in let cell = CAEmitterCell() cell.contents = UIImage(systemName: "circle.fill")?.withTintColor(color).cgImage cell.birthRate = 8 cell.lifetime = 4.0 cell.velocity = 200 cell.velocityRange = 100 cell.emissionLongitude = .pi cell.emissionRange = .pi / 4 cell.spin = 3.5 cell.spinRange = 1.0 cell.scaleRange = 0.5 cell.scale = 0.4 cell.color = color.cgColor cell.alphaSpeed = -0.15 return cell } } view.layer.addSublayer(emitter) DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) { emitter.birthRate = 0 } DispatchQueue.main.asyncAfter(deadline: .now() + 6.0) { emitter.removeFromSuperlayer() } } 

CAEmitterCell.birthRate — частиц в секунду на ячейку. При 5 цветах × 3 формах × 8 частиц/с = 120 частиц/с суммарно. На 4 секунды lifetime — до 480 частиц одновременно на экране. На iPhone 12+ — комфортно, FPS не падает ниже 58 кадров/с. На iPhone SE 2nd gen — начинает греться при 480 частицах; снижаем birthRate до 4–5 для mid-range устройств.

Для кастомных форм confetti (прямоугольники, звёзды): создаём UIGraphicsImageRenderer, рисуем форму, конвертируем в CGImage для cell.contents.

Сравнение: CAEmitterLayer vs SpriteKit vs готовые библиотеки

Android: Canvas-based или библиотека

Кастомный ConfettiView через Canvas:

class ConfettiView(context: Context) : View(context) { private val particles = mutableListOf<ConfettiParticle>() private val paint = Paint(Paint.ANTI_ALIAS_FLAG) private var animator: ValueAnimator? = null data class ConfettiParticle( var x: Float, var y: Float, var vx: Float, var vy: Float, val color: Int, val size: Float, var rotation: Float, val rotationSpeed: Float, var alpha: Float = 1f ) fun start() { repeat(80) { particles.add(ConfettiParticle( x = Random.nextFloat() * width, y = -Random.nextFloat() * 100, vx = Random.nextFloat() * 6 - 3, vy = Random.nextFloat() * 4 + 3, color = listOf(Color.RED, Color.BLUE, Color.YELLOW, Color.GREEN).random(), size = Random.nextFloat() * 12 + 6, rotation = Random.nextFloat() * 360, rotationSpeed = Random.nextFloat() * 6 - 3 )) } animator = ValueAnimator.ofFloat(0f, 1f).apply { duration = 5000 addUpdateListener { updateParticles() invalidate() } start() } } private fun updateParticles() { particles.forEach { p -> p.x += p.vx p.vy += 0.1f p.y += p.vy p.rotation += p.rotationSpeed if (p.y > height * 0.7f) p.alpha -= 0.02f } particles.removeAll { it.alpha <= 0 || it.y > height + 50 } } override fun onDraw(canvas: Canvas) { particles.forEach { p -> paint.color = p.color paint.alpha = (p.alpha * 255).toInt() canvas.save() canvas.translate(p.x, p.y) canvas.rotate(p.rotation) canvas.drawRect(-p.size/2, -p.size/2, p.size/2, p.size/2, paint) canvas.restore() } } } 

ValueAnimator + invalidate() — это перерисовка Canvas на каждом кадре. При 80 частицах загрузка CPU составляет менее 10% на Snapdragon 8xx. При 200+ частицах со сложными формами — переходим на SurfaceView с отдельным render thread.

Готовая библиотека: nl.dionsegijn:konfetti:2.0.4 — приличная, поддерживает кастомные формы и KonfettiView.

Сравнение: кастомный Canvas vs konfetti

Flutter

// Через CustomPainter class ConfettiPainter extends CustomPainter { final List<ConfettiParticle> particles; ConfettiPainter(this.particles); @override void paint(Canvas canvas, Size size) { for (final p in particles) { final paint = Paint()..color = p.color.withOpacity(p.alpha); canvas.save(); canvas.translate(p.x, p.y); canvas.rotate(p.rotation); canvas.drawRect(Rect.fromCenter(center: Offset.zero, width: p.size, height: p.size * 0.5), paint); canvas.restore(); } } @override bool shouldRepaint(ConfettiPainter old) => true; } 

В Flutter проще использовать готовый пакет confetti: ^0.7.0 — там ConfettiController с play(), stop(), параметры для направления, цветов, форм.

Как интегрировать confetti за 4 шага?

1. Определите сценарии вызова: после покупки, завершения уровня, подписки.
2. Выберите платформу и стек: нативный модуль или кроссплатформенное решение.
3. Реализуйте модуль confetti с учётом дизайна и оптимизации.
4. Протестируйте на реальных устройствах разных сегментов.

Почему CAEmitterLayer в 2-3 раза производительнее SpriteKit?

CAEmitterLayer рендерит частицы через Metal на GPU, полностью минуя main thread. SpriteKit использует отдельный процесс, но требует больше памяти для сцен. Для простых частиц (без физики) CAEmitterLayer эффективнее на 60% по CPU.

Почему важна оптимизация под разные устройства?

Confetti в 480 частиц на iPhone SE 2nd gen может вызвать троттлинг и перегрев. На флагманах это незаметно. Наша практика показывает, что для mid-range Android-устройств (Snapdragon 6xx) безопасный лимит — 120 частиц. Мы автоматически определяем устройство и уменьшаем birthRate или используем менее ресурсоёмкие формы. Гарантируем, что анимация не подвесит UI.

Как мы обеспечиваем качество и гарантии?

Мы прошли модерацию более 50 приложений с анимациями. Наши инженеры сертифицированы по iOS и Android (Apple Certified iOS Developer, Google Associate Android Developer). Предоставляем гарантию на интеграцию: бесплатная поддержка 30 дней после деплоя. Закажите консультацию — оценим ваш проект.

Этапы работы и что входит

Отметим: Что входит в работу:

• Исходный код модуля confetti
• Документация по API и кастомизации
• Настройка push-уведомлений, если confetti привязана к событиям
• Обучение ваших разработчиков (1 час онлайн)
• Поддержка 30 дней после сдачи

Сроки и стоимость

Базовая интеграция через готовую библиотеку — 4-8 часов. Кастомная реализация с уникальными формами, физикой и оптимизацией под разные устройства — от 1 до 3 дней. Стоимость рассчитывается индивидуально. Получите консультацию — мы предложим оптимальное решение.