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.