Sdílet prostřednictvím

Easing Functions in Xamarin.Forms

  • Článek

Xamarin.Forms obsahuje třídu Easing, která umožňuje určit funkci přenosu, která řídí, jak se animace urychlují nebo zpomalují při jejich spuštění. Tento článek ukazuje, jak využívat předdefinované funkce pro usnadnění a jak vytvářet vlastní funkce pro usnadnění.

Třída Easing definuje řadu funkcí, které je možné využívat animacemi:

  • Funkce BounceIn easing odrazí animaci na začátku.
  • Funkce BounceOut easing odrazí animaci na konci.
  • Funkce CubicIn usnadnění pomalu zrychluje animaci.
  • Funkce CubicInOut pro usnadnění zrychluje animaci na začátku a odsudí animaci na konci.
  • Funkce CubicOut easing rychle odvolá animaci.
  • Linear Funkce easing používá konstantní rychlost a je výchozí funkce pro usnadnění.
  • Funkce SinIn usnadnění hladce zrychluje animaci.
  • Funkce SinInOut usnadnění hladce zrychluje animaci na začátku a hladce odsune animaci na konci.
  • Funkce SinOut usnadnění hladce odvolá animaci.
  • Funkce SpringIn easing způsobí, že animace se velmi rychle urychlí směrem ke konci.
  • Funkce SpringOut eassing způsobí, že animace se rychle zpomalí směrem ke konci.

Přípony In a Out přípony označují, jestli je efekt poskytovaný funkcí easing znatelný na začátku animace, na konci nebo na obou.

Kromě toho je možné vytvářet vlastní funkce pro usnadnění. Další informace najdete v tématu Vlastní funkce easingu.

Využívání funkce easingu

Metody rozšíření animace ve ViewExtensions třídě umožňují, aby byla funkce easing zadána jako konečný parametr metody, jak je znázorněno v následujícím příkladu kódu:

await image.TranslateTo(0, 200, 2000, Easing.BounceIn);
await image.ScaleTo(2, 2000, Easing.CubicIn);
await image.RotateTo(360, 2000, Easing.SinInOut);
await image.ScaleTo(1, 2000, Easing.CubicOut);
await image.TranslateTo(0, -200, 2000, Easing.BounceOut);

Zadáním funkce pro usnadnění animace se rychlost animace změní na nelineární a vytvoří efekt poskytovaný funkcí pro usnadnění. Vynechání funkce pro usnadnění při vytváření animace způsobí, že animace použije výchozí Linear funkci pro usnadnění, která vytváří lineární rychlost.

Poznámka:

Xamarin.Forms 5.0 obsahuje převaděč typů, který převede řetězcovou reprezentaci funkce easing na příslušný Easing člen výčtu. Tento převaděč typů je automaticky vyvolán u všech vlastností typu Easing , které jsou nastaveny v XAML.

Další informace o použití rozšiřujících metod animace ve třídě naleznete v ViewExtensions tématu Jednoduché animace. Easing functions can be consumed by the Animation class. Další informace naleznete v tématu Vlastní animace.

Vlastní funkce easingu

Existují tři hlavní přístupy k vytvoření vlastní funkce pro usnadnění:

  1. Vytvořte metodu double , která přebírá argument a vrací double výsledek.
  2. Vytvoření souboru Func<double, double>.
  3. Zadejte funkci easing jako argument konstruktoru Easing .

Ve všech třech případech by vlastní funkce easing měla vrátit hodnotu 0 pro argument 0 a 1 pro argument 1. Libovolnou hodnotu je však možné vrátit mezi hodnotami argumentů 0 a 1. Každý přístup se teď bude probírat zase.

Custom Easing – metoda

Vlastní funkci easing lze definovat jako metodu double , která přebírá argument, a vrátí double výsledek, jak je znázorněno v následujícím příkladu kódu:

double CustomEase (double t)
{
  return t == 0 || t == 1 ? t : (int)(5 * t) / 5.0;
}

await image.TranslateTo(0, 200, 2000, (Easing)CustomEase);

Metoda CustomEase zkrátí příchozí hodnotu na hodnoty 0, 0,2, 0,4, 0,6, 0,8 a 1. Image Proto je instance přeložena v diskrétních přeskakování, nikoli hladce.

Vlastní zásadný func

Vlastní easing funkce lze také definovat jako , Func<double, double>jak je znázorněno v následujícím příkladu kódu:

Func<double, double> CustomEaseFunc = t => 9 * t * t * t - 13.5 * t * t + 5.5 * t;
await image.TranslateTo(0, 200, 2000, CustomEaseFunc);

Představuje CustomEaseFunc easing funkce, která se spustí rychle, zpomalí a otočí kurz a pak znovu obrátí kurz, aby se rychle zrychlil směrem ke konci. I když je celkový pohyb Image instance směrem dolů, také dočasně obrátí kurz v polovině animace.

Vlastní konstruktor easing

Vlastní funkci easing lze také definovat jako argument konstruktoru Easing , jak je znázorněno v následujícím příkladu kódu:

await image.TranslateTo (0, 200, 2000, new Easing (t => 1 - Math.Cos (10 * Math.PI * t) * Math.Exp (-5 * t)));

Vlastní funkce easing je určena jako argument funkce lambda konstruktoru Easing a používá metodu Math.Cos k vytvoření pomalého poklesu efektu, který je navlhčen metodou Math.Exp . Proto se instance přeloží tak, Image aby se zdá, že se přeloží na konečné místo odpočinku.

Shrnutí

Tento článek ukazuje, jak využívat předdefinované funkce pro usnadnění a jak vytvářet vlastní funkce pro usnadnění. Xamarin.FormsEasing obsahuje třídu, která umožňuje určit funkci přenosu, která řídí, jak se animace urychlují nebo zpomalují při jejich spuštění.