Sdílet prostřednictvím

Animace založené na relacích

Tento článek poskytuje stručný přehled o vytváření animací založených na vztazích pomocí Composition ExpressionAnimations.

Prostředí založená na dynamických relacích

Při vytváření prostředí pohybu v aplikaci existují časy, kdy pohyb není založený na čase, ale spíše závislý na vlastnosti na jiném objektu. KeyFrameAnimations nemohou velmi snadno vyjádřit tyto typy pohybových zkušeností. V těchto specifických případech již pohyb nemusí být diskrétní a předem definovaný. Místo toho se pohyb může dynamicky přizpůsobovat na základě jeho vztahu k jiným vlastnostem objektu. Můžete například animovat neprůhlednost objektu na základě jeho vodorovné polohy. Mezi další příklady patří pohybové zážitky, jako jsou Sticky Headers a Parallax.

Tyto typy pohybových zkušeností umožňují vytvořit uživatelské rozhraní, které je více propojené, místo pocitu jednotného a nezávislého. Uživateli to dává dojem dynamického uživatelského rozhraní.

Obíhající kruh

Zobrazení seznamu s paralaxem

Použití Expression Animations

K vytváření relačních pohybových prostředí použijte typ ExpressionAnimation. ExpressionAnimations (nebo Expressions for short) jsou nový typ animace, který umožňuje vyjádřit matematickou relaci – relaci, kterou systém používá k výpočtu hodnoty animační vlastnosti každý rámec. Jinými slovy, výrazy jsou jednoduše matematickou rovnicí, která definuje požadovanou hodnotu animační vlastnosti pro každý snímek. Výrazy jsou velmi všestrannou součástí, kterou lze použít v různých scénářích, včetně:

Při práci s ExpressionAnimations je pár věcí, které stojí za zmínku předem:

  • Nikdy nekončící – oproti komponentě KeyFrameAnimation, výrazy nemají omezenou dobu trvání. Protože výrazy jsou matematické relace, jsou animace, které jsou neustále běžící. Pokud zvolíte, můžete tyto animace zastavit.
  • Běžící, ale ne vždy vyhodnocovaný – výkon je vždy důvodem k obavám u animací, které jsou neustále běží. Nemusíte se bát, ale systém je dostatečně chytrý a výraz znovu vyhodnotí pouze v případě, že se změnil některý z jeho vstupů nebo parametrů.
  • cs-CZ: Rozlišení na správný typ objektu – Protože výrazy jsou matematické vztahy, je důležité zajistit, aby rovnice, která definuje výraz, odkazovala na stejný typ vlastnosti, která je cílem animace. Pokud například animuje posun, měl by se výraz přeložit na typ Vector3.

Komponenty výrazu

Při vytváření matematické relace výrazu existuje několik základních komponent:

  • Parametry – hodnoty představující konstantní hodnoty nebo odkazy na jiné objekty Composition.
  • Matematické operátory – typické matematické operátory plus(+), minus(-), multipli(*), divide(/), které spojují parametry a tvoří rovnici. Zahrnuté jsou také podmíněné operátory, například větší než(), equal(>==), ternární operátor (podmínka ? ifTrue: ifFalse), atd.
  • Matematické funkce – matematické funkce/klávesové zkratky založené na System.Numerics. Úplný seznam podporovaných funkcí najdete v tématu ExpressionAnimation.

Výrazy také podporují sadu klíčových slov – speciální fráze, které mají odlišný význam pouze v rámci systému ExpressionAnimation. Jsou uvedené (společně s úplným seznamem matematických funkcí) v dokumentaci k ExpressionAnimation .

Vytváření výrazů pomocí ExpressionBuilderu

V aplikaci WinUI můžete vytvářet výrazy dvěma způsoby:

  1. Vytvořte rovnici jako řetězec prostřednictvím oficiálního veřejného rozhraní API.
  2. Pomocí nástroje ExpressionBuilder, který je součástí sady nástrojů Windows Community Toolkit, sestavte rovnici v modelu objektu bezpečného typu.

Pro účely tohoto dokumentu definujeme výrazy pomocí ExpressionBuilderu.

Parametry

Parametry tvoří jádro výrazu. Existují dva typy parametrů:

  • Konstanty: Jedná se o parametry představující typové proměnné System.Numeric. Tyto parametry při spuštění animace získají přiřazené hodnoty jednou.
  • Odkazy: Jedná se o parametry představující odkazy na Objekty CompositionObjects – tyto parametry se průběžně aktualizují po spuštění animace.

Obecně platí, že reference jsou hlavním aspektem toho, jak se výstup výrazu může dynamicky měnit. Jak se tyto odkazy mění, výstup výrazu se v důsledku toho změní. Pokud vytvoříte výraz s řetězci nebo je použijete v kontextu šablonování (použitím výrazu pro zaměření na více CompositionObjects), budete muset pojmenovat a nastavit hodnoty parametrů. Další informace najdete v části Příklad.

Práce s KeyFrameAnimations

Výrazy lze také použít s KeyFrameAnimations. V těchto případech chcete pomocí výrazu definovat hodnotu klíčového snímku v určitém časovém bodě – tyto typy klíčových snímků se nazývají ExpressionKeyFrames.

KeyFrameAnimation.InsertExpressionKeyFrame(Single, String)
KeyFrameAnimation.InsertExpressionKeyFrame(Single, ExpressionNode)

Na rozdíl od ExpressionAnimations se ale ExpressionKeyFrames vyhodnocují pouze jednou při spuštění KeyFrameAnimation. Mějte na paměti, že ExpressionAnimation nepředáváte jako hodnotu KeyFrame, ale místo toho řetězec (nebo ExpressionNode při použití ExpressionBuilder).

Příklad

Teď si projdeme příklad použití výrazů, konkrétně ukázky PropertySet z Galerie ukázek uživatelského rozhraní Systému Windows. Podíváme se na výrazový příkaz, který spravuje pohyb po oběžné dráze modré koule.

Obíhající kruh

Pro celkový zážitek existují tři komponenty:

  1. Jedná se o KeyFrameAnimation, která animuje vertikální posun červené koule.
  2. PropertySet s vlastností Otočení, která pomáhá řídit oběžnou dráhu a je animována pomocí jiné KeyFrameAnimation.
  3. Výraz Animation, který ovládá offset modré koule tím, že odkazuje na vlastnost posunu červené koule a vlastnost rotace, aby byla zachována dokonalá oběžná dráha.

Zaměříme se na ExpressionAnimation definovanou v #3. Budeme také používat ExpressionBuilder třídy k vytvoření tohoto výrazu. Kopie kódu použitého k sestavení tohoto prostředí prostřednictvím řetězců je uvedená na konci.

V této rovnici jsou dvě vlastnosti, na které je potřeba odkazovat z PropertySet; jeden je středový posun a druhý je otočení.

var propSetCenterPoint =
_propertySet.GetReference().GetVector3Property("CenterPointOffset");

// This rotation value will animate via KFA from 0 -> 360 degrees
var propSetRotation = _propertySet.GetReference().GetScalarProperty("Rotation");

Dále musíte definovat komponentu Vector3, která odpovídá skutečné rotaci oběžné dráhy.

var orbitRotation = EF.Vector3(
    EF.Cos(EF.ToRadians(propSetRotation)) * 150,
    EF.Sin(EF.ToRadians(propSetRotation)) * 75, 0);

Poznámka:

EF je zkrácená notační forma "using" pro definování Expresních funkcí z vaší knihovny pro tvorbu výrazů WinUI.

Nakonec zkombinujte tyto komponenty, určete pozici Červené koule a definujte matematický vztah.

var orbitExpression = redSprite.GetReference().Offset + propSetCenterPoint + orbitRotation;
blueSprite.StartAnimation("Offset", orbitExpression);

V hypotetické situaci, co kdybyste chtěli použít stejný Výraz, ale se dvěma dalšími vizuály, což by znamenalo dvě sady obíhajících kruhů. Pomocí CompositionAnimations můžete znovu použít animaci a cílit na více objektů CompositionObjects. Jedinou věcí, kterou musíte změnit, když použijete tento Výraz pro další případ oběžné dráhy, je odkaz na Visual. Říkáme tomu šablonování.

V tomto případě upravíte výraz, který jste vytvořili dříve. Místo "získání" odkazu na Objekt CompositionObject vytvoříte odkaz s názvem a pak přiřadíte různé hodnoty:

var orbitExpression = ExpressionValues.Reference.CreateVisualReference("orbitRoundVisual");
orbitExpression.SetReferenceParameter("orbitRoundVisual", redSprite);
blueSprite.StartAnimation("Offset", orbitExpression);
// Later on … use same Expression to assign to another orbiting Visual
orbitExpression.SetReferenceParameter("orbitRoundVisual", yellowSprite);
greenSprite.StartAnimation("Offset", orbitExpression);

Tady je kód, pokud jste definovali výraz s řetězci prostřednictvím veřejného rozhraní API.

ExpressionAnimation expressionAnimation = compositor.CreateExpressionAnimation("visual.Offset + " +
    "propertySet.CenterPointOffset + " +
    "Vector3(cos(ToRadians(propertySet.Rotation)) * 150," + "sin(ToRadians(propertySet.Rotation)) * 75, 0)");
    
var propSetCenterPoint = _propertySet.GetReference().GetVector3Property("CenterPointOffset");
var propSetRotation = _propertySet.GetReference().GetScalarProperty("Rotation");
expressionAnimation.SetReferenceParameter("propertySet", _propertySet);
expressionAnimation.SetReferenceParameter("visual", redSprite);
  • Last updated on