Anahtar-Çerçeve Animasyonlara Genel Bakış
Bu konu başlığı altında, anahtar çerçeve animasyonları açıklanır. Anahtar çerçeve animasyonları, ikiden fazla hedef değer kullanarak animasyon uygulamanızı ve bir animasyonun ilişkilendirme yöntemini denetlemenizi sağlar.
Önkoşullar
Bu genel bakışı anlamak için Windows Presentation Foundation (WPF) animasyonlar ve zaman çizelgeleriyle ilgili bilgi sahibi olmanız gerekir. Animasyonlara giriş için bkz. animasyona genel bakış. Ayrıca, From/To/By animasyonlarını da öğrenmenize yardımcı olur. Daha fazla bilgi için bkz. From/To/By animasyonlara genel bakış.
Key-Frame animasyonu nedir?
Bir From/To/By animasyonu gibi, anahtar çerçeve animasyonu bir hedef özelliğin değerini hareketlendirir. Üzerinde hedef değerleri arasında bir geçiş oluşturur Duration . Ancak, From/To/By animasyonu iki değer arasında bir geçiş oluşturduğunda, tek bir anahtar çerçeve animasyonu herhangi bir sayıda hedef değer arasında geçiş oluşturabilir. From/To/By animasyonundan farklı olarak, anahtar çerçeve animasyonunda, hedef değerlerinin ayarlandığı,, veya ile özellikleri yoktur. Anahtar çerçeve animasyonunun hedef değerleri, anahtar çerçeveler nesneleri (Bu nedenle "anahtar çerçeve animasyonu") kullanılarak açıklanır. Animasyonun hedef değerlerini belirtmek için, anahtar çerçeve nesneleri oluşturur ve bunları animasyonun KeyFrames koleksiyonuna eklersiniz. Animasyon çalıştırıldığında, belirttiğiniz çerçeveler arasında geçiş yapar.
Birden çok hedef değeri desteklemeye ek olarak, bazı anahtar çerçeve yöntemleri birden çok enterpolasyon yöntemini de destekler. Bir animasyonun ilişkilendirme yöntemi, bir değerden sonrakine nasıl geçiş yapıldığını tanımlar. Üç tür enterpolasyonun vardır: ayrık, doğrusal ve eğri.
Anahtar çerçeve animasyonuyla animasyon uygulamak için aşağıdaki adımları tamamlayabilirsiniz.
Animasyonu bildirin ve Duration bunu, from/to/by animasyonunda olduğu gibi belirtin.
Her bir hedef değer için, uygun türün bir anahtar çerçevesini oluşturun, değerini ve değerini ayarlayın KeyTime ve animasyonun KeyFrames koleksiyonuna ekleyin.
Animasyonu, From/To/By animasyonuyla yaptığınız gibi bir özellik ile ilişkilendirin. Görsel taslak kullanarak bir özelliğe animasyon uygulama hakkında daha fazla bilgi için bkz. görsel taslaklara genel bakış.
Aşağıdaki örnek, bir DoubleAnimationUsingKeyFrames Rectangle öğesini dört farklı konuma hareketlendirmek için bir kullanır.
<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>
Bir From/To/By animasyonu gibi, bir anahtar çerçeve animasyonu bir özelliğe bir Storyboard biçimlendirme ve kod kullanılarak veya BeginAnimation koddaki yöntemi kullanılarak uygulanabilir. Anahtar çerçeve animasyonunu oluşturup bir AnimationClock veya daha fazla özelliğe uygulamak için de kullanabilirsiniz. Animasyonları uygulamaya yönelik farklı yöntemler hakkında daha fazla bilgi için bkz. animasyon tekniklerine genel bakış.
Key-Frame animasyon türleri
Animasyonlar özellik değerleri oluşturduğundan, farklı özellik türleri için farklı animasyon türleri vardır. Double(Örneğin, bir öğenin özelliği) alan bir özelliğe animasyon uygulamak için Width , değerler üreten bir animasyon kullanırsınız Double . Bir özelliğine sahip bir özelliği hareketlendirmek için Point , değerler üreten bir animasyon kullanır Point ve bu şekilde devam eder.
Anahtar çerçeve animasyon sınıfları System.Windows.Media.Animation ad alanına aittir ve aşağıdaki adlandırma kuralına bağlı olarak uyar:
<Type> AnimationUsingKeyFrames
Burada, <Type> sınıfın canlandırkaydedildiği değerin türüdür.
WPF Aşağıdaki anahtar çerçeve animasyon sınıflarını sağlar.
Hedef değerler (anahtar çerçeveler) ve anahtar zamanları
Farklı özellik türlerini hareketlendirmek için farklı türlerde anahtar-çerçeve animasyonları olduğu gibi, farklı türlerde anahtar çerçeve nesneleri de vardır: her bir animasyon ve enterpolasyon yöntemi türü için bir tane. Anahtar çerçeve türleri aşağıdaki adlandırma kuralına uyar:
<InterpolationMethod><Type> KeyFrame
, <InterpolationMethod> Anahtar çerçevesinin kullandığı enterpolasyon yöntemidir ve <Type> sınıfın canlandırır değer türüdür. Üç ilişkilendirme yöntemini destekleyen bir anahtar çerçeve animasyonunu kullanabileceğiniz üç anahtar çerçeve türüne sahip olacaktır. Örneğin, ile üç anahtar çerçeve türü kullanabilirsiniz DoubleAnimationUsingKeyFrames : DiscreteDoubleKeyFrame , LinearDoubleKeyFrame , ve SplineDoubleKeyFrame . (Enterpolasyon yöntemleri, sonraki bölümde ayrıntılı olarak açıklanmıştır.)
Anahtar çerçevesinin birincil amacı, KeyTime ve ' i belirtmektir Value . Her anahtar çerçeve türü bu iki özelliği sağlar.
ValueÖzelliği, bu anahtar çerçevesinin hedef değerini belirtir.
KeyTimeÖzelliği, bir anahtar çerçevesinin ne zaman (animasyon içinde Duration ) Value ulaşılması gerektiğini belirtir.
Anahtar çerçeve animasyonu başladığında, kendi anahtar çerçeveleri üzerinde özellikleri tarafından tanımlanan sırada yinelenir KeyTime .
0 zamanında anahtar çerçevesi yoksa, animasyon hedef özelliğin geçerli değeri ile ilk anahtar çerçevesinin arasında bir geçiş oluşturur Value ; Aksi takdirde, animasyonun çıkış değeri ilk anahtar çerçevesinin değeri olur.
Animasyon, Value ikinci anahtar çerçevesi tarafından belirtilen ilişkilendirme yöntemi kullanılarak birinci ve ikinci anahtar çerçevelerinin arasında bir geçiş oluşturur. Geçiş ilk anahtar çerçevesinin başlangıcında başlar KeyTime ve ikinci anahtar çerçevesine ulaşıldığında sona erer KeyTime .
Animasyon devam eder, sonraki her anahtar çerçevesi ve onun önceki anahtar çerçevesi arasında geçişler oluşturur.
Son olarak, animasyon, anahtar çerçevesinin değerine eşit veya daha küçük olan en büyük anahtar zamanına sahip olacak şekilde geçiş yapar Duration .
Animasyon varsa Duration Automatic veya Duration en son anahtar çerçevesinin zamanına eşitse animasyon sonlanır. Aksi takdirde, animasyon Duration son anahtar çerçevesinin anahtar süresinden daha büyükse animasyon, anahtar çerçevesinin sonuna ulaşana kadar ana kare değerini tutar Duration . Tüm animasyonlarda olduğu gibi, anahtar çerçeve animasyonu onun FillBehavior etkin döneminin sonuna ulaştığında son değeri içerip içermediğini anlamak için özelliğini kullanır. Daha fazla bilgi için bkz. Zamanlama Davranışlarına Genel Bakış.
Aşağıdaki örnek DoubleAnimationUsingKeyFrames , ve özelliklerinin nasıl çalıştığını göstermek için önceki örnekte tanımlanan nesnesini kullanır Value KeyTime .
İlk anahtar çerçeve, animasyonun çıkış değerini hemen 0 olarak ayarlar.
İkinci anahtar çerçeve 0 ile 350 arasında hareketlenir. İlk anahtar çerçevesi bittikten sonra (0 saniye) başlar ve 2 saniye boyunca oynatılır, bitiş zamanı = 0:0:2.
Üçüncü anahtar çerçeve 350 ' den 50 ' e hareketlendirir. İkinci anahtar çerçevesi sona erdiğinde (saat = 2 saniye) başlar ve 5 saniye boyunca oynatılır, bitiş zamanı = 0:0:7.
Dördüncü anahtar çerçeve 50 ' den 200 ' e hareketlendirir. Bu, üçüncü anahtar çerçevesi sona erdiğinde (= 7 saniye) başlar ve 1 saniye boyunca oynatılır, bitiş zamanı = 0:0:8.
DurationAnimasyonun özelliği 10 saniye olarak ayarlandığı için animasyon, son değerini iki saniye boyunca, süre sonu = 0:0:10 olarak tutar.
<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>
Enterpolasyon yöntemleri
Önceki bölümlerde, bazı anahtar çerçeve animasyonları birden çok enterpolasyon yöntemini desteklemişti. Bir animasyonun ilişkilendirme, animasyonun süresi boyunca değerler arasında nasıl geçiş yapıldığını açıklar. Animasyonunuza hangi anahtar çerçeve türünü kullanacağınızı seçerek, bu anahtar çerçeve segmenti için enterpolasyon yöntemini tanımlayabilirsiniz. Üç farklı ilişkilendirme yöntemi türü vardır: doğrusal, ayrık ve eğri.
Doğrusal Ilişkilendirme
Doğrusal ilişkilendirme sayesinde animasyon, segment süresinin sabit bir oranıyla ilerler. Örneğin, bir anahtar çerçeve segmenti 5 saniyelik bir süre boyunca 0 ' dan 10 ' a geçiş yaptığında animasyon aşağıdaki değerleri belirtilen saatlerde çıkış yapar:
| Saat | Çıkış değeri |
|---|---|
| 0 | 0 |
| 1 | 2 |
| 2 | 4 |
| 3 | 6 |
| 4 | 8 |
| 4,25 | 8.5 |
| 4,5 | 9 |
| 5 | 10 |
Ayrık Ilişkilendirme
Ayrık ilişkilendirme sayesinde animasyon işlevi bir değerden sonrakine ilişkilendirme olmadan atlar. Anahtar çerçeve segmenti 5 saniyelik bir süre boyunca 0 ile 10 arasında geçiş yaptığında animasyon, belirtilen saatlerde aşağıdaki değerleri çıktı olarak yapar:
| Saat | Çıkış değeri |
|---|---|
| 0 | 0 |
| 1 | 0 |
| 2 | 0 |
| 3 | 0 |
| 4 | 0 |
| 4,25 | 0 |
| 4,5 | 0 |
| 5 | 10 |
Animasyonun, kesim süresinin sonuna kadar çıkış değerini değiştirmediğine dikkat edin.
Eğri ilişkilendirme daha karmaşıktır. Sonraki bölümde açıklanmaktadır.
Eğri Ilişkilendirme
Eğri ilişkilendirme, daha gerçekçi zamanlama etkileri elde etmek için kullanılabilir. Animasyonlar çoğu zaman gerçek dünyada oluşan etkileri taklit etmek için kullanıldığından, geliştiriciler nesnelerin hızlandırılmasını ve yavaşlamasını ve zamanlama segmentlerinin düzenlenmesini kapatabilir. Eğri anahtar çerçeveleri, eğri ilişkilendirmede animasyon uygulamanızı sağlar. Diğer anahtar çerçevelerle, Value ve belirtirsiniz KeyTime . Eğri anahtar çerçevesi ile de belirtirsiniz KeySpline . Aşağıdaki örnek, için tek bir eğri anahtar çerçevesini gösterir DoubleAnimationUsingKeyFrames . Özelliğine dikkat edin KeySpline ; Bu, eğri anahtar çerçevesini diğer anahtar çerçeveler türlerinden farklı hale getirir.
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Üçüncü dereceden Bezier eğrisi bir başlangıç noktası, bitiş noktası ve iki denetim noktası tarafından tanımlanır. KeySplineEğri anahtar çerçevesinin özelliği, (0, 0) ile (1, 1) arasında genişleyen bir Bezier eğrisinin iki denetim noktasını tanımlar. İlk denetim noktası, Bezier eğrisinin ilk yarısının eğri faktörünü denetler ve ikinci denetim noktası Bezier segmentinin ikinci yarısının eğri faktörünü denetler. Elde edilen eğri, bu eğri anahtar çerçevesi için değişiklik oranını açıklar. Eğriyi steeper, tuş çerçevesinin değeri değişir. Eğri düzlekçe, anahtar çerçeve, değerlerini daha yavaş değiştiriyor.
Azalan KeySpline su veya sıçrama topları gibi fiziksel trajectories benzetimi yapmak veya hareket animasyonlarında başka "kolaylıklar" ve "hızlılıklar" efektlerini uygulamak için kullanabilirsiniz. Arka planda belirme veya denetim düğmesi yeniden bağlantılı gibi kullanıcı etkileşimi efektleri için, bir animasyon için değişiklik oranını belirli bir şekilde hızlandırmak veya yavaşlatmak üzere eğri ilişkilendirme uygulayabilirsiniz.
Aşağıdaki örnek, KeySpline aşağıdaki Bezier eğrisini oluşturan 0, 1 1, 0 ' ı belirtir.

Denetim noktaları olan (0,0, 1,0) ve (1,0, 0,0) anahtar eğrisi
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Bu anahtar çerçeve başladığında hızlı bir şekilde hareketlenir, yavaşlar ve sonra sona ermeden önce hızlanır.
Aşağıdaki örnek, KeySpline aşağıdaki Bezier eğrisini oluşturan 0,5, 0,25 0.75, 1.0 ' ı belirtir.

Denetim noktaları olan (0,25, 0,5) ve (0,75, 1,0) anahtar eğrisi
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
Bezier eğrisinin eğriliği çok az değiştiğinden, bu anahtar çerçeve neredeyse sabit bir hızda canlandırır; Son derece doğru yavaşlar.
Aşağıdaki örnek, DoubleAnimationUsingKeyFrames dikdörtgenin konumunu hareketlendirmek için bir kullanır. DoubleAnimationUsingKeyFrames SplineDoubleKeyFrame Nesneleri kullandığından, her anahtar çerçeve değeri arasındaki geçiş, eğri ilişkilendirme kullanır.
<!-- 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>
Eğri ilişkilendirme anlaşılması zor olabilir; farklı ayarlarla denemek yardımcı olabilir. Anahtar eğri animasyon örneği , anahtar eğri değerlerini değiştirmenizi ve bir animasyon üzerinde sahip olduğu sonucu görmenizi sağlar.
Enterpolasyon yöntemlerini birleştirme
Tek bir anahtar çerçeve animasyonunda, farklı enterpolasyon türlerine sahip anahtar çerçeveler kullanabilirsiniz. Farklı enterpolasyonlarla iki anahtar çerçeve animasyonu birbirini izliyorsa, ikinci anahtar çerçevesinin enterpolasyon yöntemi ilk değerden ikincisine geçiş oluşturmak için kullanılır.
Aşağıdaki örnekte, DoubleAnimationUsingKeyFrames Doğrusal, eğri ve ayrık ilişkilendirme kullanan bir oluşturulur.
<!-- 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>
Süre ve anahtar zamanları hakkında daha fazla bilgi
Diğer animasyonlarda olduğu gibi, anahtar çerçeve animasyonları özelliği de vardır Duration . Animasyonun Duration ne olduğuna ek olarak, bu sürenin hangi kısmının her anahtar çerçevesine verildiğini belirtmeniz gerekir. Bunu KeyTime , animasyonun her bir anahtar çerçevesi için bir açıklayarak yapabilirsiniz. Her anahtar çerçeve KeyTime , anahtar çerçevesinin ne zaman sona ereceğini belirtir.
KeyTimeÖzelliği, anahtar saatinin ne kadar süreyle çalındığını belirtmez. Anahtar çerçevesinin oynadığı süre, anahtar çerçevesinin ne zaman sona ereceğini, önceki anahtar çerçevesinin ne zaman bittiğini ve animasyonun süresini belirler. Anahtar zamanları bir zaman değeri, bir yüzde veya özel değerler olarak belirtilebilir Uniform Paced .
Aşağıdaki listede, anahtar sürelerini belirtmenin farklı yolları açıklanmaktadır.
TimeSpan değerleri
TimeSpanBir belirtmek için değerler kullanabilirsiniz KeyTime . Değer 0 ' dan büyük veya buna eşit ve animasyon süresinden küçük ya da buna eşit olmalıdır. Aşağıdaki örnekte, süresi 10 saniyelik ve anahtar süreleri zaman değeri olarak belirtilen dört anahtar çerçevesine sahip bir animasyon gösterilmektedir.
İlk anahtar çerçevesi, ilk 3 saniye boyunca temel değerden 100 'e hareketlendirir, zaman içinde sona eriyor = 0:0:03.
İkinci anahtar çerçeve 100 ' den 200 ' e hareketlendirir. İlk anahtar çerçevesi bittikten sonra başlar (3 saniye) ve 5 saniye boyunca oynatılır, bitiş zamanı = 0:0:8.
Üçüncü anahtar çerçeve 200 ' den 500 ' e hareketlendirir. İkinci anahtar çerçevesi sona erdiğinde (8 saniye) başlar ve 1 saniye boyunca oynatılır, bitiş zamanı = 0:0:9.
Dördüncü anahtar çerçeve 500 ' den 600 ' e hareketlendirir. Üçüncü anahtar çerçevesi sona erdiğinde (saat = 9 saniye) başlar ve 1 saniye boyunca oynatılır, bitiş zamanı = 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>
Yüzde değerleri
Yüzde değeri, anahtar çerçevesinin animasyonun bazı yüzdesinde bittiğini belirtir Duration . İçinde XAML , yüzde değerini, sembolün ardından bir sayı olarak belirtirsiniz % . Kodda, FromPercent yöntemini kullanırsınız ve yüzdeyi belirten bir öğesine geçitirsiniz Double . Değer 0 ' dan büyük veya buna eşit ve yüzde 100 ' den küçük veya buna eşit olmalıdır. Aşağıdaki örnekte, süresi 10 saniyelik ve anahtar süreleri yüzde olarak belirtilen dört anahtar çerçevesine sahip bir animasyon gösterilmektedir.
İlk anahtar çerçevesi, ilk 3 saniye boyunca temel değerden 100 'e hareketlendirir, zaman içinde sona eriyor = 0:0:3.
İkinci anahtar çerçeve 100 ' den 200 ' e hareketlendirir. İlk anahtar kare bittikten (3 saniye) sonra başlar ve 5 saniye boyunca oynatılır, bitiş zamanı = 0:0:8 (0,8 * 10 = 8).
Üçüncü anahtar çerçeve 200 ' den 500 ' e hareketlendirir. İkinci anahtar çerçevesi sona erdiğinde (8 saniye) başlar ve 1 saniye boyunca oynatılır, bitiş zamanı = 0:0:9 (0,9 * 10 = 9).
Dördüncü anahtar çerçeve 500 ' den 600 ' e hareketlendirir. Üçüncü anahtar çerçevesi sona erdiğinde (saat = 9 saniye) başlar ve 1 saniye boyunca oynatılır, bitiş zamanı = 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>
Özel değer, Tekdüzen
UniformHer anahtar çerçevesinin aynı miktarda sürme süresini kullanmak istediğinizde, zamanlamayı kullanın.
Önemli bir Uniform zaman, her anahtar çerçevesinin bitiş saatini belirlemekte kullanılabilecek süreyi anahtar çerçeve sayısına eşit olarak böler. Aşağıdaki örnekte, süresi 10 saniyelik ve anahtar süreleri olarak belirtilen dört anahtar çerçevesine sahip bir animasyon gösterilmektedir Uniform .
İlk anahtar çerçeve, temel değerden 100 ' e kadar ilk 2,5 saniye boyunca hareketlendirir, bitiş zamanı = 0:0: 2.5.
İkinci anahtar çerçeve 100 ' den 200 ' e hareketlendirir. İlk anahtar çerçevesi bittikten sonra başlar (saat = 2,5 saniye) ve yaklaşık 2,5 saniye boyunca oynatılır ve bitiş zamanı = 0:0:5.
Üçüncü anahtar çerçeve 200 ' den 500 ' e hareketlendirir. İkinci anahtar çerçevesi sona erdiğinde (5 saniye süreyle) başlar ve 2,5 saniye boyunca oynatılır, süre sonu = 0:0: 7,5.
Dördüncü anahtar çerçeve 500 ' den 600 ' e hareketlendirir. İkinci anahtar çerçevesi sona erdiğinde (Şu an = 7,5 saniye) başlar ve 2,5 saniye boyunca oynatılır, bitiş zamanı = 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>
Özel değer, Ilerme
PacedSabit bir hızda animasyon uygulamak istediğiniz zaman zamanlamayı kullanın.
PacedAnahtar zaman, her bir karenin süresini belirlemekte her bir anahtar kare uzunluğuna göre kullanılabilir süreyi ayırır. Bu işlem, animasyonun hız veya hızlarının sabit kaldığı davranışı sağlar. Aşağıdaki örnekte, süresi 10 saniyelik ve anahtar süreleri olarak belirtilen üç anahtar çerçevesine sahip bir animasyon gösterilmektedir 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>
Son anahtar çerçevesinin anahtar saati Paced veya ise Uniform , çözümlenmiş anahtar saatinin yüzde 100 olarak ayarlanacağını unutmayın. Bir MultiFrame animasyonunda ilk anahtar çerçeve ilerlebiliyorsa, çözümlenmiş anahtar süresi 0 olarak ayarlanır. (Anahtar çerçeve koleksiyonu yalnızca tek bir anahtar çerçeve içeriyorsa ve bu bir anahtar çerçevesi ise, çözümlenmiş anahtar süresi yüzde 100 olarak ayarlanır.)
Tek bir anahtar çerçeve animasyonunda bulunan farklı anahtar çerçeveler, farklı anahtar zaman türleri kullanabilir.
Anahtar zamanlarını birleştirme, sıra dışı anahtar çerçeveleri
KeyTimeAynı animasyonda farklı değer türleriyle anahtar çerçeveler kullanabilirsiniz. Ayrıca, anahtar çerçevelerini oynamaları gereken sırayla eklemeniz önerilir, ancak bu gerekli değildir. Animasyon ve zamanlama sistemi, sıra dışı anahtar çerçevelerini çözebilme özelliğine sahiptir. Geçersiz anahtar sürelerine sahip anahtar çerçeveler yok sayılır.
Aşağıdaki listede, anahtar-çerçeve animasyonunda anahtar çerçeveler için anahtar sürelerinin çözümlenme yordamı açıklanmaktadır.
Animasyonun toplam ilişkilendirme süresini, anahtar çerçeve animasyonunda bir ileriye doğru yinelemeyi tamamlaması için gereken toplam süreyi belirleme.
Animasyon Duration Automatic veya değilse Forever , toplam ilişkilendirme süresi animasyon Duration özelliğinin değeridir.
Aksi takdirde, toplam ilişkilendirme süresi, varsa TimeSpan KeyTime anahtar çerçeveleri arasında belirtilen en büyük değerdir.
Aksi takdirde, toplam ilişkilendirme süresi 1 saniyedir.
Değerleri çözümlemek için toplam ilişkilendirme süresi değerini kullanın Percent KeyTime .
Önceki adımlarda zaten çözümlenmediyse, son anahtar çerçevesini çözümleyin. KeyTimeSon anahtar çerçevesinin bir Uniform veya ise Paced , çözümlenme süresi toplam ilişkilendirme zamanına eşit olur.
KeyTimeİlk anahtar çerçevesinin ise Paced ve bu animasyonun en fazla anahtar çerçevesi varsa, KeyTime değerini sıfır olarak çözün; yalnızca bir anahtar çerçevesi varsa ve KeyTime değeri ise, Paced önceki adımda açıklandığı gibi toplam ilişkilendirme zamanına çözümlenir.
Kalan Uniform KeyTime değerleri çözümle: her biri, kullanılabilir sürenin eşit bir payı olarak verilirler. Bu işlem sırasında çözümlenmemiş Paced KeyTime değerler geçici olarak değer olarak kabul edilir Uniform KeyTime ve geçici bir çözümlenmiş zaman alır.
, KeyTime Çözümlenmiş değerleri olan en yakın şekilde tanımlanmış olan anahtar çerçevelerini kullanarak, belirtilmeyen anahtar sürelerine sahip anahtar çerçevelerinin değerlerini çözümleyin KeyTime .
Kalan Paced KeyTime değerleri çözümleyin. PacedKeyTime KeyTime kendi çözümlenmiş süresini öğrenmek için komşu anahtar çerçevelerinin değerlerini kullanın. Amaç, animasyon hızınızın bu anahtar çerçevesinin çözümlenme süresi etrafında sabit olduğundan emin olmaktır.
Önemli çerçeveleri çözümlenme zamanı (birincil anahtar) ve bildirim sırası (ikincil anahtar) sırasına göre sıralayın, yani çözümlenen anahtar çerçevesi değerlerini temel alan kararlı bir sıralama kullanın KeyTime .