Aracılığıyla paylaş

Anahtar çerçeve animasyonları ve geçiş fonksiyonu animasyonları

Doğrusal anahtar çerçeve animasyonları, KeySpline değerine sahip anahtar çerçeve animasyonları veya geçiş işlevleri, yaklaşık olarak aynı senaryo için üç farklı tekniktir: biraz daha karmaşık hale getiren ve başlangıç durumundan bitiş durumuna doğrusal olmayan bir animasyon davranışı içeren bir senaryolu animasyon oluşturma.

Önkoşullar

Storyboard animasyonları konusunu okuduğunuzdan emin olun. Bu konu, StoryBoard animasyonlar kısmında açıklanan animasyon kavramları üzerine inşa edilmiştir ve bu kavramların üzerinden bir daha geçmeyecektir. Örneğin, Görsel Taslaklı animasyonlar, animasyonların, görsel taslakların kaynak olarak nasıl hedeflendiğini, Duration, FillBehavior gibi Zaman Çizelgesi özellik değerlerinin nasıl hedeflendiğini açıklar.

Anahtar çerçeve animasyonlarını kullanarak animasyon oluşturma

Anahtar kare animasyonları, animasyon zaman çizelgesi boyunca bir noktada ulaşılan birden fazla hedef değere izin verir. Başka bir deyişle, her anahtar çerçeve farklı bir ara değer belirtebilir ve ulaşılan son anahtar çerçevesi son animasyon değeridir. Animasyon eklemek için birden çok değer belirterek daha karmaşık animasyonlar oluşturabilirsiniz. Anahtar çerçevesi animasyonları, her animasyon türü için farklı bir KeyFrame alt sınıfı olarak uygulanan farklı ilişkilendirme mantığını da etkinleştirir. Özellikle, her anahtar çerçeve animasyon türünün anahtar çerçevelerini belirtmek için Discrete, Linear, Spline ve Easing çeşitlemeleri vardır. Örneğin, bir Double'ı hedefleyen ve anahtar çerçeveler kullanan bir animasyon belirtmek için DiscreteDoubleKeyFrame, LinearDoubleKeyFrame, SplineDoubleKeyFrame ve EasingDoubleKeyFrame ile anahtar çerçeveler bildirebilirsiniz. Yeni bir anahtar çerçevesine her erişildiğinde ilişkilendirmeyi değiştirmek için tek bir KeyFrames koleksiyonunda bu türlerden herhangi birini ve tümünü kullanabilirsiniz.

İlişkilendirme davranışı için her anahtar çerçevesi, KeyTime süresine ulaşılana kadar ilişkilendirmeyi denetler. O anda değerine de ulaşılır. Ötesinde daha fazla anahtar çerçeve varsa, değer bir dizideki sonraki anahtar çerçevenin başlangıç değeri olur.

Animasyonun başında, KeyTime değeri "0:0:0" olan bir anahtar çerçevesi yoksa, başlangıç değeri özelliğin animasyonsuz değeri ne olursa olsun olur. Bu, Başlangıçtan/Bitişe/yoksaBaşlangıç animasyonunun nasıl davrandığına benzer.

Anahtar çerçeve animasyonunun süresi, anahtar karelerinin herhangi birinde ayarlanan en yüksek KeyTime değerine örtük olarak eşittir. İsterseniz açık bir Süre ayarlayabilirsiniz, ancak kendi anahtar çerçevelerinizdeki KeyTime değerinden kısa olmadığından emin olun, yoksa animasyonun bir kısmını kesmiş olursunuz.

Süre dışında, anahtar kare animasyon sınıfları da Zaman Çizelgesi tabanlı tüm özellikleri bir anahtar kare animasyonu üzerinde ayarlayabilirsiniz çünkü bu sınıflar Zaman Çizelgesi’nden türetilmiştir. Bunlar şunlardır:

  • AutoReverse: Son anahtar çerçeveye ulaşıldığında, kareler sonundan ters sırada yinelenir. Bu, animasyonun görünür süresini iki katına çıkartır.
  • BeginTime: Animasyonun başlamasını geciktirer. Çerçevelerdeki KeyTime değerlerinin zaman çizelgesi BeginTime'a ulaşılana kadar saymaya başlamaz, bu nedenle çerçeveleri kesme riski yoktur
  • FillBehavior: Son anahtar çerçeveye ulaşıldığında ne olacağını denetler. FillBehavior'ın ara anahtar çerçeveleri üzerinde hiçbir etkisi yoktur.
  • RepeatBehavior:
    • Sonsuza kadar olarak ayarlanırsa, anahtar kareler ve zaman çizelgeleri sonsuz olarak yineler.
    • Yineleme sayısına ayarlanırsa, zaman çizelgesi bunu birçok kez yineler.
    • Süre olarak ayarlanırsa, zaman çizelgesi bu süreye ulaşılana kadar yineler. Zaman çizelgesinin örtük süresi tamsayı olmayan bir faktörse, bu, animasyonu anahtar kareler dizisi boyunca kısaltabilir.
  • SpeedRatio (yaygın olarak kullanılmaz)

Doğrusal anahtar çerçeveler

Doğrusal anahtar çerçeveler, çerçevenin KeyTime değerine ulaşılana kadar değerin basit bir doğrusal ilişkilendirmesine neden olur. Bu enterpolasyon davranışı, Görsel Taslak animasyonlar konusunda açıklanan daha basit //By animasyonlarına en benzer davranıştır.

Doğrusal anahtar çerçeveleri kullanarak dikdörtgenin işleme yüksekliğini ölçeklendirmek için anahtar çerçevesi animasyonunu şu şekilde kullanabilirsiniz. Bu örnek, dikdörtgenin yüksekliğinin ilk 4 saniye boyunca biraz ve doğrusal olarak arttığı, ardından dikdörtgen başlangıç yüksekliğinin iki katı olana kadar son saniye için hızla ölçeklendirildiği bir animasyon çalıştırır.

<StackPanel>
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimationUsingKeyFrames
              Storyboard.TargetName="myRectangle"
              Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                <LinearDoubleKeyFrame Value="1" KeyTime="0:0:0"/>
                <LinearDoubleKeyFrame Value="1.2" KeyTime="0:0:4"/>
                <LinearDoubleKeyFrame Value="2" KeyTime="0:0:5"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </StackPanel.Resources>
</StackPanel>

Ayrık anahtar çerçeveler

Ayrık anahtar çerçeveler hiçbir ilişkilendirme kullanmaz. Bir KeyTime'a ulaşıldığında, yeni Değer basitçe uygulanır. Animasyonlu kullanıcı arabirimi özelliğine bağlı olarak, bu genellikle "atlama" olarak görünen bir animasyon oluşturur. Bunun gerçekten istediğiniz estetik davranış olduğundan emin olun. Bildirdiğiniz anahtar kare sayısını artırarak görünür atlamaları en aza indirebilirsiniz, ancak hedefiniz düz bir animasyonsa, bunun yerine doğrusal veya spline anahtar çerçeveleri kullanmak daha iyi olabilir.

Uyarı

Ayrık anahtar çerçeveler, DiscreteObjectKeyFrame ile Çift, Nokta ve Renk türünde olmayan bir değere animasyon eklemenin tek yoludur. Bunu bu konunun ilerleyen bölümlerinde daha ayrıntılı olarak ele alacağız.

Spline anahtar çerçeveler

Spline anahtar çerçevesi , KeySpline özelliğinin değerine göre değerler arasında değişken bir geçiş oluşturur. Bu özellik, animasyonun hızlandırmasını açıklayan Bezier eğrisinin birinci ve ikinci denetim noktalarını belirtir. Temel olarak KeySpline, Bezier eğrisinin şekli olan işlev-zaman grafiğiyle zaman içinde işlevin ilişkisini tanımlar. Genellikle bir XAML kısaltma öznitelik dizesinde boşluk veya virgülle ayrılmış dört Double değeri olan bir KeySpline değeri belirtirsiniz. Bu değerler Bezier eğrisinin iki denetim noktası için "X,Y" çiftleridir. "X" saat, "Y" ise değerin işlev değiştiricisi. Her değer her zaman 0 ile 1 (dahil) arasında olmalıdır. Bir KeySpline'da denetim noktası değişikliği yapılmazsa, 0,0 ile 1,1 arasında düz çizgi, doğrusal ilişkilendirme için zaman içinde bir işlevin gösterimidir. Denetim noktalarınız bu eğrinin şeklini ve dolayısıyla spline animasyonu için işlevin zaman içindeki davranışını değiştirir. Bunu görsel olarak grafik olarak görmek muhtemelen en iyisidir.

Bu sonraki örnekte, animasyona uygulanan üç farklı anahtar kare gösterilmektedir ve sonuncusu Çift değer için anahtar spline animasyonu (SplineDoubleKeyFrame) şeklindedir. KeySpline için uygulanan "0.6,0.0 0.9,0.00" dizesini not edin. Bu, animasyonların ilk başta yavaş çalışıyor gibi göründüğü ancak ardından KeyTime'a ulaşmadan hemen önce değere hızla ulaştığı bir eğri oluşturur.

<Storyboard x:Name="myStoryboard">
    <!-- 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" EnableDependentAnimation="True">

        <!-- Using a LinearDoubleKeyFrame, the rectangle moves 
            steadily from its starting position to 500 over 
            the first 3 seconds.  -->
        <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3"/>

        <!-- Using a DiscreteDoubleKeyFrame, the rectangle suddenly 
            appears at 400 after the fourth second of the animation. -->
        <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4"/>

        <!-- Using a SplineDoubleKeyFrame, the rectangle moves 
            back to its starting point. The
            animation starts out slowly at first and then speeds up. 
            This KeyFrame ends after the 6th second. -->
        <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:6"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

Anahtar çerçeveleri kolaylaştırma

Kolaylaştırma anahtar çerçevesi, ilişkilendirmenin uygulandığı bir anahtar çerçevedir ve ilişkilendirmenin zaman içindeki işlevi önceden tanımlanmış birkaç matematiksel formül tarafından denetlenmektedir. Aslında, bazı kolaylaştırma işlev türlerinde olduğu gibi spline anahtar çerçevesiyle de aynı sonucu elde edebilirsiniz, ancak bir spline ile yeniden oluşturamayabileceğiniz BackEase gibi bazı kolaylaştırma işlevleri de vardır.

Bir kolaylaştırma işlevini bir kolaylaştırma anahtar çerçevesine uygulamak için , EasingFunction özelliğini bu anahtar çerçevesi için XAML'de bir özellik öğesi olarak ayarlarsınız. değeri için, kolaylaştırma işlev türlerinden biri için bir nesne öğesi belirtin.

Bu örnek, DoubleAnimation üzerinde ardışık anahtar kareler olarak önce bir CubicEase ve ardından bir BounceEase uygulayarak bir zıplatma efekti oluşturur.

<Storyboard x:Name="myStoryboard">
    <DoubleAnimationUsingKeyFrames Duration="0:0:10"
        Storyboard.TargetProperty="Height"
        Storyboard.TargetName="myEllipse">

        <!-- This keyframe animates the ellipse up to the crest 
            where it slows down and stops. -->
        <EasingDoubleKeyFrame Value="-300" KeyTime="00:00:02">
            <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>

        <!-- This keyframe animates the ellipse back down and makes
            it bounce. -->
        <EasingDoubleKeyFrame Value="0" KeyTime="00:00:06">
            <EasingDoubleKeyFrame.EasingFunction>
                <BounceEase Bounces="5"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

Bu yalnızca bir kolaylaştırma işlevi örneğidir. Sonraki bölümde daha fazlasını ele alacağız.

Kolaylaştırma işlevleri

Kolaylaştırma işlevleri, animasyonlarınıza özel matematiksel formüller uygulamanıza olanak sağlar. Matematiksel işlemler genellikle 2-B koordinat sisteminde gerçek dünya fiziği simülasyonu sağlayan animasyonlar üretmek için yararlıdır. Örneğin, bir nesnenin gerçekçi bir şekilde sıçramasını veya bir yaydaymış gibi davranmasını isteyebilirsiniz. Bu efektleri yaklaşık olarak taklit etmek için anahtar kareyi veya hatta From/To/By animasyonlarını kullanabilirsiniz, ancak bu önemli miktarda çalışma gerektirir ve animasyon, matematiksel bir formül kullanmaktan daha az doğru olur.

Kolaylaştırma işlevleri animasyonlara üç şekilde uygulanabilir:

Aşağıda, kolaylaştırma işlevlerinin listesi yer alıyor:

  • BackEase: Animasyon belirtilen yola göre ilerlemeye başlamadan hemen önce hareketi biraz geri çekilip yoluna devam eder.
  • BounceEase: Sıçrayan bir efekt oluşturur.
  • CircleEase: Dairesel bir işlev kullanarak hızlandıran veya yavaşlatan bir animasyon oluşturur.
  • CubicEase: f(t) = t3 formülünü kullanarak hızlandıran veya yavaşlatan bir animasyon oluşturur.
  • ElasticEase: Dinlenmeye gelene kadar ileri geri salınan bir yay gibi bir animasyon oluşturur.
  • ExponentialEase: Üstel formül kullanarak hızlandıran veya yavaşlatan bir animasyon oluşturur.
  • PowerEase: f(t) = tp formülünü kullanarak hızlandıran veya yavaşlatan bir animasyon oluşturur; burada p , Power özelliğine eşittir.
  • QuadraticEase: f(t) = t2 formülünü kullanarak hızlandıran veya yavaşlatan bir animasyon oluşturur.
  • QuarticEase: f(t) = t4 formülünü kullanarak hızlandıran veya yavaşlatan bir animasyon oluşturur.
  • QuinticEase: f(t) = t5 formülünü kullanarak hızlandıran veya yavaşlatan bir animasyon oluşturun.
  • SineEase: Sinüs formülü kullanarak hızlandıran veya yavaşlatan bir animasyon oluşturur.

Bazı kolaylaştırma işlevlerinin kendi özellikleri vardır. Örneğin, BounceEase işlevinin zaman içindeki davranışını değiştiren Bounces ve Bounciness olmak üzere iki özelliği vardır. CubicEase gibi diğer kolaylaştırma işlevleri, tüm kolaylaştırma işlevlerinin paylaştığı EasingMode özelliği dışında özelliklere sahip değildir ve her zaman zaman içinde aynı işlevi oluşturur.

Bu kolaylaştırma işlevlerinden bazıları, özelliklere sahip kolaylaştırma işlevlerinde özellikleri nasıl ayarladığınıza bağlı olarak belirli bir dereceye kadar çakışabilir. Örneğin, QuadraticEase, PowerEase ve Power değeri 2'ye eşit olan bir PowerEase ile tam olarak aynıdır. Ve CircleEase temelde bir varsayılan değer ExponentialEase'dir.

BackEase kolaylaştırma işlevi benzersizdir çünkü Başlangıç/Bitiş veya anahtar karelerin değerleriyle ayarlandığı şekilde normal aralığın dışındaki değeri değiştirebilir. Normal From/To davranışından beklenildiği gibi, ters yönde bir değeri değiştirerek animasyonu başlatır, ardından tekrar From veya başlangıç değerine geri döner ve animasyonu normal bir şekilde çalıştırır.

Önceki bir örnekte, anahtar kare animasyonu için bir kolaylaştırıcı işlevin nasıl tanımlandığını gösterdik. Bu örnek, bir From/To/By animasyonuna bir geçiş fonksiyonu uygular.

<StackPanel x:Name="LayoutRoot" Background="White">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation From="30" To="200" Duration="00:00:3" 
                Storyboard.TargetName="myRectangle" 
                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                <DoubleAnimation.EasingFunction>
                    <BounceEase Bounces="2" EasingMode="EaseOut" 
                                Bounciness="2"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle x:Name="myRectangle" Fill="Blue" Width="200" Height="30"/>
</StackPanel>

Bir Başlangıç/Hedef/By animasyonuna kolaylaştırma işlevi uygulandığında, bu işlev, animasyonun Süresi boyunca değerlerin Başlangıç ve Hedef değerleri arasında nasıl geçiş yaptığına dair zamanla değişen karakteristiklerini değiştirir. Bir kolaylaştırma işlevi olmadan, bu doğrusal bir ilişkilendirme olur.

Ayrık nesne değeri animasyonları

Bir animasyon türü, Çift, Nokta veya Renk türünde olmayan özelliklere animasyonlu değer uygulayabilmenizin tek yolu olduğundan özel bahsetmeyi hak eder. Bu, ObjectAnimationUsingKeyFrames anahtar çerçevesi animasyonudur. Nesne değerlerini kullanarak animasyon yapmak farklıdır çünkü çerçeveler arasındaki değerleri enterpole etme olasılığı yoktur. Çerçevenin KeyTime değerine ulaşıldığında, animasyonlu değer hemen anahtar çerçevenin Değeri'nde belirtilen değere ayarlanır. İlişkilendirme olmadığından ObjectAnimationUsingKeyFrames anahtar çerçeveleri koleksiyonunda kullandığınız tek bir anahtar çerçeve vardır: DiscreteObjectKeyFrame.

Bir DiscreteObjectKeyFrame Değeri genellikle özellik öğesi söz dizimi kullanılarak ayarlanır, çünkü ayarlamaya çalıştığınız nesne değeri öznitelik söz diziminde Değer'i doldurabilecek bir dize şeklinde ifade edilemez. StaticResource gibi bir başvuru kullanıyorsanız öznitelik söz dizimlerini kullanmaya devam edebilirsiniz.

Varsayılan şablonlarda kullanılan ObjectAnimationUsingKeyFrames'i görebileceğiniz bir yer, bir şablon özelliğinin bir Brush kaynağına başvurmasıdır. Bu kaynaklar yalnızca Color değeri değil SolidColorBrush nesneleridir ve sistem temaları (ThemeDictionaries) olarak tanımlanan kaynakları kullanır. Bunlar textBlock.Foregroundgibi fırça türündeki bir değere doğrudan atanabilir ve dolaylı hedeflemeyi kullanmaları gerekmez. Ancak SolidColorBrushDouble, Point veya Color olmadığından, kaynağı kullanmak için ObjectAnimationUsingKeyFrames kullanmanız gerekir.

<Style x:Key="TextButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="Transparent">
                    <TextBlock x:Name="Text"
                        Text="{TemplateBinding Content}"/>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ApplicationPointerOverForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ApplicationPressedForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
...
                       </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Numaralandırma değeri kullanan özelliklere animasyon eklemek için ObjectAnimationUsingKeyFrames de kullanabilirsiniz. Windows Çalışma Zamanı varsayılan şablonlarından gelen adlandırılmış stilden başka bir örnek aşağıda verilmiştir. Görünürlük özelliğinin Görünürlük numaralandırma sabitini nasıl aldığına dikkat edin. Bu durumda, öznitelik söz dizimini kullanarak değeri ayarlayabilirsiniz. Bir sabit listesi değerine sahip bir özelliği ayarlamak için yalnızca numaralandırmadaki nitelenmemiş sabit ada ihtiyacınız vardır, örneğin "Daraltıldı".

<Style x:Key="BackButtonStyle" TargetType="Button">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="Button">
          <Grid x:Name="RootGrid">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
...           <VisualState x:Name="Disabled">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame Value="Collapsed" KeyTime="0"/>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
...
          </VisualStateManager.VisualStateGroups>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

ObjectAnimationUsingKeyFrames çerçeve kümesi için birden fazla DiscreteObjectKeyFrame kullanabilirsiniz. Bu, birden çok nesne değerinin yararlı olabileceği bir örnek senaryo olarak Image.Source değerinin animasyonunu oluşturarak "slayt gösterisi" animasyonu oluşturmanın ilginç bir yolu olabilir.

  • Last updated on