---
title: Animatsioonide jõudlus
description: Auditeerib ja parandab animatsioonide jõudlusprobleeme: paigutuse ümberarvutused, kerimisega seotud liikumine, häguefektid.
category: Design
sublabel: Kasutajaliides
author: Julien Thibeaut (ibelick)
tags: 
license: MIT
source: https://github.com/ibelick/ui-skills
---

# fixing-motion-performance

Paranda animatsioonijõudluse probleeme.

## kuidas kasutada

- `/fixing-motion-performance`
  Rakenda need piirangud igale UI-animatsioonitööle selles vestluses.

- `/fixing-motion-performance <file>`
  Vaata fail üle alltoodud reeglite vastu ja teata:
  - rikkumised (tsiteeri täpne rida või lõik)
  - miks see oluline on (üks lühike lause)
  - konkreetne parandus (kooditaseme soovitus)

Ära migreeri animatsiooniteeke, kui seda ei ole selgelt küsitud. Rakenda reegleid olemasolevas stack’is.

## millal rakendada

Viita nendele juhistele, kui:
- lisad või muudad UI-animatsioone (CSS, WAAPI, Motion, rAF, GSAP)
- refaktoreerid tõrkuvat interaktsiooni või üleminekut
- rakendad kerimisega seotud liikumist või reveal-on-scroll’i
- animeerid paigutust, filtreid, maske, gradiente või CSS-muutujaid
- vaatad üle komponente, mis kasutavad will-change’i, transforme või mõõtmist

## renderdamissammude sõnastik

- composite: transform, opacity
- paint: color, borders, gradients, masks, images, filters
- layout: size, position, flow, grid, flex

## reeglikategooriad prioriteedi järgi

| prioriteet | kategooria | mõju |
|----------|----------|--------|
| 1 | never patterns | kriitiline |
| 2 | choose the mechanism | kriitiline |
| 3 | measurement | kõrge |
| 4 | scroll | kõrge |
| 5 | paint | keskmine-kõrge |
| 6 | layers | keskmine |
| 7 | blur and filters | keskmine |
| 8 | view transitions | madal |
| 9 | tool boundaries | kriitiline |

## kiirviide

### 1. never patterns (kriitiline)

- ära sega samas kaadris layout’i lugemisi ja kirjutamisi
- ära animeeri layout’i pidevalt suurtel või tähenduslikel pindadel
- ära juhi animatsiooni scrollTop’ist, scrollY-st või scroll-sündmustest
- ei requestAnimationFrame’i tsükleid ilma peatumistingimuseta
- ära sega mitut animatsioonisüsteemi, mis kumbki mõõdavad või muudavad layout’i

### 2. choose the mechanism (kriitiline)

- vaikimisi kasuta liikumiseks transform’i ja opacity’t
- kasuta JS-juhitud animatsiooni ainult siis, kui interaktsioon seda nõuab
- paint- või layout-animatsioon on vastuvõetav ainult väikestel, isoleeritud pindadel
- ühekordsed efektid on sagedamini vastuvõetavad kui pidev liikumine
- eelista tehnika alandamist liikumise täielikule eemaldamisele

### 3. measurement (kõrge)

- mõõda üks kord, seejärel animeeri transform’i või opacity kaudu
- koonda kõik DOM-lugemised enne kirjutamisi
- ära loe layout’i korduvalt animatsiooni ajal
- eelista FLIP-stiilis üleminekuid layout’ilaadsete efektide jaoks
- eelista lähenemisi, mis koondavad mõõtmise ja kirjutamised

### 4. scroll (kõrge)

- eelista Scroll või View Timeline’e kerimisega seotud liikumiseks, kui saadaval
- kasuta IntersectionObserver’it nähtavuse ja peatamise jaoks
- ära polli scroll-positsiooni animatsiooni jaoks
- peata või peata animatsioonid, kui need on ekraanilt väljas
- kerimisega seotud liikumine ei tohi käivitada pidevat layout’i või paint’i suurtel pindadel

### 5. paint (keskmine-kõrge)

- paint’i käivitav animatsioon on lubatud ainult väikestel, isoleeritud elementidel
- ära animeeri paint-raskeid omadusi suurtel konteineritel
- ära animeeri CSS-muutujaid transform’i, opacity või positsiooni jaoks
- ära animeeri pärandatud CSS-muutujaid
- hoia animeeritud CSS-muutujad lokaalsed ja väldi pärandamist

### 6. layers (keskmine)

- compositor’i liikumine nõuab kihi edutamist, ära eeldada seda
- kasuta will-change’i ajutiselt ja kirurgiliselt
- väldi paljusid või suuri edutatud kihte
- valideeri kihi käitumist tööriistadega, kui jõudlus on oluline

### 7. blur and filters (keskmine)

- hoia blur-animatsioon väike (<=8px)
- kasuta blur’i ainult lühikeste, ühekordsete efektide jaoks
- ära kunagi animeeri blur’i pidevalt
- ära kunagi animeeri blur’i suurtel pindadel
- eelista enne blur’i opacity’t ja translate’i

### 8. view transitions (madal)

- kasuta view transition’e ainult navigatsioonitaseme muutusteks
- väldi view transition’e interaktsioonirikka UI jaoks
- väldi view transition’e, kui on vaja katkestamist või tühistamist
- käsitle suuruse muutusi potentsiaalselt layout’i käivitavatena

### 9. tool boundaries (kriitiline)

- ära migreeri ega kirjuta ümber animatsiooniteeke, kui seda ei ole selgelt küsitud
- rakenda neid reegleid olemasolevas animatsioonisüsteemis
- ära kunagi migreeri API-sid osaliselt ega sega stiile samas komponendis

## levinud parandused

```css
/* layout thrashing: animate transform instead of width */
/* before */ .panel { transition: width 0.3s; }
/* after */  .panel { transition: transform 0.3s; }

/* scroll-linked: use scroll-timeline instead of JS */
/* before */ window.addEventListener('scroll', () => el.style.opacity = scrollY / 500)
/* after */  .reveal { animation: fade-in linear; animation-timeline: view(); }
```

```js
// measurement: batch reads before writes (FLIP)
// before — layout thrash
el.style.left = el.getBoundingClientRect().left + 10 + 'px';
// after — measure once, animate via transform
const first = el.getBoundingClientRect();
el.classList.add('moved');
const last = el.getBoundingClientRect();
el.style.transform = `translateX(${first.left - last.left}px)`;
requestAnimationFrame(() => { el.style.transition = 'transform 0.3s'; el.style.transform = ''; });
```

## ülevaatuse juhised

- jõusta esmalt kriitilised reeglid (never patterns, tool boundaries)
- vali kõige odavam renderdamistöö, mis vastab kavatsusele
- iga mittevaikimisi valiku puhul ütle piirang, mis seda õigustab (pinna suurus, kestus või interaktsiooninõue)
- ülevaatusel eelista tegutsetavaid märkusi ja konkreetseid alternatiive teooriale