Sdílet prostřednictvím

Animace s klíčovými snímky a usnadnění animací funkcí

Animace lineárních klíčových snímků, klíčové snímkování s hodnotou KeySpline nebo funkce pro zjemnění jsou tři různé techniky pro přibližně stejný scénář: vytvoření scénářové animace, která je trochu složitější a která používá nelineární chování animace od počátečního stavu ke koncovému stavu.

Požadavky

Ujistěte se, že jste si přečetli téma o animacích ve scénářích . Toto téma vychází z konceptů animací, které byly vysvětleny v animacích ve storyboardu a nebudou znovu probírány. Například animace s použitím storyboardu popisují, jak zaměřit animace, kde storyboardy slouží jako prostředky, a hodnoty vlastností časové osy, jako je Duration, FillBehavior a podobně.

Animace pomocí klíčových snímků

Animace klíčových snímků umožňují nastavení více než jedné cílové hodnoty v bodě na časové ose animace. Jinými slovy, každý klíčový snímek může zadat jinou mezihodnotu a poslední dosažený klíčový snímek je konečná hodnota animace. Zadáním více hodnot, které chcete animovat, můžete vytvářet složitější animace. Animace snímků klíčů také umožňují různé interpolační logiky, které jsou implementované jako jiná podtřída KeyFrame pro jednotlivé typy animací. Konkrétně každý typ klíčového rámce animace má variantu diskrétní, lineární, spline a easing její třídy KeyFrame pro určení svých klíčových snímků. Pokud chcete například určit animaci, která cílí na Double a používá klíčové snímky, můžete deklarovat klíčové snímky pomocí DiscreteDoubleKeyFrame, LinearDoubleKeyFrame, SplineDoubleKeyFrame a EasingDoubleKeyFrame. Můžete použít libovolný z těchto typů v rámci jedné kolekce KeyFrames, abyste změnili interpolaci při každém dosažení nového klíčového snímku.

Pro interpolační chování každý klíčový snímek řídí interpolaci, dokud není dosažen jeho čas KeyTime. V té době je také dosaženo jeho hodnoty. Pokud je více klíčových snímků za touto hodnotou, stanou se hodnota počáteční hodnotou pro další klíčový snímek v sekvenci.

Pokud na začátku animace neexistuje žádný snímek s KeyTime "0:0:0", počáteční hodnota je ta, která je bez animace vlastnosti. To se podobá tomu,jak animace// funguje, pokud neexistuje od.

Doba trvání animace klíčového snímku je implicitně rovna nejvyšší hodnotě KeyTime nastavené v libovolném z jeho klíčových snímků. Pokud chcete, můžete nastavit explicitní dobu trvání , ale dávejte pozor, aby nebyla kratší než doba trvání klíče ve vašich vlastních klíčových snímcích, nebo můžete vypnout část animace.

Kromě doby trvání můžete nastavit všechny vlastnosti založené na časové ose u animace s klíčovými snímky, podobně jako u animace Od/Do/By, protože třídy animací s klíčovými snímky jsou také odvozeny od časové osy. Toto jsou:

  • AutoReverse: Po dosažení posledního klíčového snímku se snímky opakují v obráceném pořadí od koncového bodu. Tím se zdvojnásobí zdánlivá doba trvání animace.
  • Počáteční čas: zpožďuje začátek animace. Časová osa pro hodnoty KeyTime v rámcích nezačne počítat, dokud nedosáhne BeginTime, takže nehrozí žádné riziko zkrácení snímků.
  • FillBehavior: určuje, co se stane, když se dosáhne posledního klíčového snímku. FillBehavior nemá žádný vliv na zprostředkující klíčové snímky.
  • RepeatBehavior:
    • Pokud je nastaveno na Navždy, klíčové snímky a jejich časová osa se opakují nekonečně.
    • Pokud je nastaven počet iterací, časová osa se mnohokrát opakuje.
    • Pokud je nastavena doba trvání, časová osa se opakuje, dokud není dosaženo této doby. Pokud není celočíselným násobkem implicitní doby trvání časové osy, může to zkrátit animaci v průběhu posloupnosti klíčových snímků.
  • SpeedRatio (běžně se nepoužívá)

Lineární klíčové rámce

Výsledkem lineárních klíčových snímků je lineární interpolace hodnoty, dokud se nedosáhne KeyTime rámce. Toto chování interpolace je nejvíce podobné jednodušším animacím From/To/By , které jsou popsány v tématu Storyboarded animace.

Tady je postup, jak pomocí animace s klíčovými snímky a lineárními klíčovými snímky škálovat výšku zobrazení obdélníku. Tento příklad spustí animaci, ve které se výška obdélníku mírně a lineárně zvýší po dobu prvních 4 sekund a pak se rychle škáluje po poslední sekundu, dokud se obdélník zdvojnásobí počáteční výšku.

<StackPanel>
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimationUsingKeyFrames
              Storyboard.TargetName="myRectangle"
              Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                <LinearDoubleKeyFrame Value="1" KeyTime="0:0:0"/>
                <LinearDoubleKeyFrame Value="1.2" KeyTime="0:0:4"/>
                <LinearDoubleKeyFrame Value="2" KeyTime="0:0:5"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </StackPanel.Resources>
</StackPanel>

Samostatné klíčové snímky

Diskrétní klíčové snímky vůbec nepoužívají žádnou interpolaci. Po dosažení hodnoty KeyTime se nová hodnota jednoduše použije. V závislosti na tom, která vlastnost uživatelského rozhraní je animována, to často vytváří animaci, která se zdá přeskočit. Ujistěte se, že toto je estetické chování, které opravdu chcete. Zjevné skoky můžete minimalizovat zvýšením počtu klíčových snímků, které deklarujete, ale pokud je vaším cílem plynulá animace, můžete místo toho použít lineární nebo spline klíčové snímky.

Poznámka:

Samostatné klíčové snímky představují jediný způsob, jak animovat hodnotu, která není typu Double, Point ani Color, s DiscreteObjectKeyFrame. Podrobněji to probereme dále v tomto tématu.

Klíčové snímky spline

Klíčový snímek spline vytváří proměnlivý přechod mezi hodnotami podle hodnoty vlastnosti KeySpline. Tato vlastnost určuje první a druhý řídicí body bezierovy křivky, která popisuje zrychlení animace. KeySpline v podstatě definuje relaci funkce v průběhu času, kde je graf času funkce tvarem této křivky Bezier. Obvykle zadáte hodnotu KeySpline v řetězci atributu XAML, který má čtyři dvojité hodnoty oddělené mezerami nebo čárkami. Tyto hodnoty jsou dvojice X,Y pro dva řídicí body bezierovy křivky. "X" je čas a "Y" je modifikátor funkce na hodnotu. Každá hodnota by měla být vždy v rozmezí od 0 do 1 včetně. Bez změny řídicího bodu keySpline je přímka od 0,0 do 1,1 znázornění funkce v průběhu času pro lineární interpolaci. Řídicí body mění tvar této křivky a tím i chování funkce v průběhu času pro animaci křivky. Pravděpodobně je nejlepší vidět tento vizuál jako graf.

Tento další příklad ukazuje tři různé klíčové snímky použité na animaci, přičemž poslední z nich představuje animaci klíčového splajnu pro hodnotu typu Double (SplineDoubleKeyFrame). Všimněte si řetězce "0.6,0.0 0.9,0.00" použitého pro KeySpline. Výsledkem je křivka, kdy se animace zpočátku zdá běžet pomalu, ale pak rychle dosáhne hodnoty krátce před KeyTime.

<Storyboard x:Name="myStoryboard">
    <!-- Animate the TranslateTransform's X property
        from 0 to 350, then 50,
        then 200 over 10 seconds. -->
    <DoubleAnimationUsingKeyFrames
        Storyboard.TargetName="MyAnimatedTranslateTransform"
        Storyboard.TargetProperty="X"
        Duration="0:0:10" EnableDependentAnimation="True">

        <!-- Using a LinearDoubleKeyFrame, the rectangle moves 
            steadily from its starting position to 500 over 
            the first 3 seconds.  -->
        <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3"/>

        <!-- Using a DiscreteDoubleKeyFrame, the rectangle suddenly 
            appears at 400 after the fourth second of the animation. -->
        <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4"/>

        <!-- Using a SplineDoubleKeyFrame, the rectangle moves 
            back to its starting point. The
            animation starts out slowly at first and then speeds up. 
            This KeyFrame ends after the 6th second. -->
        <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:6"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

Změkčení klíčových snímků

Usnadňující klíčový snímek je klíčový rámec, kde se používá interpolace, a funkce interpolace v průběhu času je řízena několika předdefinovanými matematickými vzorci. Ve skutečnosti můžete vytvořit mnohem stejný výsledek s rámcem svrchní klávesy jako u některých typů funkcí easingu, ale existují i některé funkce, jako je BackEase, které nemůžete reprodukovat pomocí spline.

Chcete-li použít změkčovací funkci na změkčovací klíčový snímek, nastavíte vlastnost EasingFunction jako vlastnost prvku v XAML pro tento klíčový snímek. Pro hodnotu zadejte komponentu objektu pro jeden z typů funkcí easing.

V tomto příkladu se použije CubicEase a potom BounceEase jako po sobě jdoucí klíčové snímky na DoubleAnimation k vytvoření efektu odrazu.

<Storyboard x:Name="myStoryboard">
    <DoubleAnimationUsingKeyFrames Duration="0:0:10"
        Storyboard.TargetProperty="Height"
        Storyboard.TargetName="myEllipse">

        <!-- This keyframe animates the ellipse up to the crest 
            where it slows down and stops. -->
        <EasingDoubleKeyFrame Value="-300" KeyTime="00:00:02">
            <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>

        <!-- This keyframe animates the ellipse back down and makes
            it bounce. -->
        <EasingDoubleKeyFrame Value="0" KeyTime="00:00:06">
            <EasingDoubleKeyFrame.EasingFunction>
                <BounceEase Bounces="5"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

Toto je pouze jeden příklad easing funkce. Další informace probereme v další části.

Usnadnění funkcí

Funkce pro usnadnění umožňují použít vlastní matematické vzorce na animace. Matematické operace jsou často užitečné k vytváření animací, které simulují fyziku reálného světa v 2D souřadnicovém systému. Můžete například chtít, aby se objekt realisticky poskočil nebo se choval, jako by byl na pružině. Aby bylo možné tyto efekty přiblížit, mohli byste použít klíčové snímky nebo dokonce animace Od do podle, ale to by vyžadovalo značné množství práce a animace by byla méně přesná než použití matematického vzorce.

Funkce pro usnadnění se dají použít na animace třemi způsoby:

Tady je seznam funkcí pro usnadnění:

  • BackEase: Zatáhne pohyb animace mírně před tím, než začne animovat v vyznačené cestě.
  • BounceEase: Vytvoří efekt odrazu.
  • CircleEase: Vytvoří animaci, která zrychluje nebo zpomaluje pomocí kruhové funkce.
  • CubicEase: Vytvoří animaci, která zrychluje nebo zmenšuje pomocí vzorce f(t) = t3.
  • ElasticEase: Vytvoří animaci, která se podobá pružině oscilující sem a tam, dokud se nezastaví.
  • ExponentialEase: Vytvoří animaci, která zrychlí nebo zpomalí pomocí exponenciálního vzorce.
  • PowerEase: Vytvoří animaci, která zrychlí nebo zmenšuje pomocí vzorce f(t) = tp, kde p se rovná vlastnosti Power .
  • QuadraticEase: Vytvoří animaci, která zrychlí nebo zpomalí pomocí vzorce f(t) = t2.
  • QuarticEase: Vytvoří animaci, která zrychlí nebo zmenšuje pomocí vzorce f(t) = t4.
  • QuinticEase: Vytvořte animaci, která zrychluje nebo zpomaluje pomocí vzorce f(t) = t5.
  • SineEase: Vytvoří animaci, která zrychlí nebo zpomalí pomocí sinusového vzorce.

Některé z funkcí pro usnadnění mají své vlastní vlastnosti. Například BounceEase má dvě vlastnosti Bounces a Bounciness , které upravují chování funkce v průběhu času dané bounceease. Jiné easingové funkce, jako je CubicEase, nemají jiné vlastnosti než vlastnost EasingMode, kterou sdílejí všechny easingové funkce, a vždy vytvářejí stejné chování funkce v průběhu času.

Některé z těchto funkcí pro ulehčení se mohou překrývat, v závislosti na tom, jak nastavíte jejich vlastnosti, protože některé z těchto funkcí mají své vlastní vlastnosti. Například QuadraticEase je úplně stejná jako PowerEase s výkonem rovnajícím se 2. CircleEase je v podstatě obdobou ExponentialEase s výchozí hodnotou.

Funkce Easing BackEase je jedinečná, protože může změnit hodnotu mimo normální rozsah, jak je nastaveno hodnotou Od/do nebo hodnotami klíčových snímků. Spustí animaci změnou hodnoty v opačném směru, jak by bylo očekáváno od normálního chování Od/do , vrátí se zpět na hodnotu Od nebo znovu počáteční hodnotu a pak spustí animaci jako normální.

V předchozím příkladu jsme ukázali, jak deklarovat uvolňovací funkci pro klíčovou animaci. Tato další ukázka použije funkci easingna animaci//.

<StackPanel x:Name="LayoutRoot" Background="White">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation From="30" To="200" Duration="00:00:3" 
                Storyboard.TargetName="myRectangle" 
                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                <DoubleAnimation.EasingFunction>
                    <BounceEase Bounces="2" EasingMode="EaseOut" 
                                Bounciness="2"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle x:Name="myRectangle" Fill="Blue" Width="200" Height="30"/>
</StackPanel>

Když sena animaci// animace použije funkce easing, mění se funkce v průběhu času, jak se hodnota interpoluje mezi hodnotami Od a Do po dobu trvání animace. Bez usnadnění funkce by to byla lineární interpolace.

Animace diskrétních hodnot objektů

Jeden typ animace si zaslouží zvláštní zmínku, protože je to jediný způsob, jak použít animovanou hodnotu u vlastností, které nejsou typu Double, Point nebo Color. Toto je animace key-frame ObjectAnimationUsingKeyFrames. Animace pomocí hodnot objektu se liší, protože neexistuje možnost interpolace hodnot mezi snímky. Když je dosaženo KeyTime snímku, animovaná hodnota se okamžitě nastaví na hodnotu zadanou v klíčovém snímku. Protože neexistuje žádná interpolace, v kolekci klíčových snímků ObjectAnimationUsingKeyFrames používáte pouze jeden klíčový snímek: DiscreteObjectKeyFrame.

HodnotaDiskrétního ObjectKeyFrame je často nastavována pomocí syntaxe prvku vlastnosti, protože hodnota objektu, kterou se snažíte nastavit, často není vyjádřitelná jako řetězec pro vyplnění Value v syntaxi atributu. Syntaxi atributu můžete použít i v případě, že použijete odkaz, jako je StaticResource.

Jedním z míst, kde je ve výchozích šablonách použit objekt ObjectAnimationUsingKeyFrames, je, když vlastnost šablony odkazuje na prostředek Brush. Tyto prostředky jsou objekty SolidColorBrush, nikoli jen hodnota barvy, a používají prostředky definované jako systémové motivy (ThemeDictionaries). Dají se přiřadit přímo k hodnotě typu štětec, jako je TextBlock.Foreground , a nemusí používat nepřímé cílení. Protože ale SolidColorBrush není Double, Point nebo Color, musíte použít ObjectAnimationUsingKeyFrames k použití prostředku.

<Style x:Key="TextButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="Transparent">
                    <TextBlock x:Name="Text"
                        Text="{TemplateBinding Content}"/>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ApplicationPointerOverForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ApplicationPressedForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
...
                       </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ObjektAnimationUsingKeyFrames můžete také použít k animaci vlastností, které používají hodnotu výčtu. Tady je další příklad z pojmenovaného stylu, který pochází z výchozích šablon prostředí Windows Runtime. Všimněte si, jak nastavuje vlastnost Visibility, která přijímá konstantu výčtu Visibility. V tomto případě můžete hodnotu nastavit pomocí syntaxe atributu. Pro nastavení vlastnosti s hodnotou výčtu, například "Sbalené", potřebujete pouze nekvalifikovaný název konstanty z výčtu.

<Style x:Key="BackButtonStyle" TargetType="Button">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="Button">
          <Grid x:Name="RootGrid">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
...           <VisualState x:Name="Disabled">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame Value="Collapsed" KeyTime="0"/>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
...
          </VisualStateManager.VisualStateGroups>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Pro sadu rámců ObjectAnimationUsingKeyFrames můžete použít více než jeden objekt DiscreteObjectKeyFrames. Toto může být zajímavý způsob, jak vytvořit animaci "prezentace" tím, že animujete hodnotu Image.Source, jako příklad situace, kde může být užitečné mít více hodnot objektů.

  • Last updated on