Реалізація процедурних анімацій у мобільних додатках
Процедурні анімації — це анімації, які обчислюються в реальному часі за алгоритмом, а не відтворюють записані кадри. Частинки, що слідують за пальцем. Хвиля, що реагує на звук. Фон, що змінює форму залежно від даних. Це окремий клас завдань, що вимагає розуміння фізичного моделювання та роботи з GPU.
Коли це потрібно
Процедурна анімація виправдана коли:
- Анімація реагує на input у реальному часі (касання, акселерометр, мікрофон)
- Анімація залежить від даних, які невідомі заранее
- Варіативність нескінченна й keyframe-підхід нереальний
- Потрібен ефект «живого» фону або ambient animation
Системи частиц
На iOS — CAEmitterLayer + CAEmitterCell. Вбудований particle engine з підтримкою gravity, emissionRange, velocity, lifetime. Продуктивний, GPU-базований. Обмеження: кожна частинка однакова за формою (bitmap або shape), немає кастомної поведінки per-частиця.
let emitter = CAEmitterLayer()
emitter.emitterPosition = CGPoint(x: view.center.x, y: -10)
emitter.emitterShape = .line
emitter.emitterSize = CGSize(width: view.bounds.width, height: 1)
let cell = CAEmitterCell()
cell.contents = UIImage(named: "particle")?.cgImage
cell.birthRate = 50
cell.lifetime = 4
cell.velocity = 100
cell.velocityRange = 50
cell.emissionRange = .pi / 4
cell.scale = 0.1
cell.scaleRange = 0.05
emitter.emitterCells = [cell]
Для кастомної поведінки частиц — Metal shader або SpriteKit з SKEmitterNode. SpriteKit підтримує редактор .sks файлів у Xcode — візуальна настройка без коду.
На Android — немає вбудованого particle engine. Використовуємо Canvas з ValueAnimator або OpenGL ES через GLSurfaceView. Для продукту — бібліотека Konfetti (простих випадків) або кастомний View з Canvas.drawBitmap циклом через Choreographer.FrameCallback.
У Flutter — пакети particles_flutter, flame (game engine з particles). Для простих випадків — CustomPainter з AnimationController та списком частиц, кожна з власною фізикою.
Фізичне моделювання: пружини та інерція
Процедурна анімація на основі фізики — це не spring(dampingRatio:). Це чисельне інтегрування рівнянь руху на кожному кадрі.
Простейша пружинна система (Verlet integration):
// Оновлюємо кожен кадр через CADisplayLink
func update(dt: Double) {
let springForce = (targetPosition - currentPosition) * stiffness
let dampingForce = velocity * -damping
let acceleration = (springForce + dampingForce) / mass
velocity += acceleration * dt
currentPosition += velocity * dt
}
Це дає поведінку, яка не обмежена бібліотечними параметрами: можна задати будь-яку масу, жёсткість, затухання. Використовується для «тягучих» елементів, що слідують за пальцем з затримкою, анімації волосся/хвостів, прапорців.
Шумові алгоритми для органічного руху
Perlin noise та Simplex noise — основа для органічних ambient-анімацій. Фон, що «дихає» без повторюваних паттернів; форма, що повільно деформується; колір, що плавно змінюється.
На iOS через Metal або simd:
// Simplex noise функція → значення float в діапазоні [-1, 1]
let noiseValue = simplexNoise2D(x: Float(time * 0.3), y: Float(index) * 0.5)
let yOffset = noiseValue * amplitude
У Flutter — пакет noise або Dart код. У шейдерах Flutter (Flutter GPU API, доступний з Flutter 3.10+) — float noise(vec2 p) прямо в GLSL.
Продуктивність
Головне правило: жодної логіки частиц на main thread. CADisplayLink з preferredFramesPerSecond = 60 (або 120 для ProMotion) — мінімум. Для складних сцен — Metal compute shader, який оновлює позиції частиц паралельно на GPU.
Профілюємо через Instruments → Core Animation / Metal System Trace. Ціль: GPU utilization < 60% при idle, frame time < 8ms для 120Hz.
Що входить у роботу
Прорабатуємо алгоритм анімації по ТЗ або референсам. Реалізуємо з оптимізацією під цільовий FPS. Інтегруємо з системою подій додатка (input, data updates). Профілюємо та оптимізуємо.
Терміни: 3–5 днів залежно від складності фізичної моделі та цільової платформи.