---
title: Animatsioonide sõnastik
description: Pöördsõnastik, mis muudab ebamäärase kirjelduse veebianimatsioonist või liikumisefektist selle täpseks terminiks.
category: Design
sublabel: Disainiinseneeria
author: Emil Kowalski
tags: 
license: MIT
source: https://github.com/emilkowalski/skills
---

# Animatsioonisõnavara

## Esmane vastus

Kui see oskus käivitatakse esimest korda ilma konkreetse küsimuseta, vasta ainult nii:

> Olen valmis andma nime igale liikumisefektile, mida kirjeldad – minu teadmised pärinevad Emil Kowalski animatsioonifilosoofiast.

Ära anna muud teavet enne, kui kasutaja küsimuse esitab.

Muuda liikumise või efekti ebamäärane kirjeldus täpseks terminiks, et kasutaja teaks, mida küsida.

## Kiirstart

Kasutaja kirjeldab efekti umbkaudselt. Sina tagastad sobiva(d) termini(d) selles vormingus:

```
**Stagger** — Animate several items one after another with a small delay between each, creating a cascade.
```

Kui sobida võib mitu terminit, too esimesena parim vaste, seejärel 1–2 alternatiivi koos üherealise märkusega selle kohta, kuidas need erinevad.

## Juhised

1. **Loe kavatsust, mitte märksõnu.** Kasutajad kirjeldavad seda, mida nad *näevad* või *tunnevad* („vetruv“, „libiseb minema“, „joonistab end ise“), mitte tehnilist nimetust. Seo aisting allpool oleva sõnastikuga.
2. **Tsiteeri sõnastikku sõna-sõnalt.** Selle kirjeldused on autoriteetsed – kasuta neid sellisena, nagu need on, ära parafraseeri.
3. **Erista lähedasi termineid.** Kui kaks terminit konkureerivad (*Clip-path* vs *Mask*, *Pop in* vs *Bounce*, *Shared element transition* vs *Layout animation*), vastanda need, et kasutaja saaks valida.
4. **Kui miski täpselt ei sobi,** nimeta lähim termin ja ütle otse, et see on ligikaudne, või kirjelda efekti sõnastiku sõnavaraga (nt „see on *scale-in*-sisenemiste *stagger*“).
5. **Püsi selle sõnastiku piires.** Kui terminit siin tõesti pole, ütle seda, selle asemel et mõnda välja mõelda – küll aga võid kontseptsiooni nende sõnade abil lahti seletada.
6. **Hoia vastus lühike.** Nimetamisküsimus ootab nime, mitte esseed. Alusta terminiga; laienda ainult siis, kui palutakse.

## Näited

**Näide 1 – tundepõhine**
Kasutaja: „Kuidas nimetatakse seda, kui popover näib kasvavat välja nupust, millele klõpsasid, mitte enda keskelt?“
Väljund:
```
**Origin-aware animation** — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.
```

**Näide 2 – eristamine**
Kasutaja: „See asi, kus üks pilt muutub teiseks pildiks.“
Väljund:
```
**Morph** — One shape smoothly turns into another shape, e.g. Dynamic Island.

Close alternates:
- **Crossfade** — if they simply fade over each other in the same spot.
- **Shared element transition** — if an element travels and transforms from one position into another.
```

**Näide 3 – füüsikatunnetus**
Kasutaja: „See iOS-i kerimine, kus see takistab ja põrkab tagasi, kui tõmbad liiga kaugele.“
Väljund:
```
**Rubber-banding** — Resistance and snap-back when you drag past a boundary (the iOS overscroll feel).
```

## Sõnastik

_Kureeritud hetkeseis, mis peegeldab projekti `/vocabulary` lehte; hoia need kaks sünkroonis, kui kumbki muutub._

### Sisenemised ja väljumised – kuidas elemendid ilmuvad ja kaovad
- **Fade in / Fade out** — Element ilmub või kaob läbipaistmatust muutes.
- **Slide in** — Element siseneb ekraaniväljast sisse libisedes (vasakult, paremalt, ülevalt või alt).
- **Scale in** — Element kasvab ilmudes väiksemast täissuuruseni, sageli koos hajumisega.
- **Pop in** — Element ilmub kerge ületõusuga, nagu põrkaks see oma kohale.
- **Reveal** — Sisu paljastatakse järk-järgult, sageli clip-pathi või maski animeerimise teel.
- **Enter / Exit** — Animatsioon, mida element esitab, kui see ekraanile lisatakse või sealt eemaldatakse.

### Järjestus ja ajastus – mitme elemendi või hetke koordineerimine
- **Keyframes** — Animatsiooni määratud punktid (0%, 50%, 100%), mille vahelised lüngad brauser täidab.
- **Interpolation / Tween** — Kõigi vahepealsete kaadrite genereerimine algus- ja lõppväärtuse vahel, et liikumine oleks pidev.
- **Stagger** — Mitme elemendi animeerimine üksteise järel, igaühe vahel väike viivitus, nii et tekib kaskaad.
- **Orchestration** — Mitme animatsiooni teadlik ajastamine nii, et need tunduksid ühe koordineeritud liikumisena.
- **Delay** — Aeg enne animatsiooni algust.
- **Duration** — Kui kaua animatsioon kestab.
- **Fill mode** — Kas element säilitab enne animatsiooni algust või pärast selle lõppu esimese või viimase kaadri stiilid (nt forwards).
- **Stepped animation** — Animatsioon, mis on jagatud diskreetseteks sammudeks, nagu loendustaimer.

### Liikumine ja teisendused – elemendi asukoha, suuruse või nurga muutmine
- **Translate** — Elemendi liigutamine mööda X- või Y-telge.
- **Scale** — Elemendi suuremaks või väiksemaks muutmine.
- **Rotate** — Elemendi pööramine ümber punkti.
- **Skew** — Elemendi kallutamine mööda X- või Y-telge, nii et see nihkub oma ristkülikukujust välja.
- **3D tilt / Flip** — Pööramine 3D-ruumis (rotateX / rotateY) sügavuse lisamiseks.
- **Perspective** — Kui tugev 3D-efekt paistab – väiksem väärtus võimendab sügavust, nagu oleks vaataja lähemal.
- **Transform origin** — Ankurpunkt, millest skaleerimine kasvab või pööramine toimub.
- **Origin-aware animation** — Element animeerub välja oma käivitajast, nagu popover, mis kasvab välja selle avanud nupust, mitte enda keskelt, mis on CSS-is vaikimisi.

### Üleminekud olekute vahel – ühe oleku, vaate või elemendi sidumine teisega
- **Crossfade** — Üks element hajub ära, samal ajal kui teine samas kohas esile tuleb.
- **Continuity transition** — Muutus, mis hoiab kasutaja orienteeritud, sidudes visuaalselt „enne“ ja „pärast“ oleku. Näiteks sama ristküliku suuremaks ja väiksemaks muutmine.
- **Morph** — Üks kuju muutub sujuvalt teiseks kujuks, nt Dynamic Island.
- **Shared element transition** — Element liigub ja teiseneb ühest asukohast teise, nagu pisipilt, mis laieneb kaardiks.
- **Layout animation** — Kui elemendi suurus või asukoht muutub, animeerub see uude kohta, selle asemel et sinna hüpata.
- **Accordion / Collapse** — Sektsioon laiendab ja ahendab sujuvalt oma kõrgust, et sisu näidata või peita.
- **Direction-aware transition** — Sisu libiseb edasi minnes ühes suunas ja tagasi minnes vastupidi, nii et navigeerimisel on suunataju.

### Kerimine – kerimise või vaadete vahel navigeerimisega seotud liikumine
- **Scroll reveal** — Elemendid hajuvad või libisevad oma kohale, kui nad vaatealasse sisenevad.
- **Scroll-driven animation** — Animatsioon, mille edenemine on otseselt seotud kerimisasendiga.
- **Parallax** — Taust ja esiplaan liiguvad kerimisel eri kiirusel, luues sügavust.
- **Page transition** — Animatsioon, mis esitatakse ühelt lehelt või marsruudilt teisele navigeerimisel.
- **View transition** — Brauser teisendab kahe oleku või lehe vahel, sidudes ühiseid elemente.

### Tagasiside ja interaktsioon – kasutaja tegevustele reageerimine
- **Hover effect** — Visuaalne muutus, kui kursor liigub elemendi kohale.
- **Press / Tap feedback** — Peen vähenemine, kui elemendile klõpsatakse, et see tunduks füüsiline.
- **Hold to confirm** — Edenemisefekt, mis täitub, kuni kasutaja nuppu all hoiab.
- **Drag** — Elemendi liigutamine sellest kinni haarates, sageli koos hooga lahtilaskmisel.
- **Drag to reorder** — Loendi elementide lohistamine nende ümberjärjestamiseks, samal ajal kui teised nihkuvad ruumi tegemiseks.
- **Swipe to dismiss** — Elemendi lohistamine ekraanilt välja selle sulgemiseks, nagu sahtli või toasti puhul.
- **Rubber-banding** — Takistus ja tagasipõrge, kui lohistad piirist üle (iOS-i üle-kerimise tunne).
- **Shake / Wiggle** — Kiire küljelt-küljele värin, mis annab märku veast või tagasi lükatud sisendist.
- **Ripple** — Puudutuspunktist laienev ring, mis kinnitab vajutust.

### Easing – kuidas kiirus animatsiooni jooksul muutub
- **Easing** — Määr, mil animatsioon kiireneb või aeglustub.
- **Ease-out** — Algab kiiresti, lõpeb aeglaselt. Vaikevalik enamiku kasutajaliidese ja kõige kasutajale reageeriva jaoks.
- **Ease-in** — Algab aeglaselt, lõpeb kiiresti. Tavaliselt välditakse; võib tunduda loid.
- **Ease-in-out** — Aeglane, kiire, aeglane. Sobib juba ekraanil olevatele elementidele, mis liiguvad punktist A punkti B.
- **Linear** — Ühtlane kiirus. Väldi kasutajaliideses; jäta spinnerite või jooksvate ribade (marquee) jaoks.
- **Cubic-bezier** — Kohandatud easing-kõver, mille määratled täpse kontrolli jaoks.
- **Asymmetric easing** — Kõver, mis kiireneb ja aeglustub erineva kiirusega. Tundub elavam kui sümmeetriline.

### Vedruanimatsioonid – füüsikapõhine liikumine kui alternatiiv kindla kestusega easingule
- **Spring** — Liikumine, mida juhib füüsika (pinge, mass, sumbuvus), mitte kindlaks määratud kestus.
- **Stiffness / Tension** — Kui tugevalt vedru sihtmärgi poole tõmbab. Suurem väärtus tundub kärmem.
- **Damping** — Kui kiiresti vedru rahuneb. Väiksem sumbuvus tähendab rohkem põrget ja võnkumist.
- **Mass** — Kui raskena animeeritud element tundub. Suurem mass muudab selle aeglasemaks ja loiumaks.
- **Bounce** — Vedru, mis tõuseb üle ja rahuneb, lisades mängulisust.
- **Perceptual duration** — Kui kiiresti vedru tundub lõpetatuna, kuigi see jätkab all peenelt rahunemist.
- **Momentum** — Liikumine, mis kannab kiirust edasi, eriti pärast lohistamist või katkestust.
- **Velocity** — Kui kiiresti ja mis suunas element liigub. Katkestamisel kannab vedru selle järgmisse animatsiooni, nii et nipsatud element säilitab oma kiiruse.
- **Interruptible animation** — Animatsioon, mida saab poole liikumise pealt sujuvalt ümber suunata, selle asemel et see enne lõpetada.

### Kordused ja taustaliikumine – animatsioonid, mis töötavad iseseisvalt
- **Marquee** — Tekst või sisu, mis kerib pidevalt ringiratast.
- **Loop** — Animatsioon, mis kordub kindla arvu kordi või lõputult.
- **Alternate (yoyo)** — Kordus, mis mängib igal iteratsioonil edasi ja siis tagurpidi, selle asemel et algusesse tagasi hüpata.
- **Orbit** — Element, mis tiirleb pideval trajektooril ümber teise elemendi.
- **Pulse** — Õrn korduv mastaabi või läbipaistmatuse muutus tähelepanu tõmbamiseks.
- **Float** — Õrn pidev üles-alla triivimine, mis muudab staatilise elemendi elavaks ja kaalutuks.
- **Idle animation** — Peen liikumine, mis toimub ajal, kui element lihtsalt seisab ja ootab interaktsiooni.

### Viimistlus ja efektid – pisiasjad, mis eristavad head suurepärasest
- **Blur** — Hägustusfilter, mida kasutatakse elemendi pehmendamiseks või pisikeste ebatäiuslikkuste varjamiseks.
- **Clip-path** — Elemendi kärpimine kujundiks, mida kasutatakse paljastusteks, maskideks ja enne/pärast-liuguriteks.
- **Mask** — Elemendi osade peitmine või paljastamine kujundi või gradiendi abil – nagu clip-path, kuid pehmete, hajuvate servadega.
- **Before / after slider** — Lohistatav eraldaja, mis pühib kahe üksteise peal oleva pildi vahel nende võrdlemiseks.
- **Line drawing** — SVG-rada, mis joonistab end ise, nagu jälgiks seda nähtamatu pliiats.
- **Text morph** — Tekst, mis muutumisel animeerub tähthaaval, juhtides tähelepanu uuele väärtusele.
- **Skeleton / Shimmer** — Liikuva läikega kohatäide, mida näidatakse sisu laadimise ajal.
- **Number ticker** — Numbrid, mis veerevad või loendavad väärtuseni.
- **Tabular numbers** — Fikseeritud laiusega numbrid, et arvud muutudes ringi ei nihkuks. Hädavajalik loendurite, taimerite ja näidikute jaoks.
- **Typewriter** — Tekst, mis ilmub tähthaaval, nagu seda trükitaks.

### Jõudlus – mis hoiab liikumise sujuvana, mitte jõnksuvana
- **Frame rate (FPS)** — Sekundis joonistatud kaadrite arv. 60fps on sujuva liikumise baastase; uuematel ekraanidel 120fps.
- **Jank** — Nähtav jõnksumine, kui brauser jätab kaadreid vahele, sest ei suuda animatsiooniga sammu pidada.
- **Dropped frame** — Kaader, mille joonistamise tähtaja brauser maha magas, põhjustades liikumises pisikese tõrke.
- **Compositing** — GPU-l lubamine liigutada või hajutada elementi selle oma kihil, ilma paigutust või joonistust uuesti tegemata.
- **will-change** — CSS-vihje, et element hakkab animeeruma, nii et brauser saab selle juba eelnevalt oma kihile tõsta.
- **Layout thrashing** — Selliste omaduste nagu width, height, top või left animeerimine, mis sunnivad brauserit igas kaadris paigutust ümber arvutama, põhjustades jõnksumist.

### Põhimõtted, mida teada – kontseptsioonid, mis juhivad, millal ja kuidas animeerida
- **Purposeful animation** — Liikumine peaks täitma funktsiooni – orienteerima, andma tagasisidet, näitama seoseid –, mitte lihtsalt kaunistama.
- **Anticipation** — Väike hoovõtt vastassuunas enne liikumist, mis vihjab sellele, mis kohe juhtub.
- **Follow-through** — Elemendi osad jätkavad liikumist ja rahunevad veidi pärast põhiliikumise peatumist, lisades kaalu.
- **Squash & stretch** — Elemendi deformeerimine liikumise ajal, et edasi anda kaalu, kiirust ja paindlikkust.
- **Perceived performance** — Õige animatsioon muudab liidese kiiremaks tunduvaks, isegi kui see seda pole.
- **Frequency of use** — Mida sagedamini kasutaja animatsiooni näeb, seda lühem ja peenem see peaks olema.
- **Spatial consistency** — Animeerimine nii, et element säilitab olekute vahel oma identiteedi ja asukoha, et kasutajad ei kaotaks kunagi silmist, kuhu asjad läksid.
- **Hardware acceleration** — Transformi ja läbipaistmatuse (opacity) animeerimine laseb GPU-l hoida liikumise sujuvana.
- **Reduced motion** — Kasutaja prefers-reduced-motion-seade austamine liikumist vähendades või eemaldades.