Anahtar-Çerçeve Animasyonlara Genel Bakış
Bu konu başlığında anahtar çerçeve animasyonları tanıtılmaktadır. Anahtar kare animasyonları, ikiden fazla hedef değer kullanarak animasyon oluşturmanızı ve bir animasyonu ilişkilendirme yöntemini denetlemenizi sağlar.
Ön koşullar
Bu genel bakışı anlamak için Windows Presentation Foundation (WPF) animasyonlarını ve zaman çizelgelerini biliyor olmanız gerekir. Animasyonlara giriş için bkz. Animasyona Genel Bakış. Ayrıca Başlangıç/Başlangıç animasyonlarını tanımaya da yardımcı olur. Daha fazla bilgi için bkz. From/To/By Animasyonlarına Genel Bakış.
Anahtar Çerçeve Animasyonu nedir?
Başlangıç/Bitiş/Ölçütü animasyonu gibi, bir anahtar çerçevesi animasyonu da hedef özelliğin değerine animasyon ekler. üzerinde hedef değerleri Durationarasında bir geçiş oluşturur. Ancak, From/To/By animasyonu iki değer arasında bir geçiş oluştururken, tek bir anahtar çerçeve animasyonu herhangi bir sayıda hedef değer arasında geçişler oluşturabilir. Başlangıç/Hedef/Göre animasyonundan farklı olarak, anahtar çerçeve animasyonu hedef değerlerinin ayarlanacağı Kimden, Kime veya Ölçütü özelliklerine sahip değildir. Anahtar çerçeve animasyonunun hedef değerleri, anahtar çerçeve nesneleri (dolayısıyla "anahtar kare animasyonu" terimi) kullanılarak açıklanmıştır. Animasyonların hedef değerlerini belirtmek için anahtar çerçeve nesneleri oluşturur ve bunları animasyon KeyFrames koleksiyonuna eklersiniz. Animasyon çalıştırıldığında, belirttiğiniz çerçeveler arasında geçişler olur.
Birden çok hedef değeri desteklemeye ek olarak, bazı anahtar çerçevesi yöntemleri birden çok ilişkilendirme yöntemini bile destekler. Animasyonların ilişkilendirme yöntemi, bir değerden diğerine nasıl geçiş yapılacağını tanımlar. Üç tür ilişkilendirme vardır: ayrık, doğrusal ve splined.
Bir anahtar kare animasyonuyla animasyon eklemek için aşağıdaki adımları tamamlarsınız.
Animasyonu bildirin ve Durationbir animasyondan/animasyona göre yaptığınız gibi belirtin.
Her hedef değer için uygun türde bir anahtar çerçeve oluşturun, değerini ve KeyTimedeğerini ayarlayın ve animasyonun KeyFrames koleksiyonuna ekleyin.
Animasyonu bir özellik ile ilişkilendirin. Aynı Başlangıç/Son animasyonuyla yaptığınız gibi. 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 öğeye dört farklı konuma animasyon eklemek için bir Rectangle 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>
From/To/By animasyonu gibi, bir anahtar çerçevesi animasyonu da işaretleme ve kod içinde kullanılarak Storyboard veya kodda yöntemi kullanılarak BeginAnimation bir özelliğe uygulanabilir. Ayrıca, bir anahtar çerçevesi animasyonu kullanarak da oluşturabilir ve bunu bir AnimationClock veya daha fazla özelliğe uygulayabilirsiniz. Animasyon uygulamak için kullanılan farklı yöntemler hakkında daha fazla bilgi için bkz . Özellik Animasyon Tekniklerine Genel Bakış.
Anahtar Çerçevesi Animasyon Türleri
Animasyonlar özellik değerleri oluşturduğundan, farklı özellik türleri için farklı animasyon türleri vardır. Alan bir özelliğe Double animasyon eklemek için (örneğin, bir öğenin Width özelliği), değerler üreten Double bir animasyon kullanırsınız. alan bir özelliğe Pointanimasyon eklemek için değer üreten Point bir animasyon kullanırsınız.
Anahtar çerçeve animasyon sınıfları ad alanına System.Windows.Media.Animation aittir ve aşağıdaki adlandırma kuralına uyar:
<Türü>AnimationUsingKeyFrames
Burada <Tür> , sınıfın animasyonunu yaptığı değer türüdür.
WPF aşağıdaki anahtar çerçevesi animasyon sınıflarını sağlar.
Hedef Değerler (anahtar çerçeveler) ve Anahtar Süreleri
Farklı özellik türlerini animasyonlandırmak için farklı türlerde anahtar çerçeve animasyonları olduğu gibi, farklı türlerde anahtar çerçeve nesneleri de vardır: her tür için bir tane animasyonlu değer ve desteklenen ilişkilendirme yöntemi. Anahtar çerçeve türleri aşağıdaki adlandırma kuralına uyar:
<InterpolationMethod><Türü>KeyFrame
Burada <InterpolationMethod> , anahtar çerçevenin kullandığı ilişkilendirme yöntemidir ve <Tür> , sınıfın animasyon olarak kullandığı değer türüdür. Üç ilişkilendirme yönteminin tümünü destekleyen bir anahtar çerçevesi animasyonu, kullanabileceğiniz üç anahtar çerçeve türüne sahip olur. Örneğin, bir ile DoubleAnimationUsingKeyFramesüç anahtar çerçeve türü kullanabilirsiniz: DiscreteDoubleKeyFrame, LinearDoubleKeyFrameve SplineDoubleKeyFrame. (İlişkilendirme yöntemleri daha sonraki bir bölümde ayrıntılı olarak açıklanmıştır.)
Anahtar çerçevenin birincil amacı ve ValuebelirtmektirKeyTime. Her anahtar çerçeve türü bu iki özelliği sağlar.
özelliği, Value bu anahtar çerçevesi için hedef değeri belirtir.
KeyTime özelliği, (animasyonların Durationiçinde) bir anahtar çerçeveye Value ne zaman ulaşıldığında belirtir.
Bir anahtar çerçeve animasyonu başladığında, anahtar çerçeveleri kendi özellikleri tarafından KeyTime tanımlanan sırada yinelenir.
0 zamanında anahtar çerçeve yoksa, animasyon hedef özelliğin geçerli değeri ile Value ilk anahtar çerçevesi arasında bir geçiş oluşturur; aksi takdirde, animasyonun çıkış değeri ilk anahtar çerçevesinin değeri olur.
Animasyon, ikinci anahtar çerçevesi tarafından belirtilen ilişkilendirme yöntemini kullanarak birinci ve ikinci anahtar çerçeveleri arasında Value bir geçiş oluşturur. Geçiş, ilk anahtar çerçevenin KeyTime başında başlar ve ikinci anahtar çerçeveye KeyTime ulaşıldığında sona erer.
Animasyon devam eder ve sonraki her anahtar çerçeve ile önceki anahtar çerçevesi arasında geçişler oluşturur.
Son olarak, animasyon, animasyonun değerine eşit veya daha küçük olan en büyük anahtar zamanıyla anahtar çerçevesinin değerine geçiş yapılır Duration.
Animasyonun DurationAutomatic değeri veya Duration değeri son anahtar çerçevenin zamanına eşitse animasyon sona erer. Aksi takdirde, animasyonun Duration son anahtar çerçevesinin anahtar süresinden büyükse, animasyon anahtar çerçeve değerini sonuna ulaşana Durationkadar tutar. Tüm animasyonlarda olduğu gibi, bir anahtar çerçevesi animasyonu FillBehavior da özelliğini kullanarak etkin döneminin sonuna ulaştığında son değerini tutup tutmadığını belirler. Daha fazla bilgi için bkz. Zamanlama Davranışlarına Genel Bakış.
Aşağıdaki örnek, ve KeyTime özelliklerinin nasıl Value çalıştığını göstermek için önceki örnekte tanımlanan nesnesini kullanırDoubleAnimationUsingKeyFrames.
İlk anahtar çerçeve, animasyon çıkış değerini hemen 0 olarak ayarlar.
İkinci anahtar çerçeve 0 ile 350'ye kadar animasyon ekler. İlk anahtar çerçevesi sona erdikten sonra (şu anda = 0 saniye) başlar ve 2 saniye boyunca yürütülür ve zaman = 0:0:2 ile biter.
Üçüncü anahtar çerçeve 350 ila 50'ye animasyon ekler. İkinci anahtar çerçevesi sona erdiğinde (şu anda = 2 saniye) başlar ve 5 saniye boyunca yürütülür ve zaman = 0:0:7 ile biter.
Dördüncü anahtar çerçeve 50 ila 200'e kadar animasyon ekler. Üçüncü anahtar çerçevesi sona erdiğinde (zaman = 7 saniye) başlar ve 1 saniye boyunca yürütülür ve şu anda biter = 0:0:8.
Animasyonun Duration özelliği 10 saniye olarak ayarlandığından, animasyon son değerini şu anda bitmeden önce iki saniye boyunca tutar = 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>
İlişkilendirme Yöntemleri
Yukarıdaki bölümlerde bazı anahtar çerçevesi animasyonlarının birden çok ilişkilendirme yöntemini desteklediği belirtildi. Animasyonun ilişkilendirmesi, bir animasyonun süresi boyunca değerler arasında nasıl geçiş yapıldığını açıklar. Animasyonunuzla hangi anahtar çerçeve türünü kullandığınızı seçerek, bu anahtar çerçeve kesimi için ilişkilendirme yöntemini tanımlayabilirsiniz. Üç farklı ilişkilendirme yöntemi türü vardır: doğrusal, ayrık ve splined.
Doğrusal İlişkilendirme
Doğrusal ilişkilendirme ile animasyon, segment süresinin sabit bir hızında ilerler. Örneğin, bir anahtar çerçeve kesimi 5 saniye boyunca 0'dan 10'a geçiş yaparsa, animasyon belirtilen zamanlarda aşağıdaki değerleri verir:
| 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 İlişkilendirme
Ayrı ilişkilendirme ile animasyon işlevi, ilişkilendirme olmadan bir değerden diğerine atlar. Anahtar çerçeve kesimi 5 saniye boyunca 0'dan 10'a geçiş yaparsa, animasyon belirtilen zamanlarda aşağıdaki değerleri verir:
| Saat | Çıkış değeri |
|---|---|
| 0 | 0 |
| 1 | 0 |
| 2 | 0 |
| 3 | 0 |
| 4 | 0 |
| 4.25 | 0 |
| 4,5 | 0 |
| 5 | 10 |
Animasyonun, segment süresinin sonuna kadar çıkış değerini değiştirmediğini fark edin.
Splined interpolation daha karmaşıktır. Sonraki bölümde açıklanmıştır.
Splined Interpolation
Splined interpolation daha gerçekçi zamanlama etkileri elde etmek için kullanılabilir. Animasyonlar genellikle gerçek dünyada oluşan efektleri taklit etmek için kullanıldığından, geliştiricilerin nesnelerin hızlanması ve yavaşlaması üzerinde ayrıntılı denetime ve zamanlama segmentlerinin yakın işlemesine ihtiyacı olabilir. Spline anahtar çerçeveleri, splined ilişkilendirme ile animasyon eklemenizi sağlar. Diğer anahtar çerçevelerde ve KeyTimedeğerini belirtirsinizValue. Spline anahtar çerçevesiyle, bir KeySplinede belirtirsiniz. Aşağıdaki örnekte, bir için tek bir spline anahtar çerçevesi gösterilmektedir DoubleAnimationUsingKeyFrames. özelliğine KeySpline dikkat edin; spline anahtar çerçevesini diğer anahtar çerçeve türlerinden farklı kılan budur.
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Kübik Bezier eğrisi bir başlangıç noktası, bir bitiş noktası ve iki denetim noktası ile tanımlanır. Spline KeySpline anahtar çerçevesinin özelliği, Bezier eğrisinin (0,0) ile (1,1) kadar uzanan iki denetim noktasını tanımlar. İlk denetim noktası Bezier eğrisinin ilk yarısının eğri faktörünü, ikinci denetim noktası ise Bezier segmentinin ikinci yarısının eğri faktörünü denetler. Sonuçta elde edilen eğri, bu eğri anahtar çerçevesi için değişiklik hızını açıklar. Eğri ne kadar dik olursa, anahtar çerçeve değerlerini o kadar hızlı değiştirir. Eğri düzleşirken, anahtar çerçeve değerlerini daha yavaş değiştirir.
Düşen su veya zıplayan toplar gibi fiziksel yörüngelerin simülasyonunu yapmak veya hareket animasyonlarına diğer "kolaylık" ve "kolaylaştırma" efektlerini uygulamak için kullanabilirsiniz KeySpline . Arka plan solması veya denetim düğmesi rebound gibi kullanıcı etkileşimi efektleri için, animasyonun değişiklik hızını belirli bir şekilde hızlandırmak veya yavaşlatmak için eğri ilişkilendirme uygulayabilirsiniz.
Aşağıdaki örnek, aşağıdaki Bezier eğrisini oluşturan 0,1 1,0 değerini belirtir KeySpline .
Denetim noktaları (0.0, 1.0) ve (1.0, 0.0) içeren bir anahtar spline
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Bu anahtar çerçeve başladığında hızla animasyon oluşturur, yavaşlar ve bitmeden önce yeniden hızlanır.
Aşağıdaki örnek, aşağıdaki Bezier eğrisini oluşturan 0,5,0,25 0,75,1.0 değerini belirtir KeySpline .
Denetim noktaları (0,25, 0,5) ve (0,75, 1,0) ile bir anahtar spline
<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 animasyon verir; sonunda bir miktar yavaşlar.
Aşağıdaki örnekte dikdörtgenin konumuna animasyon eklemek için bir DoubleAnimationUsingKeyFrames kullanılır. nesneleri kullandığından DoubleAnimationUsingKeyFramesSplineDoubleKeyFrame , her anahtar karesi değeri arasındaki geçiş, splined 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>
Splined ilişkilendirmesini anlamak zor olabilir; farklı ayarlarla denemeler yardımcı olabilir. Anahtar Eğrisi Animasyon Örneği, anahtar spline değerlerini değiştirmenize ve bir animasyonda elde edilen sonucu görmenize olanak tanır.
İlişkilendirme Yöntemlerini Birleştirme
Tek bir anahtar çerçeve animasyonunda farklı ilişkilendirme türlerine sahip anahtar çerçeveler kullanabilirsiniz. Farklı ilişkilendirmelere sahip iki anahtar çerçeve animasyonu birbirini takip ettiğinde, birinci değerden ikinci değere geçişi oluşturmak için ikinci anahtar çerçevenin ilişkilendirme yöntemi kullanılır.
Aşağıdaki örnekte doğrusal, splined ve ayrık ilişkilendirme kullanan bir DoubleAnimationUsingKeyFrames 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 Süreleri hakkında daha fazla bilgi
Diğer animasyonlarda olduğu gibi, anahtar çerçeve animasyonlarının da bir Duration özelliği vardır. Animasyonun Durationdeğerini belirtmeye ek olarak, her bir anahtar karesine bu sürenin hangi bölümünün verileceğini belirtmeniz gerekir. Bunu, animasyonun anahtar karelerinin her biri için bir KeyTime açıklayarak yaparsınız. Her anahtar çerçeve, KeyTime bu anahtar çerçevenin ne zaman sona erdiğini belirtir.
KeyTime özelliği, anahtar süresinin ne kadar süreyle yürütüleceğini belirtmez. Bir anahtar çerçevenin yürütüldiği süre, anahtar çerçevenin ne zaman sona erdiği, önceki anahtar çerçevenin sona erdiği zaman ve animasyonun süresine göre belirlenir. Anahtar süreleri bir zaman değeri, yüzde veya özel değerler Uniform veya Pacedolarak belirtilebilir.
Aşağıdaki listede, anahtar saatleri belirtmenin farklı yolları açıklanmaktadır.
TimeSpan Değerleri
bir belirtmek KeyTimeiçin değerleri kullanabilirsinizTimeSpan. Değer 0'dan büyük veya buna eşit ve animasyon süresinden küçük veya buna eşit olmalıdır. Aşağıdaki örnek, süresi 10 saniye olan bir animasyonu ve anahtar süreleri zaman değerleri olarak belirtilen dört anahtar çerçeveyi gösterir.
İlk anahtar çerçeve, temel değerden 100'e ilk 3 saniye boyunca animasyon ekler ve bu süre = 0:0:03 ile biter.
İkinci anahtar çerçeve 100 ile 200'e kadar animasyon ekler. İlk anahtar çerçevesi sona erdikten sonra (şu anda = 3 saniye) başlar ve 5 saniye boyunca yürütülür ve zaman = 0:0:8 ile biter.
Üçüncü anahtar çerçeve 200 ile 500'e kadar animasyon ekler. İkinci anahtar çerçevesi sona erdiğinde (şu anda = 8 saniye) başlar ve 1 saniye boyunca yürütülür ve zaman = 0:0:9 ile biter.
Dördüncü anahtar çerçeve 500 ile 600'e kadar animasyon ekler. Üçüncü anahtar çerçevesi sona erdiğinde (şu anda = 9 saniye) başlar ve 1 saniye boyunca yürütülür ve zaman = 0:0:10 ile biter.
<!-- 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çevenin animasyonun Durationbelirli bir yüzdesiyle sona erdiğini belirtir. XAML'de yüzdeyi sayı olarak ve ardından simgesi olarak % belirtirsiniz. Kodda yöntemini kullanır FromPercent ve yüzdeyi belirten bir Double geçirirsiniz. 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 saniye olan bir animasyon ve anahtar süreleri yüzde olarak belirtilen dört anahtar kare gösterilmektedir.
İlk anahtar çerçeve, ilk 3 saniye boyunca temel değerden 100'e animasyon ekler ve bu süre = 0:0:3 olarak biter.
İkinci anahtar çerçeve 100 ile 200'e kadar animasyon ekler. İlk anahtar çerçevesi sona erdikten sonra (zaman = 3 saniye) başlar ve 5 saniye boyunca yürütülür ve şu anda biter = 0:0:8 (0,8 * 10 = 8).
Üçüncü anahtar çerçeve 200 ile 500'e kadar animasyon ekler. İkinci anahtar çerçevesi sona erdiğinde (zaman = 8 saniye) başlar ve 1 saniye boyunca yürütülür ve şu anda biter = 0:0:9 (0,9 * 10 = 9).
Dördüncü anahtar çerçeve 500 ile 600'e kadar animasyon ekler. Üçüncü anahtar çerçevesi sona erdiğinde (zaman = 9 saniye) başlar ve 1 saniye boyunca yürütülür ve şu anda biter = 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
Her anahtar çerçevesinin aynı miktarda zaman almasını istediğinizde zamanlama kullanın Uniform .
Anahtar Uniform süresi, her bir anahtar çerçevenin bitiş zamanını belirlemek için kullanılabilir süreyi anahtar kare sayısına eşit olarak böler. Aşağıdaki örnek, süresi 10 saniye olan bir animasyonu ve anahtar süreleri olarak Uniformbelirtilen dört anahtar çerçeveyi gösterir.
İlk anahtar çerçeve, ilk 2,5 saniye boyunca temel değerden 100'e animasyon ekler ve bu süre = 0:0:2,5 olarak biter.
İkinci anahtar çerçeve 100 ile 200'e kadar animasyon ekler. İlk anahtar çerçevesi sona erdikten sonra (şu anda = 2,5 saniye) başlar ve yaklaşık 2,5 saniye boyunca yürütülür ve şu anda = 0:0:5 biter.
Üçüncü anahtar çerçeve 200 ile 500'e kadar animasyon ekler. İkinci anahtar çerçevesi sona erdiğinde (zaman = 5 saniye) başlar ve 2,5 saniye boyunca yürütülür ve şu anda biter = 0:0:7,5.
Dördüncü anahtar çerçeve 500 ile 600'e kadar animasyon ekler. İkinci anahtar çerçevesi sona erdiğinde (şu anda = 7,5 saniye) başlar ve 2,5 saniye boyunca yürütülür ve şu anda biter = 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, Tempolu
Sabit bir hızda animasyon eklemek istediğinizde zamanlamayı kullanın Paced .
Paced Anahtar zaman, her çerçevenin süresini belirlemek için anahtar çerçevelerin her birinin uzunluğuna göre kullanılabilir süreyi ayırır. Bu, animasyonun hızının veya hızının sabit kalması davranışını sağlar. Aşağıdaki örnek, süresi 10 saniye olan bir animasyonu ve anahtar süreleri olarak Pacedbelirtilen üç anahtar çerçeveyi gösterir.
<!-- 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 süresi Paced veya Uniformise, çözümlenen anahtar süresinin yüzde 100 olarak ayarlandığını unutmayın. Çok kareli animasyondaki ilk anahtar çerçevenin hızı belirlenirse, çözümlenen anahtar süresi 0 olarak ayarlanır. (Anahtar çerçeve koleksiyonu yalnızca tek bir anahtar çerçeve içeriyorsa ve tempolu bir anahtar çerçevesiyse, çözümlenen anahtar süresi yüzde 100 olarak ayarlanır.)
Tek bir anahtar kare animasyonu içindeki farklı anahtar çerçeveler farklı anahtar zaman türleri kullanabilir.
Anahtar Zamanları, Sıra Dışı Anahtar Çerçevelerini Birleştirme
Aynı animasyonda farklı KeyTime değer türlerine sahip anahtar çerçeveler kullanabilirsiniz. Ayrıca, anahtar çerçeveleri oynamaları gereken sırayla eklemeniz önerilir, ancak bu gerekli değildir. Animasyon ve zamanlama sistemi, sıra dışı anahtar çerçeveleri çözümleyebilecek özelliktedir. Geçersiz anahtar süreleri olan anahtar çerçeveler yoksayılır.
Aşağıdaki listede, bir anahtar kare animasyonunun anahtar kareleri için anahtar sürelerinin çözümlendiği yordam açıklanmaktadır.
Animasyonların toplam ilişkilendirme süresini, bir iletme yinelemesini tamamlamak için anahtar kare animasyonunun aldığı toplam süreyi belirleyin.
Animasyon Duration veya değilse AutomaticForever, toplam ilişkilendirme süresi animasyonun Duration özelliğinin değeridir.
Aksi takdirde, varsa, toplam ilişkilendirme süresi anahtar çerçeveleri arasında belirtilen en büyük TimeSpanKeyTime değerdir.
Aksi takdirde, toplam ilişkilendirme süresi 1 saniyedir.
Değerleri çözümlemek PercentKeyTime için toplam ilişkilendirme süresi değerini kullanın.
Önceki adımlarda çözümlenmediyse, son anahtar çerçeveyi çözün. KeyTime Son anahtar çerçevenin veya PacediseUniform, çözümlenme süresi toplam ilişkilendirme süresine eşit olur.
KeyTime İlk anahtar çerçevenin değeri ise Paced ve bu animasyonda anahtar karelerden daha fazlası varsa, değerini sıfır olarak çözünKeyTime; yalnızca bir anahtar çerçeve varsa ve KeyTime değeri isePaced, önceki adımda açıklandığı gibi toplam ilişkilendirme süresine çözümlenir.
Kalan UniformKeyTime değerleri çözümle: her birine kullanılabilir zamanın eşit bir paylaşımı verilir. Bu işlem sırasında çözümlenmemiş PacedKeyTime değerler geçici olarak değer olarak UniformKeyTime kabul edilir ve geçici bir çözümlenme süresi alır.
KeyTime En yakınlarında bildirilen ve çözümlenen KeyTime değerlere sahip anahtar çerçeveleri kullanarak, belirtilmemiş anahtar süreleri olan anahtar çerçevelerin değerlerini çözün.
Kalan PacedKeyTime değerleri çözün. PacedKeyTimeKeyTime çözümlenme sürelerini belirlemek için komşu anahtar çerçevelerinin değerlerini kullanın. Amaç, animasyonun hızının bu anahtar çerçevenin çözümlenme süresi boyunca sabit olduğundan emin olmaktır.
Anahtar çerçeveleri çözümlenme zamanı (birincil anahtar) ve bildirim sırasına (ikincil anahtar) göre sıralayın; örneğin, çözümlenen anahtar çerçevesi KeyTime değerlerine göre kararlı bir sıralama kullanın.
Ayrıca bkz.
.NET Desktop feedback
Geri Bildirim
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz. https://aka.ms/ContentUserFeedback.
Gönderin ve geri bildirimi görüntüleyin