Animasyon İpuçları ve Püf Noktaları

WPF'de animasyonlarla çalışırken, animasyonlarınızı daha iyi performans gösterip hayal kırıklığına neden olacak birkaç ipucu ve püf noktaları vardır.

Genel Sorunlar

Kaydırma Çubuğu veya Kaydırıcının Konumunun Animasyonunu Donduruyor

kaydırma çubuğunun veya kaydırıcının konumunu , değeri (varsayılan değer) olan bir animasyon kullanarak animasyonlarsanız, kullanıcı artık kaydırma çubuğunu veya FillBehaviorHoldEnd kaydırıcıyı hareket ettiremeyecektir. Bunun nedeni, animasyon sona erse bile hedef özelliğin temel değerini geçersiz kılmaya devam ediyor olabilir. Animasyonun özelliğin geçerli değerini geçersiz kılmayı durdurmak için animasyonu kaldırın veya bir FillBehavior değerine Stop verir. Daha fazla bilgi ve örnek için, bkz. Set a Property After Animating It with a Storyboard.

Animasyonun Çıkışına Animasyon Animasyonu Animasyonu Animasyonu Hiçbir Etkisi Yoktur

Başka bir animasyonun çıktısı olan bir nesneye animasyonu animasyonu eklemezsiniz. Örneğin, bir'den bir'e animasyonu yapmak için bir kullanırsanız, veya 'nin herhangi bir ObjectAnimationUsingKeyFramesFillRectangleRadialGradientBrushSolidColorBrush özelliğine animasyonu animasyonu RadialGradientBrush diyezsiniz. SolidColorBrush

Animasyona Animasyonu Başladıktan Sonra Özelliğin Değeri Değiştirimiyor

Bazı durumlarda, animasyon sona erdikten sonra bile bir özelliğin değerini animasyonlu hale geldikten sonra değiştiremiyor gibi görünebilir. Bunun nedeni, animasyon sona erse bile özelliğin temel değerini geçersiz kılmaya devam ediyor olabilir. Animasyonun özelliğin geçerli değerini geçersiz kılmayı durdurmak için animasyonu kaldırın veya bir FillBehavior değerine Stop verir. Daha fazla bilgi ve örnek için, bkz. Set a Property After Animating It with a Storyboard.

Zaman Çizelgesini Değiştirmenin Hiçbir Etkisi Yoktur

Özelliklerin çoğu animasyona animasyon uygulamalı olsa da ve verilere bağlı olsa da, bir etkinin özellik Timeline değerlerinin Timeline değiştirilmesinin hiçbir etkisi yok gibi görünüyor. Bunun nedeni, bir başlatıldı mı, zamanlama sisteminin kopyasını oluşturması ve bunu TimelineTimeline kullanarak bir nesnesi Clock oluşturmasıdır. Özgün kopyanın değiştirilmesinin sistemin kopyası üzerinde hiçbir etkisi yoktur.

Timelinebir'in değişiklikleri yansıtması için, saati yeniden oluşturularak daha önce oluşturulan saati değiştirmek için kullanılmalıdır. Saatler sizin için otomatik olarak yeniden üretlenmez. Zaman çizelgesi değişikliklerini uygulamak için aşağıdaki çeşitli yollar vardır:

  • Zaman çizelgesi bir ise veya bir 'a aitse, veya yöntemini kullanarak kendi storyboard'ını yeniden kullanarak Storyboard değişiklikleri BeginStoryboardBegin yansıtabilirsiniz. Bu, animasyonu yeniden başlatmanın da yan etkisine sahiptir. Kodda, Seek storyboard'unu önceki konuma geri ilerlemek için yöntemini kullanabilirsiniz.

  • yöntemini kullanarak bir animasyonu doğrudan özelliğine uyguladıysanız, yöntemini yeniden çağırın ve değiştirilen BeginAnimationBeginAnimation animasyonu ona iletirsiniz.

  • Doğrudan saat düzeyinde çalışıyorsanız, yeni bir saat kümesi oluşturun ve bunları kullanarak oluşturulan önceki saat kümelerini değiştirin.

Zaman çizelgeleri ve saatler hakkında daha fazla bilgi için bkz. Animasyon ve Zamanlama Sistemine Genel Bakış.

FillBehavior.Stop Beklendiği Gibi Çalışmıyor

Özelliğinin hiçbir etkisi yok gibi görünüyor gibi görünen bazı zamanlar vardır. Örneğin, bir animasyon ayarına sahip olduğu için başka bir animasyona FillBehaviorStop "el HandoffBehavior atıyor". SnapshotAndReplace

Aşağıdaki örnek, bir Canvas ve RectangleTranslateTransform oluşturur. TranslateTransform, çevresinde hareket etmek için animasyonlu RectangleCanvas olacak.

<Canvas Width="600" Height="200">
  <Rectangle 
    Canvas.Top="50" Canvas.Left="0" 
    Width="50" Height="50" Fill="Red">
    <Rectangle.RenderTransform>
      <TranslateTransform 
        x:Name="MyTranslateTransform" 
        X="0" Y="0" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

Bu bölümdeki örnekler, özelliğin beklediğiniz gibi davranmama durumlarını göstermek FillBehavior için önceki nesneleri kullanır.

FillBehavior="Stop" ve HandoffBehavior with Multiple Animations

Bazen animasyon, ikinci bir animasyonla FillBehavior değiştiriken özelliğini yoksayıyor gibi görünüyor. İki nesne oluşturan ve önceki örnekte Storyboard gösterilene animasyonu yapmak için bunları kullanan TranslateTransform aşağıdaki örneği göz atabilirsiniz.

İlk , , dikdörtgeni 350 piksel sağa taşır ve StoryboardB1XTranslateTransform özelliğine 0'dan 350'ye animasyon sağlar. Animasyon süresinin sonuna ulaştığında ve oyundan durduğunda, özellik özgün değeri olan X 0'a geri döner. Sonuç olarak dikdörtgen 350 piksel sağa doğru hareket eder ve ardından özgün konumunun üzerine geri atlar.

<Button Content="Start Storyboard B1">
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard x:Name="B1">
          <DoubleAnimation 
            Storyboard.TargetName="MyTranslateTransform"
            Storyboard.TargetProperty="X"
            From="0" To="350" Duration="0:0:5"
            FillBehavior="Stop"
            />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

İkinci Storyboard , B2 , aynı zamanda aynı X özelliğinin özelliğine animasyonlar da TranslateTransform sağlar. Animasyon yalnızca bu özellikte ayar olduğundan animasyon, başlangıç değeri olarak ToStoryboard animasyonun animasyona animasyonu olan geçerli değerini kullanır.


<!-- Animates the same object and property as the preceding
     Storyboard. -->
<Button Content="Start Storyboard B2">
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard x:Name="B2">
          <DoubleAnimation 
            Storyboard.TargetName="MyTranslateTransform"
            Storyboard.TargetProperty="X"
            To="500" Duration="0:0:5" 
            FillBehavior="Stop" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

İlki çalışırken ikinci düğmeye Storyboard tıklarsanız aşağıdaki davranışı beklemeyebilirsiniz:

  1. İlk görsel şeridi sona erer ve animasyonun bir olduğundan dikdörtgeni özgün konuma geri FillBehaviorStop gönderir.

  2. İkinci film şeridi geçerli konumdan (artık 0 ile 500 arasında) geçerli konumdan etkileniyor ve animasyonlar alıyor.

Ancak böyle bir şey olmaz. Bunun yerine dikdörtgen geri atlamaz; sağdan devam eder. Bunun nedeni, ikinci animasyonun başlangıç değeri olarak ilk animasyonun geçerli değerini kullanması ve bu değerden 500'e animasyon olarak animasyonu kullanmasıdır. kullanılan ikinci animasyon ilk animasyonun yerini alasa da ilk animasyon SnapshotAndReplaceHandoffBehaviorFillBehavior önemli değildir.

FillBehavior ve Completed Olayı

Sonraki örneklerde, üzerinde hiçbir etkisi yok StopFillBehavior gibi görünen başka bir senaryoyu da gösterelim. Yine örnek, X özelliğine 0 ile 350 arasında animasyon animasyonu vermek için bir Storyboard TranslateTransform kullanır. Ancak bu kez örnek olay için Completed kaydolacak.

<Button Content="Start Storyboard C">
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard Completed="StoryboardC_Completed">
          <DoubleAnimation 
            Storyboard.TargetName="MyTranslateTransform"
            Storyboard.TargetProperty="X"
            From="0" To="350" Duration="0:0:5"
            FillBehavior="Stop" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

Olay Completed işleyicisi, Storyboard aynı özelliğe geçerli değerinden 500'e animasyonu olan başka bir başlatır.

private void StoryboardC_Completed(object sender, EventArgs e)
{

    Storyboard translationAnimationStoryboard =
        (Storyboard)this.Resources["TranslationAnimationStoryboardResource"];
    translationAnimationStoryboard.Begin(this);
}
Private Sub StoryboardC_Completed(ByVal sender As Object, ByVal e As EventArgs)

    Dim translationAnimationStoryboard As Storyboard = CType(Me.Resources("TranslationAnimationStoryboardResource"), Storyboard)
    translationAnimationStoryboard.Begin(Me)
End Sub

Aşağıda, ikinciyi kaynak olarak tanımlayan Storyboard işaretleme yer atır.

<Page.Resources>
  <Storyboard x:Key="TranslationAnimationStoryboardResource">
    <DoubleAnimation 
      Storyboard.TargetName="MyTranslateTransform"
      Storyboard.TargetProperty="X"
      To="500" Duration="0:0:5" />
  </Storyboard>
</Page.Resources>

'ı çalıştırarak özelliğinin 0 ile 350 arasında animasyona sahip olmasını, ardından tamamlandıktan StoryboardX sonra TranslateTransform 0'a (ayarı olduğundan) 0'a geri dönmesi ve ardından 0 ile FillBehaviorStop 500 arasında animasyonlar döndürmesi beklenebilirsiniz. Bunun yerine, TranslateTransform 0'dan 350'ye ve ardından 500'e animasyonlar.

Bunun nedeni WPF'nin olayları hangi sırayla yükseltdiği ve özellik değerlerinin önbelleğe alınarak özelliğin geçersiz kılınmadıkça yeniden hesaplanmayacak şekilde hesaplanmasıdır. Olay, Completed kök zaman çizelgesi (ilk ) tarafından tetiklendiğinden önce Storyboard işlenir. Şu anda özelliği X henüz geçersiz kılınmamış olduğundan animasyonlu değerini döndürmektedir. İkincisi, Storyboard başlangıç değeri olarak önbelleğe alınmış değeri kullanır ve animasyona animasyonu başlar.

Performans

Bir Sayfadan Uzaklaştıktan Sonra Animasyonlar Çalışmaya Devam Ediyor

Çalışan animasyonlar içeren Page bir'den uzak durarak, bu animasyonlar atık toplanana kadar Page oynat olmaya devam eder. Kullandığınız gezinti sistemine bağlı olarak, uzak gezinen bir sayfa, animasyonları ile kaynakları kullanırken süresiz bir süre bellekte kalabilir. Bu en çok, bir sayfada sürekli çalışan ("çevresel") animasyonlar olduğunda fark edilebilir.

Bu nedenle, bir sayfadan uzaklaşan Unloaded animasyonları kaldırmak için olayı kullanmak iyi bir fikirdir.

Animasyonu kaldırmanın farklı yolları vardır. Aşağıdaki teknikler, bir 'e ait animasyonları kaldırmak için Storyboard kullanılabilir.

Animasyonun nasıl başlatıldıklarına bakılmaksızın bir sonraki teknik kullanılabilir.

  • Animasyonları belirli bir özellikten kaldırmak için yöntemini BeginAnimation(DependencyProperty, AnimationTimeline) kullanın. İlk parametre olarak animasyonlu özelliği ve ikinci null parametre olarak belirtin. Bu, özelliğinden tüm animasyon saatlerini kaldırır.

Özelliklere animasyon ayarlamanın farklı yolları hakkında daha fazla bilgi için bkz. Özellik Animasyon Tekniklerine Genel Bakış.

Compose HandoffBehavior Kullanma Sistem Kaynaklarını Tüketir

kullanarak bir özelliğine , veya uygulayan, daha önce bu özellikle ilişkili tüm nesneler sistem kaynaklarını tüketmeye devam eder; zamanlama sistemi bu saatleri StoryboardAnimationTimeline otomatik olarak AnimationClockComposeHandoffBehaviorClock kaldırmaz.

kullanarak çok sayıda saat uygulayan performans sorunlarını önlemek için, bunlar tamamlandıktan sonra animasyonlu özellikten Compose oluşturma saatlerini kaldırmanız gerekir. Bir saati kaldırmanın birkaç yolu vardır.

Bu öncelikli olarak uzun ömrü olan nesnelerdeki animasyonlar için bir sorundur. Bir nesne atık toplanıyorsa, saatlerine de bağlantı kesilir ve atık toplanır.

Saat nesneleri hakkında daha fazla bilgi için bkz. Animasyon ve Zamanlama Sistemine Genel Bakış.

Ayrıca bkz.