Skip to main content
LanguageMagyar
Fizika és tokenek4 perc olvasás2026. október

Mik azok a mozgásjelzők, és hogyan működnek a tervezési rendszerekben?

Rövid válasz

A mozgásjelzők az animáció tervezési rendszerértékei: időtartamok, enyhülési görbék, rugóbeállítások és néha távolságok. Ahelyett, hogy minden komponensben 300 ms-os easy-out-ot írnának, a csapatok olyan neveket használnak, mint a motion.duration.medium vagy motion.spring.gentle, így a mozgás konzisztens marad, és egy helyen módosítható.

Core Takeaway

  • A mozgásjelzők az időzítési döntéseket tárolják: időtartam, lazítás, rugómerevség és csillapítás
  • Nevezze meg őket cél (belépés, kilépés, kiemelés) vagy méret (rövid, közepes, hosszú) szerint.
  • Tartson egy kis készletet: néhány időtartam és néhány ív vagy rugó
  • A hozzáférhetőség érdekében egy csökkentett mozgású változatot is tartalmazzon
  • Tárolja őket ugyanabban a token-folyamatban, mint a szín és a térköz

A tervező rendszerek már használnak tokeneket a színekhez, a térközökhöz és a tipográfiához. A mozgásjelzők ugyanezt az ötletet alkalmazzák az animációra. Az olyan döntéseket, mint például a „kis elemek gyorsan mozognak és finoman rendeződnek”, elnevezett értékekké alakítják, amelyeket minden tervező és fejlesztő használ.

Egy tipikus készlet tartalmaz időtartamokat (rövid, közepes, hosszú), enyhülési görbéket (standard, belépő, kilépés) és egyre inkább a merevség, csillapítás és tömeg által meghatározott rugókat. A rugók népszerűek, mert természetesnek érzik magukat, és jól kezelik a megszakításokat a kódban.

A névadás számít. A célon alapuló neveket, mint például a motion.enter vagy a motion.emphasis, könnyebb helyesen alkalmazni, mint a nyers számokat. A készlet legyen kicsi. Ha minden komponens megkapja a saját görbéjét, a tokenek abbahagyják a feladatukat.

Az akadálymentesítés is a tokenekhez tartozik. Határozza meg, hogy mi történjen, ha a felhasználó csökkentett mozgást kapcsol be, például rövidebb elhalványításokat a nagy mozgás helyett, így minden komponens ugyanúgy kezeli.

A tokeneket általában a JSON-ben tárolják, és egy tokenépítő eszközzel CSS változókká, Swift-, Kotlin vagy JavaScript-vé alakítják. Ingyenes Motion Token Generatorunk olyan kezdőkészletet állít elő, amelyhez igazodhat.

Gyakran ismételt kérdések

Hány mozgásjelzőre van szükségem?

Kevesebbet, mint gondolnád. Három vagy négy időtartam és két vagy három lazító görbe vagy rugó fedi le a legtöbb terméket.

A mozgásjelzőknek rugókat vagy időtartamokat kell használniuk?

Mindkettő működhet. A rugók természetesebbnek érzik az interaktív és megszakítható mozgást; Az időtartamok egyszerűbbek a fade és a CSS átmenetek esetében.

Hogyan kezelik a mozgásjelzők a csökkentett mozgást?

Határozzon meg alternatív értékeket, például rövidebb vagy csak átlátszó átmeneteket, amelyek akkor érvényesek, ha a felhasználó bekapcsolta a csökkentett mozgást.

Tárolhat-e a Figma mozgásjelzőket?

A Figma változókban számértékeket tárolhat, de a prototípus-átmenetekhez való kapcsolódásuk korlátozott. A legtöbb csapat egy token fájlban tartja az igazság forrását.

Kapcsolódó útmutatók és példák

Kezdő mozgásjelző készlet létrehozása

Válasszon időtartamot, lazítást és rugókat, tekintse meg előnézetüket, és exportálja a tokeneket a CSS és JSON számára. Ingyenes.

Nyissa meg a token generátort
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →