Інтерактивні фони, частинки та 3D-сцени — тренд, але реалізація через DOM або SVG впирається у продуктивність: 60 FPS тримаються лише до сотні об'єктів. Canvas же дозволяє рендерити тисячі частинок без лагів — але лише за правильної архітектури. Наприклад, клієнт хотів фон із 3000 частинок на React — DOM знизив FPS до 5. Переписали на Canvas з пулом частинок — отримали стабільні 60 FPS на мобільному.
Ми реалізуємо Canvas-анімації під ключ: від простих частинок до WebGL-сцен з шейдерами. Прозора вартість розробки розраховується виходячи зі складності. Оцінимо ваш проект за 1 день — зв'яжіться з нами для консультації.
Які проблеми вирішуємо
Низька продуктивність при великій кількості об'єктів
DOM-анімації гальмують вже на 100–200 елементах. Canvas перемальовує все за один прохід, але вимагає ручного управління пам'яттю та перевикористання об'єктів. Ми оптимізуємо пули частинок, уникаємо gc і боремося з N+1 відмальовкою. Гарантуємо, що після оптимізації анімація працюватиме на 60 FPS на всіх цільових пристроях.
Розмиті пікселі на Retina-дисплеях
Стандартний canvas малює в CSS-пікселях — на Retina зображення виходить розмитим. Ми множимо розмір на devicePixelRatio і масштабуємо контекст.
Складність інтеграції з React/Vue
Просте використання canvas викликає 'hydration mismatch' і втрату стану. Ми обгорнули двигун у хуки useCanvas з коректним управлінням життєвим циклом.
Неконтрольована пам'ять в анімаціях
Без грамотного управління об'єктами пам'ять зростає, викликаючи GC-фризи. Ми використовуємо об'єктні пули та уникаємо алокацій у render loop.
Яку продуктивність дає Canvas
Canvas у 10–50 разів швидше SVG на тисячах об'єктів завдяки відсутності DOM-накладних витрат. Ми досягаємо стабільних 60 FPS за рахунок:
-
requestAnimationFrameз автоматичною паузою при неактивній вкладці - Обмеження delta-time (кап 100 ms)
- Примусового скидання gc через перевикористання об'єктів
Порівняння Canvas vs SVG vs DOM-анімації:
| Характеристика | Canvas | SVG | DOM-анімації |
|---|---|---|---|
| Максимум об'єктів | 50 000+ | 1 000 | 500 |
| Інтерактивність | Своя система | По подіях | По подіях |
| Трансформації | Кастомні | CSS-властивості | CSS-властивості |
| Retina-підтримка | Через DPR | Автоматично | Автоматично |
Оптимізація під Retina та мобільні пристрої включена у вартість.
Як ми це робимо: стек та приклади
Використовуємо TypeScript, React 18, Three.js r150. Ключові патерни: Repository, BFF для частинок, render loop з розділенням на update/draw. Код двигуна tree-shake-ready, що дозволяє включати лише потрібні модулі у фінальний бандл.
Базовий Canvas-двигун
// lib/canvas-engine.ts
export interface AnimationContext {
canvas: HTMLCanvasElement
ctx: CanvasRenderingContext2D
width: number
height: number
dpr: number // device pixel ratio
dt: number // delta time в секундах
}
export type RenderFn = (context: AnimationContext) => void
export class CanvasEngine {
private canvas: HTMLCanvasElement
private ctx: CanvasRenderingContext2D
private dpr: number
private rafId: number | null = null
private lastTime: number = 0
private renderFn: RenderFn
constructor(canvas: HTMLCanvasElement, renderFn: RenderFn) {
this.canvas = canvas
this.ctx = canvas.getContext('2d')!
this.dpr = window.devicePixelRatio || 1
this.renderFn = renderFn
this.resize()
}
resize() {
const { canvas, dpr } = this
const rect = canvas.getBoundingClientRect()
canvas.width = rect.width * dpr
canvas.height = rect.height * dpr
this.ctx.scale(dpr, dpr)
}
start() {
this.lastTime = performance.now()
this.tick(this.lastTime)
}
stop() {
if (this.rafId !== null) {
cancelAnimationFrame(this.rafId)
this.rafId = null
}
}
private tick = (timestamp: number) => {
const dt = Math.min((timestamp - this.lastTime) / 1000, 0.1)
this.lastTime = timestamp
const rect = this.canvas.getBoundingClientRect()
this.renderFn({
canvas: this.canvas,
ctx: this.ctx,
width: rect.width,
height: rect.height,
dpr: this.dpr,
dt,
})
this.rafId = requestAnimationFrame(this.tick)
}
}
React-хук useCanvas
// hooks/useCanvas.ts
import { useEffect, useRef } from 'react'
import { CanvasEngine, RenderFn } from '../lib/canvas-engine'
export function useCanvas(renderFn: RenderFn) {
const canvasRef = useRef<HTMLCanvasElement>(null)
const engineRef = useRef<CanvasEngine | null>(null)
useEffect(() => {
const canvas = canvasRef.current
if (!canvas) return
const engine = new CanvasEngine(canvas, renderFn)
engineRef.current = engine
engine.start()
const handleResize = () => engine.resize()
window.addEventListener('resize', handleResize)
return () => {
engine.stop()
window.removeEventListener('resize', handleResize)
}
}, [renderFn])
return canvasRef
}
Система частинок з фізикою
// lib/particle-system.ts
interface Particle {
x: number
y: number
vx: number
vy: number
radius: number
color: string
life: number
maxLife: number
}
export class ParticleSystem {
private particles: Particle[] = []
private readonly maxParticles: number
constructor(maxParticles = 500) {
this.maxParticles = maxParticles
}
emit(x: number, y: number, count = 5) {
for (let i = 0; i < count; i++) {
if (this.particles.length >= this.maxParticles) break
const angle = Math.random() * Math.PI * 2
const speed = 50 + Math.random() * 150
this.particles.push({
x, y,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed - 100,
radius: 2 + Math.random() * 4,
color: `hsl(${200 + Math.random() * 60}, 80%, 60%)`,
life: 1,
maxLife: 0.8 + Math.random() * 0.8,
})
}
}
update(dt: number) {
const gravity = 300
this.particles = this.particles.filter(p => {
p.x += p.vx * dt
p.y += p.vy * dt
p.vy += gravity * dt
p.vx *= 0.99
p.life -= dt / p.maxLife
return p.life > 0
})
}
draw(ctx: CanvasRenderingContext2D) {
for (const p of this.particles) {
ctx.save()
ctx.globalAlpha = p.life * p.life
ctx.fillStyle = p.color
ctx.beginPath()
ctx.arc(p.x, p.y, p.radius * p.life, 0, Math.PI * 2)
ctx.fill()
ctx.restore()
}
}
}
Приклад компонента: ParticleCanvas — інтерактивна система частинок з гравітацією, автоматичною емісією та кліком миші.
Детальніше про шейдери
Для нестандартних ефектів (світіння, маски, хвилі) пишемо кастомні шейдери GLSL. Вони виконуються на GPU, що економить ресурси CPU та підвищує FPS. Шейдери інтегруються через Three.js ShaderMaterial або нативний WebGL.Чому Three.js — стандарт для 3D-анімацій на сайті?
Для складних 3D-сцен на фоні сайту використовуємо Three.js — він дає готові шейдери, постпроцесинг і сумісність з WebGL 2.0. Ми пишемо кастомні матеріали та анімації, контролюючи пам'ять через BufferGeometry.
// components/ThreeBackground.tsx
'use client'
import { useEffect, useRef } from 'react'
import * as THREE from 'three'
export function ThreeBackground() {
const mountRef = useRef<HTMLDivElement>(null)
useEffect(() => {
const mount = mountRef.current!
const width = mount.clientWidth
const height = mount.clientHeight
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.z = 50
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
renderer.setSize(width, height)
renderer.setPixelRatio(window.devicePixelRatio)
mount.appendChild(renderer.domElement)
const count = 3000
const positions = new Float32Array(count * 3)
for (let i = 0; i < count * 3; i++) {
positions[i] = (Math.random() - 0.5) * 200
}
const geometry = new THREE.BufferGeometry()
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
const material = new THREE.PointsMaterial({
size: 0.3,
color: 0x3b82f6,
transparent: true,
opacity: 0.7,
})
const points = new THREE.Points(geometry, material)
scene.add(points)
let rafId: number
const animate = () => {
rafId = requestAnimationFrame(animate)
points.rotation.x += 0.0003
points.rotation.y += 0.0005
renderer.render(scene, camera)
}
animate()
const handleResize = () => {
const w = mount.clientWidth
const h = mount.clientHeight
camera.aspect = w / h
camera.updateProjectionMatrix()
renderer.setSize(w, h)
}
window.addEventListener('resize', handleResize)
return () => {
cancelAnimationFrame(rafId)
window.removeEventListener('resize', handleResize)
renderer.dispose()
mount.removeChild(renderer.domElement)
}
}, [])
return <div ref={mountRef} className="absolute inset-0 -z-10" />
}
Як Canvas-анімації впливають на Core Web Vitals?
Правильно спроектована Canvas-анімація не погіршує LCP, CLS та INP. Ми використовуємо requestAnimationFrame і Suspense для лінивого завантаження, щоб не блокувати основний потік. В результаті анімація стартує лише після інтерактиву сторінки, не сповільнюючи перший рендер.
Процес роботи
- Аналітика — вивчаємо дизайн, вимоги до продуктивності, цільові пристрої.
- Прототипування — створюємо MVP анімації з базовими параметрами.
- Реалізація — пишемо двигун з патернами Repository, підключаємо React-обв'язку.
- Оптимізація — ріжемо draw calls, додаємо LOD, перевіряємо Core Web Vitals.
- Деплой — налаштовуємо CI/CD, тести на реальних пристроях.
Терміни орієнтовно
| Тип анімації | Терміни |
|---|---|
| Прості частинки / хвилі | 1–2 дні |
| Інтерактивна система (фізика) | 3–5 днів |
| 3D-сцена з шейдерами | 1–2 тижні |
| Комплексний проект (анімація + бізнес-логіка) | 2–3 тижні |
Що входить у послугу
- Вихідний код (TS/React-компоненти, документація JSDoc)
- Оптимізація під 60 FPS на цільових пристроях
- Адаптація під мобільні та Retina
- Інтеграція з вашим додатком (Next.js, Nuxt, CRA)
- Технічна підтримка 2 тижні після здачі
Сертифіковані спеціалісти Three.js та WebGL. Гарантія продуктивності 60 FPS.
Замовте розробку Canvas-анімації в TrueTech і отримайте стабільні 60 FPS на будь-яких пристроях.