Poznámka:
Přístup k této stránce vyžaduje autorizaci. Můžete se zkusit přihlásit nebo změnit adresáře.
Přístup k této stránce vyžaduje autorizaci. Můžete zkusit změnit adresáře.
Toto téma vás seznámí s klíčovými snímkovými animacemi. Animace snímků klíčů umožňují animovat pomocí více než dvou cílových hodnot a řídit interpolační metodu animace.
Požadavky
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 Key-Frame?
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 klíčového snímku žádné vlastnosti Od, Do ani Podle, s nimiž by bylo možné nastavit její cílové hodnoty. Cílové hodnoty animace klíčových snímků jsou popsány pomocí objektů klíčových snímků, což vysvětluje výraz "animace klíčových snímků". Chcete-li zadat cílové hodnoty animace, vytvoříte objekty klíčového snímku a přidáte je do kolekce animace KeyFrames. Když se animace spustí, přejde mezi zadanými snímky.
Kromě podpory více cílových hodnot některé metody klíčových snímků dokonce podporují i více interpolací. Metoda interpolace animace definuje, jak přechází z jedné hodnoty na další. Existují tři typy interpolací: diskrétní, lineární a splined.
Chcete-li animovat pomocí klíčové snímkové animace, proveďte následující kroky.
Deklarujte animaci a určete její Duration, podobně jako byste to udělali pro animaci 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 při použití animace 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 u animace From/To/By lze animaci s klíčovým snímkem použít pro vlastnost pomocí Storyboard ve značkách v kódu nebo pomocí BeginAnimation metody v kódu. Můžete také použít animaci klíčových snímků k vytvoření AnimationClock a použít ji 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í Key-Frame
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 klíčové časy
Stejně jako existují různé typy klíčových snímků pro animaci různých typů vlastností, existují také různé typy objektů klíčových snímků: jeden pro každý typ animované hodnoty a podporovanou interpolační metodu. 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ými snímky, která podporuje všechny tři metody interpolace, bude mít tři typy klíčových snímků, 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 klíčový snímek.
Vlastnost KeyTime určuje, kdy (v rámci animace Duration) je dosažen klíčový snímek Value.
Když se spustí animace klíčových snímků, prochází jejími 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 klíčovým snímkem. Přechod začíná na prvním klíčovém snímku KeyTime a končí, když je dosažen druhý klíčový snímek KeyTime.
Animace pokračuje a vytváří přechody mezi každým následným klíčovým snímkem a předchozím klíčovým snímkem.
Nakonec animace přejde na hodnotu klíčového snímku s největším klíčovým časem, který je roven nebo menší než Duration.
Pokud se animace Duration rovná Automatic nebo její Duration je rovna času posledního klíčového snímku, animace skončí. V opačném případě, pokud je Duration animace větší než čas posledního klíčového snímku, animace udržuje hodnotu klíčového snímku, dokud nenastane konec jeho Duration. Podobně jako u všech animací, klíčová animace používá svou FillBehavior vlastnost k určení, zda si ponechá konečnou hodnotu, když dosáhne konce svého 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ý klíčový snímek se animuje od 0 do 350. Spustí se po skončení prvního klíčového snímku (v čase = 0 sekund) a přehraje se po dobu 2 sekund a končí v čase 0:0:2.
Třetí klíčový snímek se animuje z 350 na 50. Spustí se, když skončí druhý klíčový snímek (v čase = 2 sekundy) a přehraje se po dobu 5 sekund, končícím v čase = 00:00:07.
Čtvrtý klíčový snímek se animuje od 50 do 200. Spustí se, když třetí klíčový snímek skončí (v čase = 7 sekund) a přehraje se po dobu 1 sekundy, a končí 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 klíčových snímků 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 klíčového snímku, který použijete s animací, můžete definovat interpolační metodu pro daný segment. 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.
Splinová interpolace je složitější. Popisuje se v další části.
Spline interpolace
Splinová interpolace lze použít k dosažení realističtějších časových 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 typu spline umožňují animovat se splinovanou interpolací. U jiných klíčových snímků zadáte Value a KeyTime. S klíčovým rámečkem s křivkou zadáte také KeySpline. Následující příklad ukazuje snímek klíčového prvku spline pro DoubleAnimationUsingKeyFrames. Všimněte si vlastnosti KeySpline; to je to, co odlišuje rámeček klíče s křivkou 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 klíčového rámeček spline definuje dva řídicí body Bézierovy křivky, 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íčový snímek změní své hodnoty. Jakmile se křivka zploští, klíčový snímek mění svoje hodnoty pomaleji.
Můžete použít KeySpline k simulaci fyzických trajektorií, jako je padající voda nebo odrážející se míče, nebo použít další efekty jako "zrychlení" a "zpomalování" pro pohybové animace. U efektů interakce uživatelů, jako je plynulé přecházení pozadí nebo odrazy řídicích tlačítek, můžete použít interpolaci se spline, abyste urychlili nebo zpomalili tempo změny animace specifickým způsobem.
Následující příklad určuje KeySpline 0,1 1,0, který vytvoří následující Bezier křivku.
Spline s klíčovými 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 klíčový snímek se rychle animuje, když začíná, poté zpomalí a před svým koncem se opět zrychlí.
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á křivka 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í Bézierovy křivky se mění jen velmi málo, animace tohoto klíčového snímku probíhá téměř konstantní rychlostí; ke konci se mírně zpomaluje.
Následující příklad používá DoubleAnimationUsingKeyFrames k animaci pozice obdélníku. Vzhledem k tomu, že DoubleAnimationUsingKeyFrames používá objekty SplineDoubleKeyFrame, používá přechod mezi jednotlivými hodnotami klíčových snímků interpolaci pomocí splineů.
<!-- 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>
Splineová interpolace může být obtížné pochopit, experimentování s různými nastaveními vám může pomoci. Ukázka animace klíčové spline umožňuje změnit hodnoty klíčové spline a vidět, jaký vliv má na animaci.
Kombinování interpolačních metod
V jedné animaci s klíčovými snímky můžete použít klíčové snímky s různými typy interpolace. 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í, spline 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 klíčových časech
Podobně jako jiné animace mají klíčové snímky vlastnost Duration. Kromě zadání animace Duration je nutné zadat, jaká část doby trvání je přidělena každému klíčovému snímku. Tak učiníte popisem KeyTime pro každý klíčový snímek animace. Každý klíčový snímek KeyTime určuje, kdy tento klíčový snímek končí.
Vlastnost KeyTime neurčuje, jak dlouho trvá čas klíče. Doba, po kterou se přehrává klíčový snímek, je určena okamžikem, kdy klíčový snímek končí, okamžikem, kdy skončil předchozí klíčový snímek, a délkou 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 hodnoty TimeSpan 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ý klíčový snímek je animován ze 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í klíčový snímek se 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í klíčový snímek skončí (v čase = 9 sekund) a přehraje se po dobu 1 sekundy, končí v čase 00:00: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
Procentní hodnota určuje, že klíčový snímek končí na určitém procentu 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í klíčový snímek se animuje ze základní hodnoty na 100 během prvních 3 sekund, který končí v čase 0:0:3.
Druhý klíčový snímek je animován ze 100 na 200. Začne po skončení prvního klíčového snímku (v čase = 3 sekundy) a přehraje se po dobu 5 sekund, končící v čase = 0:0:8 (protože 0,8 * 10 = 8).
Třetí klíčový snímek se 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í klíčový snímek končí (v čase = 9 sekund) a přehrává se po dobu 1 sekundy, a končí v čase = 0:0: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.
Čas Uniform klíče rozdělí dostupnou dobu rovnoměrně podle počtu klíčových snímků, aby bylo možné určit koncový čas každého klíčového snímku. 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 během prvních 2,5 sekund, končí v čase 0:0:2,5.
Druhý klíčový snímek je animován ze 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í klíčový snímek se animuje od 200 do 500. Spustí se, když skončí druhý klíčový snímek (v čase = 5 sekund) a trvá 2,5 sekundy, končí v čase 0:0:7,5.
Čtvrtý snímek klíče animuje z 500 na 600. Spustí se, když skončí druhý klíčový snímek (v čase = 7,5 sekundy) a přehraje se po dobu 2,5 sekundy, končící na přesném čase = 0:0:10.
<!-- 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 klíčového snímku můžou používat různé typy klíčových časů.
Kombinování klíčových časových úseků, out-Of-Order klíčových snímků
Ve stejné animaci můžete použít klíčové snímky s různými typy hodnot KeyTime. 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í je schopný vyřešit klíčové snímky ve špatném pořadí. Klíčové snímky s neplatnými klíčovými časy se ignorují.
Následující seznam popisuje postup, podle kterého jsou klíčové časy stanoveny pro animaci s klíčovými snímky.
Určete celkovou dobu interpolace animace, což je doba, kterou zabere animace klíčových snímků, aby provedla jeden cyklus vpřed.
K překladu PercentKeyTime hodnot použijte celkovou hodnotu času interpolace.
Vyřešte poslední klíčový snímek, 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.
Pokud je KeyTime první snímek klíče a tato animace má více než jeden klíčový snímek, nastavte jeho Paced hodnotu na nulu. Pokud existuje jenom jeden snímek klíče a jeho KeyTime hodnota je KeyTime, je nastavena na celkovou dobu interpolace, jak je popsáno ve výše uvedené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. Paced KeyTime KeyTime 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é
- KeyTime
- KeySpline
- Timeline
- Ukázka animace s křivkou klíče
- Ukázka animace klíčového rámce
- Přehled animací
- Přehled scénářů
- Key-Frame Témata s návody
- Přehled časovacího chování
Spolupracujte s námi na GitHubu
Zdroj tohoto obsahu najdete na GitHubu, kde můžete také vytvářet a kontrolovat problémy a žádosti o přijetí změn. Další informace najdete v našem průvodci pro přispěvatele.
.NET Desktop feedback