Přehled animací klíčových snímků
Toto téma vás seznámí s animacemi snímků klíčů. Animace snímků klíčů umožňují animovat pomocí více než dvou cílových hodnot a řídit interpolační metodu animace.
Předpoklady
Abyste pochopili tento přehled, měli byste být obeznámeni s animacemi a časovými osami windows Presentation Foundation (WPF). Úvod k animacím najdete v přehledu animací. Pomáhá také seznámit se s animacemi Od/Do/Podle. Další informace najdete v přehledu animací Od/Do/Podle.
Co je animace s klíčem?
Podobně jako animace From/To/By animace animací s klíčem animuje hodnotu cílové vlastnosti. Vytvoří přechod mezi jeho cílovými hodnotami nad jeho Duration. Animace From/To/By však vytváří přechod mezi dvěma hodnotami, animace s jedním snímkem s klíčem může vytvořit přechody mezi libovolným počtem cílových hodnot. Na rozdíl od animace From/To/By nemá animace snímku klíče žádné vlastnosti Od, To nebo Podle, se kterými se mají nastavit jeho cílové hodnoty. Cílové hodnoty animace s klíčem jsou popsány pomocí objektů klíčových snímků (proto se jedná o výraz "animace klíčových snímků"). Chcete-li zadat cílové hodnoty animace, vytvoříte objekty s rámečkem klíče a přidáte je do kolekce animace KeyFrames . Když se animace spustí, přejde mezi zadanými snímky.
Kromě podpory vícecílových Metoda interpolace animace definuje, jak přechází z jedné hodnoty na další. Existují tři typy interpolací: diskrétní, lineární a splined.
Pokud chcete animovat pomocí animace s klíčem, proveďte následující kroky.
Deklarujte animaci a určete její Duration, stejně jako u animace z/do/podle.
Pro každou cílovou hodnotu vytvořte rámec klíče příslušného typu, nastavte jeho hodnotu a KeyTimepřidejte ji do kolekce animace KeyFrames .
Přidružte animaci k vlastnosti stejně jako k animaci From/To/By. Další informace o použití animace na vlastnost pomocí scénáře naleznete v tématu Storyboards Overview.
Následující příklad používá DoubleAnimationUsingKeyFrames k animaci Rectangle prvku na čtyři různá umístění.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
WindowTitle="KeyFrame Animations">
<Border Width="400" BorderBrush="Black">
<Rectangle Fill="Blue"
Width="50" Height="50"
HorizontalAlignment="Left">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- 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">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Border>
</Page>
Podobně jako v animaci From/To/By lze animaci s klíčem použít u vlastnosti pomocí Storyboard značek a kódu nebo pomocí BeginAnimation metody v kódu. Můžete také použít animaci s klíčem k vytvoření AnimationClock a použití na jednu nebo více vlastností. Další informace o různých metodách použití animací naleznete v tématu Přehled technik animace vlastností.
Typy animací s klíčovými snímky
Protože animace generují hodnoty vlastností, existují různé typy animací pro různé typy vlastností. Pokud chcete animovat vlastnost, která přebírá Double (například vlastnost elementu Width ), použijete animaci, která vytváří Double hodnoty. Pokud chcete animovat vlastnost, která přebírá Point, použijete animaci, která vytváří Point hodnoty atd.
Třídy animací s klíčovým rámečkem System.Windows.Media.Animation patří do oboru názvů a dodržují následující zásady vytváření názvů:
<Typ>AnimationUsingKeyFrames
Where <Type> je typ hodnoty, kterou třída animuje.
WPF poskytuje následující třídy animací s klíčovými snímky.
Cílové hodnoty (klíčové rámce) a časy klíčů
Stejně jako existují různé typy animací klíčových snímků pro animaci různých typů vlastností, existují také různé typy objektů rámce klíče: jeden pro každý typ animované hodnoty a interpolační metody podporované. Typy klíčových snímků se řídí následujícími konvencemi vytváření názvů:
<InterpolaceMethod><– typ>KeyFrame
Kde <InterpolationMethod> je interpolační metoda, kterou klíč rámec používá a <Type> je typ hodnoty, kterou třída animuje. Animace s klíčovým snímkem, která podporuje všechny tři metody interpolace, bude obsahovat tři typy snímků klíčů, které můžete použít. Můžete například použít tři typy snímků klíčů s DoubleAnimationUsingKeyFrames: DiscreteDoubleKeyFrame, LinearDoubleKeyFramea SplineDoubleKeyFrame. (Metody interpolace jsou podrobně popsány v další části.)
Primárním účelem rámce klíče je zadat a KeyTime a Value. Každý typ rámce klíče poskytuje tyto dvě vlastnosti.
Vlastnost Value určuje cílovou hodnotu pro tento snímek klíče.
Vlastnost KeyTime určuje, kdy (v rámci animace Duration) je dosažen snímek Value klíče.
Když se spustí animace snímku klíče, iteruje jeho klíčovými snímky v pořadí definovaném jejich KeyTime vlastnostmi.
Pokud v době 0 neexistuje žádný rámec klíče, animace vytvoří přechod mezi aktuální hodnotou cílové vlastnosti a Value prvním snímkem klíče. V opačném případě se výstupní hodnota animace změní na hodnotu prvního snímku klíče.
Animace vytvoří přechod mezi Value prvním a druhým klíčovými snímky pomocí interpolační metody určené druhým snímkem klíče. Přechod začíná na prvním snímku KeyTime klíče a končí po dosažení druhého snímku KeyTime klíče.
Animace pokračuje a vytváří přechody mezi každým následným snímkem klíče a předchozím snímkem klíče.
A konečně animace přejde na hodnotu rámce klíče s největším časem klíče, který je roven nebo menší než animace Duration.
Pokud se animace Duration rovná AutomaticDuration času posledního snímku klíče, animace skončí. V opačném případě, pokud je animace Duration větší než čas klíče posledního snímku klíče, animace obsahuje hodnotu snímku klíče, dokud nedosáhne konce jeho Duration. Podobně jako u všech animací používá animace s klíčem jeho FillBehavior vlastnost k určení, jestli obsahuje konečnou hodnotu, když dosáhne konce aktivního období. Další informace najdete v přehledu chování časování.
Následující příklad používá DoubleAnimationUsingKeyFrames objekt definovaný v předchozím příkladu k předvedení, jak fungují Value a KeyTime vlastnosti.
První snímek klíče okamžitě nastaví výstupní hodnotu animace na 0.
Druhý snímek klíče animuje od 0 do 350. Spustí se po skončení prvního rámce klíče (v čase = 0 sekund) a přehraje se po dobu 2 sekund, končící v čase = 0:0:2.
Třetí snímek klíče animuje z 350 na 50. Spustí se, když skončí druhý rámec klíče (v čase = 2 sekundy) a přehraje se po dobu 5 sekund, končící v čase = 0:0:7.
Čtvrtý snímek klíče animuje od 50 do 200. Spustí se, když třetí rámec klíče skončí (v čase = 7 sekund) a přehraje se po dobu 1 sekundy, končící v čase = 0:0:8.
Vzhledem k tomu, že Duration vlastnost animace byla nastavena na 10 sekund, animace uchovává její konečnou hodnotu po dobu dvou sekund před ukončením v čase = 0:0:10.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
WindowTitle="KeyFrame Animations">
<Border Width="400" BorderBrush="Black">
<Rectangle Fill="Blue"
Width="50" Height="50"
HorizontalAlignment="Left">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- 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">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Border>
</Page>
Interpolační metody
Předchozí části zmínily, že některé animace snímků klíčů podporují více metod interpolace. Interpolace animace popisuje, jak animace přechází mezi hodnotami v průběhu jeho trvání. Výběrem typu snímku klíče, který použijete s animací, můžete definovat interpolační metodu pro daný segment snímku klíče. Existují tři různé typy interpolačních metod: lineární, diskrétní a splined.
Lineární interpolace
Při lineární interpolaci pokračuje animace konstantní rychlostí doby trvání segmentu. Pokud například segment rámce klíče přejde z 0 na 10 po dobu trvání 5 sekund, animace vypíše v zadaných časech následující hodnoty:
| Čas | Výstupní hodnota |
|---|---|
| 0 | 0 |
| 1 | 2 |
| 2 | 4 |
| 3 | 6 |
| 4 | 8 |
| 4.25 | 8.5 |
| 4.5 | 9 |
| 5 | 10 |
Diskrétní interpolace
Díky diskrétní interpolaci funkce animace přeskočí z jedné hodnoty na druhou bez interpolace. Pokud se segment klíčového rámce změní z 0 na 10 po dobu trvání 5 sekund, animace vypíše v zadaných časech následující hodnoty:
| Čas | Výstupní hodnota |
|---|---|
| 0 | 0 |
| 1 | 0 |
| 2 | 0 |
| 3 | 0 |
| 4 | 0 |
| 4.25 | 0 |
| 4.5 | 0 |
| 5 | 10 |
Všimněte si, že animace nezmění svou výstupní hodnotu až do konce doby trvání segmentu.
Slined interpolace je složitější. Popisuje se v další části.
Slined Interpolation
Slined interpolace lze použít k dosažení realističtějších časování efektů. Vzhledem k tomu, že animace se tak často používají k napodobení efektů, ke kterým dochází v reálném světě, můžou vývojáři potřebovat kontrolu nad akcelerací a zpomalením objektů a úzkou manipulací se segmenty časování. Klíčové snímky s křivkou umožňují animovat s splined interpolací. U jiných klíčových snímků zadáte a ValueKeyTime. Při rámeček klíče s křivkou zadáte také KeySpline. Následující příklad ukazuje jeden snímek klíče spline pro .DoubleAnimationUsingKeyFrames KeySpline Všimněte si vlastnosti. To znamená, že se rámeček klíče s křivkou liší od ostatních typů klíčových snímků.
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Krychlová bezierová křivka je definována počátečním bodem, koncovým bodem a dvěma kontrolními body. Vlastnost KeySpline rámeček klíče spline definuje dva řídicí body křivky Bezier, která se rozšiřuje od (0,0) do (1,1). První řídicí bod řídí faktor křivky první poloviny Bezierovy křivky a druhý kontrolní bod řídí faktor křivky druhé poloviny bezierového segmentu. Výsledná křivka popisuje míru změny pro tento spline key frame. Čím je křivka strmější, tím rychleji klíč rám změní jeho hodnoty. Jakmile se křivka zploštěje, změní se jeho hodnoty pomaleji.
Můžete použít KeySpline k simulaci fyzických trajektorií, jako je padající voda nebo bouncování míčů, nebo použít další efekty "usnadnění" a "usnadnit" pohybové animace. U efektů interakce uživatelů, jako je pozadí prolnutí nebo přecházení řídicích tlačítek, můžete použít interpolaci slintáku, abyste urychlili nebo zpomalili rychlost změny animace určitým způsobem.
Následující příklad určuje KeySpline 0,1 1,0, který vytvoří následující Bezier křivku.
Klíčový spline s kontrolními body (0.0, 1.0) a (1.0, 0.0)
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Tento snímek klíče se rychle animuje, jakmile začne, zpomalí a pak se znovu zrychlí, než skončí.
Následující příklad určuje KeySpline 0,5,0,25 0,75,1,0, který vytvoří následující bezierovou křivku.
Klíčový spline s kontrolními body (0,25, 0,5) a (0,75, 1,0)
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
Vzhledem k tomu, že zakřivení křivky Bezier se mění velmi málo, tento klíčový snímek se animuje téměř konstantní rychlostí; zpomalí se poněkud na jeho konec.
Následující příklad používá DoubleAnimationUsingKeyFrames k animaci pozice obdélníku. Vzhledem k tomu, že DoubleAnimationUsingKeyFrames se objekty používají SplineDoubleKeyFrame , používá přechod mezi každou hodnotou rámce klíče interpolaci.
<!-- This rectangle is animated using a key frame animation
with splined interpolation. -->
<Rectangle
Width="50"
Height="50"
Fill="Purple">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="SplineAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from its base value (0) to 500, then 200,
then 350 over 15 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="SplineAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:15"
RepeatBehavior="Forever">
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
<SplineDoubleKeyFrame Value="200" KeyTime="0:0:10" KeySpline="0.0,0.0 1.0,0.0" />
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Slinované interpolace může být obtížné pochopit; experimentování s různými nastaveními vám může pomoct. Ukázka animace klíčové spline umožňuje změnit hodnoty klíčových spline a zobrazit výsledek, který má v animaci.
Kombinování interpolačních metod
Klíčové snímky s různými typy interpolace můžete použít v animaci s jedním snímkem klíče. Když se vzájemně následují dvě animace snímků klíčů s různými interpolacemi, použije se k vytvoření přechodu z první hodnoty na druhou metodu interpolace druhého snímku klíče.
V následujícím příkladu je vytvořen, DoubleAnimationUsingKeyFrames který používá lineární, splined a diskrétní interpolaci.
<!-- This rectangle is animated using a key frame animation
with a combination of interpolation methods. -->
<Rectangle
Width="50"
Height="50"
Fill="Orange">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="ComboAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from its base value (0) to 500, then 200,
then 350 over 15 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="ComboAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:15"
RepeatBehavior="Forever">
<DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"
KeySpline="0.25,0.5 0.75,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Další informace o době trvání a časech klíčů
Podobně jako u jiných animací mají animace s klávesovým rámečkem Duration vlastnost. Kromě zadání animace Durationje nutné zadat, jakou část této doby trvání má každý snímek klíče. Uděláte to tak KeyTime , že popíšete klíčové snímky animace. Každý snímek KeyTime klíče určuje, kdy tento snímek klíče končí.
Vlastnost KeyTime neurčuje, jak dlouho se přehrává doba klíče. Doba, po kterou se přehraje snímek klíče, určuje doba ukončení snímku klíče, ukončení předchozího snímku klíče a doba trvání animace. Časy klíče mohou být zadány jako časová hodnota, procento nebo jako zvláštní hodnoty Uniform nebo Paced.
Následující seznam popisuje různé způsoby zadávání časů klíčů.
Hodnoty časového rozsahu
Můžete použít TimeSpan hodnoty k určení .KeyTime Hodnota by měla být větší nebo rovna 0 a menší nebo rovna době trvání animace. Následující příklad ukazuje animaci s dobou trvání 10 sekund a čtyřmi klíčovými snímky, jejichž časy klíčů jsou určeny jako časové hodnoty.
První snímek klíče se animuje ze základní hodnoty na 100 za prvních 3 sekund, končící časem = 0:0:03.
Druhý snímek klíče animuje z 100 na 200. Spustí se po skončení prvního klíče (v čase = 3 sekundy) a přehraje se po dobu 5 sekund, končící v čase = 0:0:8.
Třetí snímek klíče animuje od 200 do 500. Spustí se, když skončí druhý rámec klíče (v čase = 8 sekund) a přehraje se po dobu 1 sekundy, končící v čase = 0:0:9.
Čtvrtý snímek klíče animuje z 500 na 600. Začne, když třetí snímek klíče skončí (v čase = 9 sekund) a přehraje se po dobu 1 sekundy, končící v čase = 0:0:10.
<!-- This rectangle is animated with KeyTimes using TimeSpan values.
Goes to 100 in the first 3 seconds, 100 to 200 in
the next 5 seconds, 300 to 500 in the next second,
and 500 to 600 in the final second. -->
<Rectangle Width="50" Height="50" Fill="Blue">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform01" X="10" Y="30" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform01"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed as TimeSpan values
which are in the form of "hours:minutes:seconds". -->
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:9" />
<LinearDoubleKeyFrame Value="600" KeyTime="0:0:10" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Procentuální hodnoty
Procentuální hodnota určuje, že snímek klíče končí určitým procentem animace Duration. V jazyce XAML zadáte procentuální hodnotu jako číslo následované % symbolem. V kódu použijete metodu FromPercent a předáte jí Double indikující procento. Hodnota musí být větší nebo rovna 0 a menší nebo rovna 100 procentům. Následující příklad ukazuje animaci s dobou trvání 10 sekund a čtyřmi klíčovými snímky, jejichž časy klíčů jsou zadané v procentech.
První snímek klíče se animuje ze základní hodnoty na 100 za prvních 3 sekund, končící v čase = 0:0:3.
Druhý snímek klíče animuje z 100 na 200. Začne po skončení prvního klíče (v čase = 3 sekundy) a přehraje se po dobu 5 sekund, končící v čase = 0:0:8 (0,8 * 10 = 8).
Třetí snímek klíče animuje od 200 do 500. Spustí se, když skončí druhý rámec klíče (v čase = 8 sekund) a přehraje se po dobu 1 sekundy, končící v čase = 0:0:9 (0,9 * 10 = 9).
Čtvrtý snímek klíče animuje z 500 na 600. Začíná, když třetí snímek klíče končí (v čase = 9 sekund) a přehraje se po dobu 1 sekundy, končící v čase = 0:0:10 (1 * 10 = 10).
<!-- Identical animation behavior to the previous rectangle
but using percentage values for KeyTimes rather then TimeSpan. -->
<Rectangle Height="50" Width="50" Fill="Purple">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform02" X="10" Y="110" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform02"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed as Percentages. -->
<LinearDoubleKeyFrame Value="100" KeyTime="30%" />
<LinearDoubleKeyFrame Value="200" KeyTime="80%" />
<LinearDoubleKeyFrame Value="500" KeyTime="90%" />
<LinearDoubleKeyFrame Value="600" KeyTime="100%" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Zvláštní hodnota, Uniforma
Časování použijte Uniform , pokud chcete, aby každý snímek klíče trvalo stejnou dobu.
Doba Uniform klíče vydělí dostupnou dobu rovnoměrně počtem klíčových snímků, aby se určil koncový čas každého snímku klíče. Následující příklad ukazuje animaci s dobou trvání 10 sekund a čtyřmi klíčovými snímky, jejichž časy klíčů jsou zadány jako Uniform.
První snímek klíče se animuje ze základní hodnoty na 100 za prvních 2,5 sekund, končící časem = 0:0:2,5.
Druhý snímek klíče animuje z 100 na 200. Začíná po skončení prvního klíče (v čase = 2,5 sekundy) a přehraje se přibližně 2,5 sekundy, končící časem = 0:0:5.
Třetí snímek klíče animuje od 200 do 500. Spustí se, když skončí druhý rámec klíče (v čase = 5 sekund) a přehraje se po dobu 2,5 sekund, končící časem = 0:0:7.5.
Čtvrtý snímek klíče animuje z 500 na 600. Spustí se, když skončí druhý snímek klíče (v čase = 7,5 sekund) a přehraje se po dobu 2,5 sekund, končící na čas = 0:0:1.
<!-- This rectangle is animated with KeyTimes using Uniform values. -->
<Rectangle Height="50" Width="50" Fill="Red">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform03" X="10" Y="190" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform03"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed with values of Uniform.
When a key time is set to "Uniform" the total allotted
time of the animation is divided evenly between key frames.
In this example, the total duration of the animation is
ten seconds and there are four key frames each of which
are set to "Uniform", therefore, the duration of each key frame
is 3.3 seconds (10/3). -->
<LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="200" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="600" KeyTime="Uniform" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Speciální hodnota, Paced
Časování použijte Paced , když chcete animovat konstantní rychlostí.
Doba Paced klíče přiděluje dostupnou dobu podle délky jednotlivých klíčových snímků, aby se určila doba trvání každého rámce. Tím zajistíte, že rychlost nebo tempo animace zůstanou konstantní. Následující příklad ukazuje animaci s dobou trvání 10 sekund a třemi klíčovými snímky, jejichž časy klíčů jsou zadány jako Paced.
<!-- Using Paced Values. Rectangle moves between key frames at
uniform rate except for first key frame
because using a Paced value on the first KeyFrame in a
collection of frames gives a time of zero. -->
<Rectangle Height="50" Width="50" Fill="Orange">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform04" X="10" Y="270" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform04"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed with values of Paced.
Paced values are used when a constant rate is desired.
The time allocated to a key frame with a KeyTime of "Paced"
is determined by the time allocated to the other key
frames of the animation. This time is calculated to
attempt to give a "paced" or "constant velocity"
for the animation. -->
<LinearDoubleKeyFrame Value="100" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="200" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="600" KeyTime="Paced" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Všimněte si, že pokud je Paced čas klíče posledního rámce klíče nebo Uniform, jeho vyřešený čas klíče bude nastaven na 100 procent. Pokud je první snímek klíče v animaci s více snímky tempem, nastaví se jeho vyřešený čas klíče na hodnotu 0. (Pokud kolekce snímků klíčů obsahuje pouze jeden snímek klíče a jedná se o rámeček klíče s tempem, jeho vyřešený čas klíče bude nastaven na 100 procent.)
Různé klíčové snímky v rámci animace jednoho snímku klíče můžou používat různé typy času klíče.
Kombinování klíčových časů, klíčových snímků mimo pořadí
Klíčové snímky můžete použít s různými KeyTime typy hodnot ve stejné animaci. A i když se doporučuje přidat klíčové snímky v pořadí, ve kterém by se měly přehrávat, není to nutné. Systém animace a časování dokáže přeložit klíčové snímky mimo pořadí. Klíčové snímky s neplatnými časy klíčů se ignorují.
Následující seznam popisuje postup, podle kterého jsou klíčové časy vyřešeny pro klíčové snímky animace snímků klíčů.
Určete celkovou dobu interpolace animace, celkovou dobu, po které animace s klíčem trvá dokončení iterace dopředu.
K překladu PercentKeyTime hodnot použijte celkovou hodnotu času interpolace.
Vyřešte poslední snímek klíče, pokud jste ho v předchozích krocích ještě nevyřešili. KeyTime Pokud je Uniform poslední rámec klíče nebo Paced, bude jeho vyřešený čas roven celkovému času interpolace.
KeyTime Pokud je Paced první snímek klíče a tato animace má více než na klíčových snímcích, přeložte jeho KeyTime hodnotu na nulu. Pokud existuje jenom jeden snímek klíče a jeho KeyTime hodnota je Paced, je vyřešena na celkovou dobu interpolace, jak je popsáno v předchozím kroku.
Vyřešte zbývající UniformKeyTime hodnoty: každý z nich má stejný podíl dostupného času. Během tohoto procesu se nevyřešené PacedKeyTime hodnoty dočasně považují za UniformKeyTime hodnoty a získají dočasný vyřešený čas.
KeyTime Vyřešte hodnoty klíčových snímků s nezadanou dobou klíče pomocí klíčových snímků deklarovaných nejblíže k nim, které mají vyřešené KeyTime hodnoty.
Přeložte zbývající PacedKeyTime hodnoty. PacedKeyTimeKeyTime pomocí hodnot sousedních klíčových snímků určete jejich vyřešený čas. Cílem je zajistit, aby rychlost animace byla konstantní kolem vyřešeného času tohoto klíčového rámce.
Seřaďte klíčové rámce v pořadí podle vyřešeného času (primárního klíče) a pořadí deklarací (sekundární klíč), tj. použijte stabilní řazení na základě hodnot přeloženého rámce KeyTime klíče.
Viz také
.NET Desktop feedback
Váš názor
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat problémy z GitHub coby mechanismus zpětné vazby pro obsah a nahrazovat ho novým systémem zpětné vazby. Další informace naleznete v tématu: https://aka.ms/ContentUserFeedback.
Odeslat a zobrazit názory pro