Sdílet prostřednictvím

Časování a usnadnění

Zatímco pohyb je založen na skutečném světě, jsme také digitální médium, které přichází s očekáváním rychlosti a výkonu.

Příklady

Otevřete aplikaci Galerie WinUI 3 a podívejte se na funkci Easing Functions v akci.

Ikona galerie WinUI 3 Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Standardní hodnoty doby trvání animace

WinUI 3 poskytuje sadu standardních animačních dob, které se používají v rámci ovládacích prvků platformy. Tyto pojmenované prostředky můžete použít také při vytváření vlastních animací scénáře.

Název themeResource Hodnota
NormálníDélkaAnimaceOvládání 250 ms
ControlRychlostTrváníAnimace 167 ms
ControlFasterAnimationDuration 83 ms

Zjemnění fluentového pohybu

Eassing je způsob, jak manipulovat s rychlostí objektu při pohybu. Je to lepidlo, které spojuje všechny pohybové zážitky Fluent. Ačkoli je extrémní, zpomalení používané v systému pomáhá sjednotit fyzický dojem objektů pohybujících se v celém systému. Je to jeden ze způsobů, jak napodobovat skutečný svět a vytvářet objekty v pohybu, jako by patřily do svého prostředí.

Krátké video ukazuje kruh, který se objeví v pravém dolním rohu záběru a zastaví se v levém horním rohu záběru.

Použít zjemnění při pohybu

Tyto easings vám pomohou dosáhnout přirozenějšího vjemu a jsou základem, který používáme pro Fluent pohyb.

Rychle ven, pomalu dovnitř

cubic-bezier(0, 0, 0, 1)

Používá se pro objekty nebo UI, které vstupují do scény, buď procházením, nebo vytvářením.

Jakmile se objekt dostane na místo, setká se s extrémním třením, které zpomalí objekt až k zastavení. Působí to dojmem, že objekt cestoval z velké dálky a vstoupil velmi vysokou rychlostí, nebo se rychle vrací do klidového stavu.

I když mu předchází okamžik nereagování, má rychlost příchozího objektu vliv na rychlé a responzivní odezvy.

zpomalovat uvolnění

Pomalý ven, rychlý dovnitř

cubic-bezier(1 , 0 , 1 , 1)

Slouží pro uživatelské rozhraní nebo objekty, které ukončují scénu.

Objekty se pohánějí a získávají dynamiku, dokud nedosáhnou rychlosti úniku. Výsledný pocit spočívá v tom, že se objekt snaží co nejsnadněji vyjít z cesty uživatele a zajistit, aby se nový obsah dostal.

zrychlit uvolnit

  • Přehled pohybu
  • Fluent Design - Pohyb
  • směrovost a závažnost
  • Last updated on