Zamanlama Davranışlarına Genel Bakış
Bu konu, animasyonların ve diğer nesnelerin zamanlama davranışlarını açıklamaktadır Timeline .
Önkoşullar
Bu konuyu anlamak için temel animasyon özellikleriyle ilgili bilgi sahibi olmanız gerekir. Daha fazla bilgi için animasyona genel bakışkonusuna bakın.
Zaman çizelgesi türleri
Bir Timeline zaman kesimini temsil eder. Bu, segmentin uzunluğunu, ne zaman yineleneceğini, kaç kez yineleneceğini, bu kesimdeki zaman ne kadar hızlı bir şekilde ilerleme olduğunu ve daha fazlasını belirtmenizi sağlayan özellikler sunar.
Zaman Çizelgesi sınıfından kalıtımla alan sınıflar, animasyon ve medya yürütme gibi ek işlevler sağlar. WPF aşağıdaki türleri sağlar Timeline .
| Zaman çizelgesi türü | Description |
|---|---|
| AnimationTimeline | TimelineHareketlendirilen özellikler için çıkış değerleri üreten nesneler için soyut temel sınıf. |
| MediaTimeline | Bir medya dosyasından çıktı üretir. |
| ParallelTimeline | Grupların bir türü TimelineGroup ve alt Timeline nesneleri denetler. |
| Storyboard | ParallelTimelineIçerdiği zaman çizelgesi nesneleri için hedefleme bilgilerini sağlayan bir türü. |
| Timeline | Zamanlama davranışlarını tanımlayan soyut temel sınıf. |
| TimelineGroup | TimelineDiğer nesneleri içerebilen nesneler için soyut sınıf Timeline . |
Bir zaman çizelgesinin uzunluğunu denetleyen özellikler
Bir Timeline zaman kesimini temsil eder ve zaman çizelgesinin uzunluğu farklı şekillerde açıklanabilir. Aşağıdaki tabloda, bir zaman çizelgesinin uzunluğunu açıklamak için çeşitli terimler tanımlanmaktadır.
| Süre | Açıklama | Özellikler | |||
|---|---|---|---|---|---|
| Basit süre | Bir zaman çizelgesinin tek bir iletme yinelemesi yapmak için geçen sürenin uzunluğu. | Duration | |||
| Bir yineleme | Bir zaman çizelgesinin bir kez oynatılacağı sürenin uzunluğu ve AutoReverse özellik true ise, bir kez geri yürütün. | Duration, AutoReverse | |||
| Etkin dönem | Bir zaman çizelgesinin, özelliği tarafından belirtilen tüm tekrarları tamamlaması için geçen sürenin uzunluğu RepeatBehavior . | Duration, AutoReverse, RepeatBehavior |
Duration özelliği
Daha önce belirtildiği gibi, bir zaman çizelgesi bir zaman kesimini temsil eder. Bu segmentin uzunluğu, zaman çizelgesi tarafından belirlenir Duration . Bir zaman çizelgesi süresinin sonuna ulaştığında yürütmeyi sonlandırır. Zaman çizelgesinde alt zaman çizelgeleri varsa, oynamaları da durdurur. Animasyon söz konusu olduğunda, Duration animasyonun başlangıç değerinden bitiş değerine geçişin ne kadar sürdüğünü belirtir. Bir zaman çizelgesinin süresi bazen basit süresi olarak adlandırılır, tek bir yinelemenin süresi ile animasyonun sürekliliği dahil olduğu sürenin toplam uzunluğu arasında ayrım yapar. Bir süreyi sınırlı bir zaman değeri veya özel değerler veya ya da ile belirtebilirsiniz Automatic Forever . Animasyonun süresi bir değere çözümlenmelidir TimeSpan , bu nedenle değerler arasında geçiş yapabilir.
Aşağıdaki örnek, DoubleAnimation beş saniyelik bir ile gösterir Duration .
<DoubleAnimation
Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
From="0" To="100" Duration="0:0:5" />
Ve gibi kapsayıcı zaman çizelgeleri Storyboard ParallelTimeline varsayılan süresine sahiptir ve Automatic Bu, son alt öğe yürütmeyi durdurduklarında otomatik olarak sona erer. Aşağıdaki örnek Storyboard Duration , beş saniye içinde çözümlendiğini, tüm alt nesnelerinin tamamlanmasını geçen sürenin uzunluğunu gösterir DoubleAnimation .
<Storyboard >
<DoubleAnimation
Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
From="0" To="100" Duration="0:0:5" />
<DoubleAnimation
Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
From="0" To="100" Duration="0:0:3" />
</Storyboard>
DurationBir kapsayıcı zaman çizelgesinin TimeSpan değerini bir değere ayarlayarak, daha uzun veya daha kısa bir süre yürütmeye zorlayabilirsiniz Timeline . DurationÖğesini kapsayıcı zaman çizelgesinin alt nesnelerinin uzunluğundan daha küçük bir değere ayarlarsanız Timeline , Timeline kapsayıcı zaman çizelgesi yapıldığında alt nesneler yürütmeyi durdurur. Aşağıdaki örnek, Duration Storyboard önceki örneklerden üç saniyeye kadar olan öğesini ayarlar. Sonuç olarak, ilk olarak DoubleAnimation üç saniyeden sonra ilerledikten sonra, hedef dikdörtgenin genişliğini 60 olarak hareketlendirilir.
<Storyboard Duration="0:0:3">
<DoubleAnimation
Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
From="0" To="100" Duration="0:0:5" />
<DoubleAnimation
Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
From="0" To="100" Duration="0:0:3" />
</Storyboard>
RepeatBehavior özelliği
RepeatBehaviorBir öğesinin özelliği, Timeline basit süresini kaç kez yineleyeceğini denetler. Özelliğini kullanarak RepeatBehavior , zaman çizelgesinin kaç kez oynatılacağını (bir yineleme Count ) veya oynaması gereken toplam süreyi (bir yineleme Duration ) belirtebilirsiniz. Her iki durumda da, animasyon istenen sayıyı veya süreyi dolduracak kadar birçok baştan sona çalışır. Varsayılan olarak, zaman çizelgeleri yineleme sayısına sahiptir 1.0 . Bu, bir kez oynadıkları ve hiç yinelenmediği anlamına gelir.
Aşağıdaki örnek, bir RepeatBehavior DoubleAnimation yineleme sayısı belirterek, basit süresini iki kez yürütmek için özelliğini kullanır.
<DoubleAnimation
Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
From="0" To="100" Duration="0:0:5"
RepeatBehavior="2x" />
Sonraki örnek, RepeatBehavior oynatma özelliğini, DoubleAnimation basit süresi yarıya getirmek için kullanır.
<DoubleAnimation
Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
From="0" To="100" Duration="0:0:5"
RepeatBehavior="0.5x" />
RepeatBehaviorÖğesinin özelliğini ' a ayarlarsanız Timeline Forever , Timeline etkileşimli olarak veya zamanlama sistemi tarafından durduruluncaya kadar yinelenir. Aşağıdaki örnek, RepeatBehavior oynatma özelliğini sonsuza kadar yapmak için kullanır DoubleAnimation .
<DoubleAnimation
Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
From="0" To="100" Duration="0:0:5"
RepeatBehavior="Forever" />
Ek bir örnek için bkz. bir animasyonu tekrarlama.
Oto ters özelliği
AutoReverseÖzelliği, bir Timeline , her bir ileri yinelemesinin sonunda geriye doğru çalıp çalınmayacağını belirtir. Aşağıdaki örnek, ' AutoReverse a ' öğesinin özelliğine ayarlanır DoubleAnimation true ; Sonuç olarak, sıfırdan 100 'e ve ardından 100 ' den sıfıra hareketlenir. Toplam 10 saniyelik oynar.
<DoubleAnimation
Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
From="0" To="100" Duration="0:0:5"
AutoReverse="True" />
CountBir değerini ve öğesinin özelliğini belirtmek için bir değer kullandığınızda, tek bir yineleme bir RepeatBehavior Timeline İleri yinelemeden AutoReverse Timeline true sonra bir geriye doğru yineleme izler. Aşağıdaki örnek, RepeatBehavior DoubleAnimation bir önceki örnekten ' ın ' ın ' a kadar olan öğesini ayarlar Count . Sonuç olarak, DoubleAnimation 20 saniye boyunca oynatılır: beş saniye boyunca İleri, beş saniye boyunca geri doğru, 5 saniye boyunca İleri ve beş saniye boyunca geriye doğru.
<DoubleAnimation
Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
From="0" To="100" Duration="0:0:5"
RepeatBehavior="2"
AutoReverse="True" />
Bir kapsayıcı zaman çizelgesinde alt Timeline nesneler varsa, kapsayıcı zaman çizelgesi yapıldığında bunlar ters yapılır. Ek örnekler için bkz. bir zaman çizelgesinin otomatik olarak ters çevrilip çevrilmeyeceğini belirtme.
BeginTime özelliği
BeginTimeÖzelliği, bir zaman çizelgesinin ne zaman başlayacağını belirtmenizi sağlar. Bir zaman çizelgesinin başlangıç zamanı, üst zaman çizelgesine göre belirlenir. Sıfır saniyelik başlangıç zamanı, ana zaman çizelgesinin başladığı anda başladığı anlamına gelir; diğer herhangi bir değer, üst zaman çizelgesinin oynatılmaya başladığı ve alt zaman çizelgesinin yürütüldüğü zaman arasında bir fark oluşturur. Örneğin, iki saniyelik bir başlangıç zamanı, üst öğesi iki saniyelik bir zamana ulaştığında zaman çizelgesinin oynatılmaya başladığı anlamına gelir. Varsayılan olarak, tüm zaman çizelgeleri sıfır saniyelik başlangıç zamanına sahiptir. Ayrıca, zaman çizelgesinin başlamasını önleyen bir zaman çizelgesinin başlangıç saatini de ayarlayabilirsiniz null . İçinde WPF , X:null işaretleme uzantısınıkullanarak null değerini belirtirsiniz.
Başlangıç saatinin, ayarı nedeniyle bir zaman çizelgesi tekrarlandığı her seferinde uygulanmadığını unutmayın RepeatBehavior . 10 saniyelik ve ' a bir animasyon oluşturmak istiyorsanız BeginTime RepeatBehavior Forever animasyon ilk kez çalınmadan önce 10 saniyelik bir gecikme olur, ancak her bir sonraki tekrarda kullanılamaz. Ancak, animasyonun üst zaman çizelgesi yeniden başlatılmaya veya tekrarlanması olduysa, 10 saniyelik gecikme meydana gelir.
BeginTimeÖzelliği, kademelendirme zaman çizelgeleri için yararlıdır. Aşağıdaki örnek Storyboard iki alt nesnesine sahip bir oluşturur DoubleAnimation . İlk animasyon Duration beş saniyeye sahiptir ve ikincisi Duration 3 saniyeye sahiptir. Örnek, BeginTime DoubleAnimation ilk sona erdikten sonra yürütülmeye başlaması için ikincinin 5 saniyeye ayarlanır DoubleAnimation .
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
From="0" To="100" Duration="0:0:5"
BeginTime="0:0:0" />
<DoubleAnimation
Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
From="0" To="100" Duration="0:0:3"
BeginTime="0:0:5" />
</Storyboard>
FillBehavior özelliği
Bir bir, Timeline toplam etkin süresinin sonuna ulaştığında, FillBehavior özelliği, en son değerini durdurduğunu veya bulundurmadığını belirtir. "Barındırır" olan bir animasyon, FillBehavior HoldEnd çıkış değerini saklar: hareketlendirilen Özellik animasyonun son değerini korur. Bir değeri, Stop animasyonun bittikten sonra hedef özelliğini etkilemesini durdurmasına neden olur.
Aşağıdaki örnek Storyboard iki alt nesnesine sahip bir oluşturur DoubleAnimation . Her iki DoubleAnimation nesne de Width Rectangle 0 ile 100 arasında bir animasyon uygular. RectangleÖğelerin, Width 500 [cihazdan bağımsız piksel] animasyon olmayan değerleri vardır.
FillBehaviorBirincisi özelliği DoubleAnimation HoldEnd , varsayılan değer olarak ayarlanır. Sonuç olarak, dikdörtgenin genişliği bittikten sonra 100 ' de kalır DoubleAnimation .
FillBehaviorİkinci öğesinin özelliği DoubleAnimation olarak ayarlanır Stop . Sonuç olarak, Width ikincisi Rectangle sona erdikten sonra 500 ' e geri döner DoubleAnimation .
<Rectangle Name="MyRectangle"
Width="500" Height="100"
Opacity="1" Fill="Red">
</Rectangle>
<Rectangle Name="MyOtherRectangle"
Width="500" Height="100"
Opacity="1" Fill="Orange">
</Rectangle>
<Button Content="Start FillBehavior Example">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
From="0" To="100" Duration="0:0:5"
FillBehavior="HoldEnd" />
<DoubleAnimation
Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
From="0" To="100" Duration="0:0:5"
FillBehavior="Stop" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
Bir zaman çizelgesinin hızını denetleyen özellikler
TimelineSınıfı, hızını belirtmek için üç özellik sağlar:
SpeedRatio – Bu oranı, üst öğesine göre, için zaman ilerledikçe belirtir Timeline . Bir değerden büyük değerler, Timeline ve alt nesnelerinin hızını artırır Timeline ; sıfır ile bir arasındaki değerler aşağı doğru düşüktür. Bir değeri, Timeline üst öğesiyle aynı hızda ilerlediği anlamına gelir. SpeedRatioKapsayıcı zaman çizelgesinin ayarı, tüm alt Timeline nesnelerini de etkiler.
AccelerationRatio – Duration Hızlandırıcı tarafından harcanan bir zaman çizelgesinin yüzdesini belirtir. Bir örnek için bkz. nasıl yapılır: animasyonun hızını hızlandırma veya Yavaşlatma.
DecelerationRatio - Bir Zaman Duration Çizelgesi'nin, zaman çizelgesinin ne kadar süreyle ertelenerek harcanarak harcanmalarının yüzdesini belirtir. Bir örnek için, bkz. How to: Accelerate or Decelerate an Animation.