Zamanlama Davranışlarına Genel Bakış

Makale
10/18/2023

Bu konu başlığında animasyonların ve diğer Timeline nesnelerin zamanlama davranışları açıklanmaktadır.

Ön koşullar

Bu konuyu anlamak için temel animasyon özellikleri hakkında bilgi sahibi olmanız gerekir. Daha fazla bilgi için bkz. Animasyona Genel Bakış.

Zaman Çizelgesi Türleri

A Timeline , bir zaman dilimini temsil eder. Bu, bu segmentin uzunluğunu, ne zaman başlaması gerektiğini, kaç kez yineleneceğini, bu segmentte ne kadar hızlı ilerlediğini ve daha fazlasını belirtmenizi sağlayan özellikler sağlar.

Zaman çizelgesi sınıfından devralan sınıflar, animasyon ve medya kayıttan yürütme gibi ek işlevler sağlar. WPF aşağıdaki Timeline türleri sağlar.

Zaman çizelgesi türü	Tanım
AnimationTimeline	Özelliklerin animasyonu için Timeline çıkış değerleri oluşturan nesneler için soyut temel sınıf.
MediaTimeline	Bir medya dosyasından çıkış oluşturur.
ParallelTimeline	Bu Timeline tür alt TimelineGroup nesneleri gruplandırıp denetler.
Storyboard	İçeren ParallelTimeline Zaman Çizelgesi nesneleri için hedefleme bilgileri sağlayan türü.
Timeline	Zamanlama davranışlarını tanımlayan soyut temel sınıf.
TimelineGroup	Diğer Timeline nesneleri içerebilen nesneler için Timeline soyut sınıf.

Zaman Çizelgesinin Uzunluğunu Denetleen Özellikler

A Timeline , bir zaman dilimini temsil eder ve zaman çizelgesinin uzunluğu farklı şekillerde açıklanabilir. Aşağıdaki tabloda, zaman çizelgesinin uzunluğunu açıklamaya yönelik çeşitli terimler tanımları yer alır.

Süre	Tanım	Özellikler
Basit süre	Bir zaman çizelgesinin tek bir iletme yinelemesi yapmak için gereken süre.	Duration
Bir yineleme	Zaman çizelgesinin bir kez ileri doğru çalması için gereken süre ve özellik doğruysa AutoReverse , bir kez geriye doğru oynatın.	Duration, AutoReverse
Etkin dönem	Bir zaman çizelgesinin özelliği tarafından RepeatBehavior belirtilen tüm yinelemeleri tamamlaması için gereken süre.	Duration, AutoReverse, RepeatBehavior

Duration Özelliği

Daha önce belirtildiği gibi, zaman çizelgesi bir zaman dilimini temsil eder. Bu kesimin uzunluğu zaman çizelgesinin Durationtarafından belirlenir. Zaman çizelgesi süresinin sonuna ulaştığında yürütmeyi durdurur. Zaman çizelgesinde alt zaman çizelgeleri varsa, bunlar da yürütülmeyi durdurur. Animasyon söz konusu olduğunda, Duration animasyonun başlangıç değerinden bitiş değerine geçişinin ne kadar süreceğini belirtir. Zaman çizelgesinin süresi bazen basit süresi olarak adlandırılır ve tek bir yinelemenin süresini ve yinelemeler de dahil olmak üzere animasyonun toplam oynatım süresini ayırt eder. Sonlu bir zaman değeri veya özel değerler Automatic veya Foreverkullanarak bir süre belirtebilirsiniz. Animasyonların süresi değerler arasında geçiş yapmak için bir TimeSpan değere çözümlenmelidir.

Aşağıdaki örnek, beş saniyelik bir Duration değerini gösterirDoubleAnimation.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5"  />

ve ParallelTimelinegibi Storyboard kapsayıcı zaman çizelgeleri varsayılan süresine Automaticsahiptir. Bu, son alt öğesi yürütmeyi durdurduğunda otomatik olarak sona erecekleri anlamına gelir. Aşağıdaki örnek, beş saniyeye çözümlenen Duration bir Storyboard öğesini, tüm alt DoubleAnimation nesnelerinin tamamlanması için gereken süreyi gösterir.

<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>

Kapsayıcı zaman çizelgesini Duration bir TimeSpan değere ayarlayarak alt nesnelerinin yürüteceğinden daha Timeline uzun veya daha kısa yürütmeye zorlayabilirsiniz. öğesini Duration kapsayıcı zaman çizelgesinin alt Timeline nesnelerinin uzunluğundan daha küçük bir değere ayarlarsanız, kapsayıcı zaman çizelgesi çalıştığında alt Timeline nesneler yürütülmeyi durdurur. Aşağıdaki örnek, önceki örneklerden öğesinin Storyboard değerini üç saniye olarak ayarlarDuration. Sonuç olarak, hedef DoubleAnimation dikdörtgenin genişliğini 60'a animasyon eklediğinde ilki üç saniye sonra ilerlemeyi durdurur.

<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

özelliğiTimeline, RepeatBehavior basit süresini kaç kez yinelediğinden denetler. RepeatBehavior özelliğini kullanarak, zaman çizelgesinin kaç kez yürütüleceğini (yinelemeCount) veya oynatılması gereken toplam süreyi (yinelemeDuration) belirtebilirsiniz. Her iki durumda da animasyon, istenen sayıyı veya süreyi doldurmak için gereken sayıda baştan sona çalıştırmadan geçer. Varsayılan olarak, zaman çizelgelerinin yineleme sayısı 1.0vardır; bu da bir kez oynatıldığı ve hiç yineleme yapılmadığı anlamına gelir.

Aşağıdaki örnek, bir yineleme sayısı belirterek basit süresinin iki katı boyunca oynatmak DoubleAnimation için özelliğini kullanırRepeatBehavior.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2x" />

Sonraki örnek, basit süresinin yarısı boyunca oyunu yapmak DoubleAnimation için özelliğini kullanırRepeatBehavior.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="0.5x" />

özelliğini Timeline Foreverolarak ayarlarsanızRepeatBehavior, Timeline etkileşimli olarak veya zamanlama sistemi tarafından durdurulana kadar yineler. Aşağıdaki örnek, oyunu süresiz olarak yürütmek DoubleAnimation için özelliğini kullanırRepeatBehavior.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="Forever" />

Ek bir örnek için bkz . Animasyonu Yineleme.

AutoReverse Özelliği

özelliği, AutoReverse her ileriye doğru yinelemenin sonunda a'nın Timeline geriye doğru oynatılıp oynatılmayacağını belirtir. Aşağıdaki örnek, öğesinin AutoReverse DoubleAnimation özelliğine trueayarlanır; sonuç olarak, sıfırdan 100'e ve ardından 100'den sıfıra animasyon ekler. Toplam 10 saniye boyunca çalar.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  AutoReverse="True" />

öğesinin RepeatBehavior Timeline ve AutoReverse özelliğini Timelinetruebelirtmek için bir Count değer kullandığınızda, tek bir yineleme bir ileri yinelemeden ve ardından bir geriye doğru yinelemeden oluşur. Aşağıdaki örnek, yukarıdaki örnekten Count öğesinin öğesini ikisine ayarlar.RepeatBehavior DoubleAnimation Sonuç olarak, DoubleAnimation 20 saniye boyunca yürütülür: beş saniye ileri, beş saniye geriye, tekrar 5 saniye ileri ve ardından beş saniye geriye doğru.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2" 
  AutoReverse="True" />

Kapsayıcı zaman çizelgesinde alt Timeline nesneler varsa, kapsayıcı zaman çizelgesi olduğunda tersine döner. Ek örnekler için bkz . Zaman Çizelgesinin Otomatik Olarak Ters Çevrilip Ters Çevrilmeyeceğini Belirtme.

BeginTime Özelliği

BeginTime özelliği, zaman çizelgesinin ne zaman başlayacağını belirtmenizi sağlar. Zaman çizelgesinin başlangıç saati, üst zaman çizelgesine göredir. Sıfır saniyelik başlangıç zamanı, zaman çizelgesinin üst öğe başlatılır başlamaz başlayacağı anlamına gelir; diğer herhangi bir değer, üst zaman çizelgesinin yürütülmeye başlamasıyla alt zaman çizelgesinin oynatıldığında arasında bir uzaklık oluşturur. Örneğin, iki saniyelik bir başlangıç süresi, üst öğesi iki saniyelik bir zamana ulaştığında zaman çizelgesinin yürütülmeye başladığı anlamına gelir. Varsayılan olarak, tüm zaman çizelgeleri sıfır saniyelik bir başlangıç zamanına sahiptir. Zaman çizelgesinin başlangıç zamanını nullolarak da ayarlayabilirsiniz. Bu, zaman çizelgesinin başlamasını engeller. WPF'de, x:Null biçimlendirme uzantısını kullanarak null değerini belirtirsiniz.

Başlangıç saatinin, zaman çizelgesinin ayarı nedeniyle RepeatBehavior her yinelendiğinde uygulanmadığını unutmayın. 10 saniye ve RepeatBehavior Foreverbir BeginTime ile bir animasyon oluştursaydınız, animasyon ilk kez oynatılmadan önce 10 saniyelik bir gecikme olur, ancak her ardışık yineleme için bu gecikme olmaz. Ancak animasyonların üst zaman çizelgesi yeniden başlatılırsa veya tekrarlanırsa 10 saniyelik gecikme gerçekleşir.

BeginTime özelliği, zaman çizelgelerini kademelendirmek için kullanışlıdır. Aşağıdaki örnek, iki alt DoubleAnimation nesnesi olan bir Storyboard oluşturur. İlk animasyonun Duration beş saniye, ikincisinin ise 3 saniyesi vardır Duration . Örnek, ikincinin DoubleAnimation değerini 5 saniyeye ayarlarBeginTime, böylece ilk DoubleAnimation sona erdikten sonra oynatılır.

<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 Timeline , toplam etkin süresinin sonuna ulaştığında, FillBehavior özelliği durdurulup durdurulmayacağını veya son değerinin tutup tutmadığını belirtir. Çıkış değerini "tutar" değerine sahip bir FillBehavior HoldEnd animasyon: animasyonlu özellik animasyonun son değerini korur. Değeri, Stop animasyonun bittikten sonra hedef özelliğini etkilemeyi durdurmasına neden olur.

Aşağıdaki örnek, iki alt DoubleAnimation nesnesi olan bir Storyboard oluşturur. Her iki nesne Width Rectangle de DoubleAnimation 0 ile 100'ün animasyonunu oluşturur. Öğeler Rectangle 500 [cihazdan bağımsız piksel] animasyonlu Width olmayan değerlere sahiptir.

İlk FillBehavior DoubleAnimation öğesinin özelliği varsayılan değeri olarak HoldEndayarlanır. Sonuç olarak Dikdörtgenin Genişliği, sona erdikten sonra DoubleAnimation 100'de kalır.
İkincinin FillBehavior DoubleAnimation özelliği olarak Stopayarlanır. Sonuç olarak, Width ikincinin Rectangle sonu 500'e DoubleAnimation döner.

<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>

Zaman Çizelgesinin Hızını Denetleen Özellikler

sınıfı, Timeline hızını belirtmek için üç özellik sağlar:

SpeedRatio – Üst öğeye göre bu oranı belirtir. Bu oran, bir Timelineiçin ilerler. Birden büyük değerler ve alt Timeline nesnelerinin Timeline hızını artırır; sıfır ile bir arasındaki değerler onu yavaşlatır. Değerinin değeri, üst öğesiyle aynı hızda ilerlediğini Timeline gösterir. Kapsayıcı SpeedRatio zaman çizelgesinin ayarı, tüm alt Timeline nesnelerini de etkiler.
AccelerationRatio – Zaman çizelgesinin hızlandırılması için harcanan Duration yüzdesini belirtir. Bir örnek için bkz . Nasıl yapılır: Animasyonu Hızlandırma veya Yavaşlatma.
DecelerationRatio - Zaman çizelgesinin Duration yavaşlatma için harcanan yüzdesini belirtir. Bir örnek için bkz . Nasıl yapılır: Animasyonu Hızlandırma veya Yavaşlatma.

Aracılığıyla paylaş