Aracılığıyla paylaş

Storyboard animasyonlar

Görsel taslaklı animasyonlar yalnızca görsel anlamdaki animasyonlar değildir. Görsel taslak animasyon, bağımlılık özelliğinin değerini zamanın işlevi olarak değiştirmenin bir yoludur. Animasyon kitaplığından olmayan görsel taslaklı bir animasyona ihtiyacınız olmasının temel nedenlerinden biri, denetim şablonunun veya sayfa tanımının bir parçası olarak denetimin görsel durumunu tanımlamaktır.

Senaryolaştırılmış animasyonları tanımlama

Görsel taslak animasyon, bağımlılık özelliğinin değerini zamanın işlevi olarak değiştirmenin bir yoludur. Animasyon eklediğiniz özellik her zaman uygulamanızın kullanıcı arabirimini doğrudan etkileyen bir özellik değildir. Ancak XAML, bir uygulama için kullanıcı arabirimi tanımlamakla ilgili olduğundan, genellikle kullanıcı arabirimiyle ilgili bir özellik olarak animasyon eklersiniz. Örneğin, RotateTransform'un açısına veya düğmenin arka planının renk değerine animasyon uygulayabilirsiniz.

Storyboard kullanılarak animasyon tanımlamanızın ana nedenlerinden biri, kontrol tasarımcısı olmanız veya bir kontrolün şablonunu yeniden oluşturmanız ve görsel durumları tanımlamanızdır. Daha fazla bilgi için Görsel durumlar için hikaye tahtası animasyonları bölümüne bakın.

Görsel durumları veya bir uygulama için özel animasyon tanımlarken, bu konu başlığında açıklanan görsel taslak animasyonlar için kavramlar ve API'ler çoğunlukla ikisine de uygulanır.

Animasyonlu olmak için, görsel taslaklı animasyonla hedeflediğiniz özelliğin bağımlılık özelliği olması gerekir. Bağımlılık özelliği, Windows Çalışma Zamanı XAML uygulamasının önemli bir özelliğidir. Çoğu yaygın kullanıcı arabirimi öğesinin yazılabilir özellikleri genellikle bağımlılık özellikleri olarak uygulanır; böylece bunlara animasyon ekleyebilir, veriye bağlı değerler uygulayabilir veya Bir Stil uygulayıp özelliği bir Ayarlayıcı ile hedefleyebilirsiniz. Bağımlılık özelliklerinin nasıl çalıştığı hakkında daha fazla bilgi için bkz . Bağımlılık özelliklerine genel bakış.

Çoğu zaman XAML yazarak görsel taslaklı bir animasyon tanımlarsınız. Microsoft Visual Studio gibi bir araç kullanırsanız, sizin için XAML'yi oluşturur. Kod kullanarak görsel taslak animasyon tanımlamak da mümkündür, ancak bu daha az yaygındır.

Şimdi basit bir örneğe bakalım. Bu XAML örneğinde , Opaklık özelliği belirli bir Rectangle nesnesinde animasyonludur.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>

  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

Animasyon eklemek için nesneyi tanımlama

Önceki örnekte görsel taslak, dikdörtgeninOpaklık özelliğinin animasyonunu yapıyordu. Nesnenin kendisinde animasyonları bildirmezsiniz. Bunun yerine, bunu bir senaryo panosunun animasyon tanımında yaparsınız. Storyboard'lar genellikle animasyon yapılacak nesnenin XAML kullanıcı arabirimi tanımının hemen yakınında olmayan XAML'de tanımlanır. Bunun yerine genellikle XAML kaynağı olarak ayarlanırlar.

Bir animasyonu hedefe bağlamak için, hedefe tanımlayıcı programlama adıyla başvurursunuz. Animasyon eklemek istediğiniz nesneyi adlandırmak için her zaman XAML kullanıcı arabirimi tanımında x:Name özniteliğini uygulamanız gerekir. Ardından animasyon tanımı içinde Storyboard.TargetName ayarını yaparak animasyon eklemek için nesneyi hedeflersiniz. Storyboard.TargetName değeri için, x:Name özniteliğiyle daha önce ve başka bir yerde ayarladığınız hedef nesnenin ad dizesini kullanırsınız.

Animasyon eklemek için bağımlılık özelliğini hedefleme

Animasyonda Storyboard.TargetProperty için bir değer ayarlarsınız. Bu, hedeflenen nesnenin hangi özel özelliğinin animasyonlu olduğunu belirler.

Bazen hedef nesnenin hemen bir özelliği olmayan ama nesne-özellik ilişkisinde daha derin iç içe yerleştirilmiş bir özelliği hedeflemeniz gerekir. Animasyonlu bir özellik türüne (Çift, Nokta, Renk) başvuruda bulununana kadar katkıda bulunan nesne ve özellik değerleri kümesinde detaya gitmek için genellikle bunu yapmanız gerekir. Bu kavram dolaylı hedefleme olarak adlandırılır ve bir özelliği bu şekilde hedefleme söz dizimi özellik yolu olarak bilinir.

İşte bir örnek. Görsel taslaklı animasyonun yaygın senaryolarından biri, denetimin belirli bir durumda olduğunu göstermek için uygulama kullanıcı arabiriminin veya denetimin bir bölümünün rengini değiştirmektir. TextBlock'unÖn Planına animasyon eklemek istediğinizi ve böylece kırmızıdan yeşile dönüşmesini istediğinizi varsayalım. Bir ColorAnimation'ın dahil olmasını beklersiniz ve bu doğrudur. Ancak, nesnenin rengini etkileyen kullanıcı arabirimi öğelerindeki özelliklerin hiçbiri aslında Color türünde değildir. Bunun yerine, Bunlar Brush türündedir. Bu nedenle, animasyon için hedeflemeniz gereken şey, genellikle bu renkle ilgili kullanıcı arabirimi özellikleri için kullanılan Brush türetilmiş bir tür olan SolidColorBrush sınıfının Color özelliğidir. Animasyonunuzun özelliklerini hedeflemek için bir özellik yolu oluşturma işte böyle görünür:

<Storyboard x:Name="myStoryboard">
  <ColorAnimation
    Storyboard.TargetName="tb1"
    Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
    From="Red" To="Green"/>
</Storyboard>

Bu söz dizimini bölümleri açısından şöyle düşünebilirsiniz:

  • Her () parantez kümesi bir özellik adı içine alır.
  • Özellik adının içinde bir nokta vardır ve bu nokta bir tür adı ile özellik adını birbirinden ayırarak tanımladığınız özelliğin net olmamasını sağlar.
  • Parantez içinde olmayan ortadaki nokta bir adımdır. Bu, söz dizimi tarafından şu anlama gelir: ilk özelliğin değerini alır, nesne modeline giriş yapar ve ilk özelliğin değerinin belirli bir alt özelliğini hedef alır.

Muhtemelen dolaylı özellik hedeflemeyi kullanacağınız animasyon hedefleme senaryolarının ve kullanacağınız söz dizimine yakın olan bazı özellik yolu dizelerinin listesi aşağıdadır:

Bu örneklerden bazılarının sayıların çevresinde köşeli ayraçlar kullandığını fark edeceksiniz. Bu bir dizin oluşturucudur. Bu, kendinden önceki özellik adının bir koleksiyonu değer olarak taşıdığını ve bu koleksiyondan bir öğeyi (sıfır bazlı indekse göre tanımlanmış) seçmek istediğinizi gösterir.

Ekli XAML özelliklerine animasyon da ekleyebilirsiniz. Her zaman tam ekli özellik adını parantez içine alın, örneğin (Canvas.Left). Daha fazla bilgi için bkz. XAML ekli özellikleri animasyon yapma.

Bir özelliği animasyonla dolaylı yoldan hedeflemek için bir özellik yolunu nasıl kullanacağınız hakkında daha fazla bilgi almak için bkz. Özellik yolu söz dizimi.

Animasyon türleri

Windows Çalışma Zamanı animasyon sistemi, görsel taslak animasyonların uygulanabileceği üç özel türe sahiptir:

Ayrıca, nesne başvurusu değerleri için daha sonra ele alacağımız genelleştirilmiş bir Nesne animasyon türü de vardır.

Animasyonlu değerleri belirtme

Şu ana kadar size nesneyi ve animasyon yapılacak özelliği nasıl hedefleyeceğinizi gösterdik, ancak animasyon çalıştığında özellik değerine ne olduğunu henüz açıklamadık.

Açıkladığımız From/To/By animasyon türleri bazen bu şekilde adlandırılır. Bu, animasyonun zaman içinde animasyon tanımından gelen şu girişlerden birini veya daha fazlasını kullanarak bir özelliğin değerini değiştirdiğini gösterir:

  • Değer Başlangıç değerinden başlar. Kimden değeri belirtmezseniz, başlangıç değeri animasyon özelliğinin animasyon çalışmadan önce sahip olduğu değerdir. Bu varsayılan bir değer, stil veya şablondan bir değer ya da XAML UI tanımı veya uygulama kodu tarafından özel olarak uygulanan bir değer olabilir.
  • Animasyonun sonunda değer Bitiş değeridir.
  • Veya başlangıç değerine göre bir bitiş değeri belirtmek için By özelliğini ayarlayın. Bunu To özelliği yerine ayarlarsınız.
  • Eğer bir To değeri veya bir By değeri belirtmezseniz, bitiş değeri, animasyon başlamadan önce animasyon özelliğinin sahip olduğu herhangi bir değerdir. Bu durumda from değerine sahip olmanız daha iyi olur çünkü aksi takdirde animasyon değeri hiç değiştirmez; başlangıç ve bitiş değerleri aynıdır.
  • Bir animasyon genellikle en az bir From, By veya To içerir, ancak hiçbir zaman üçünü birden içermez.

Önceki XAML örneğini tekrar gözden geçirelim ve Başlangıç ve Bitiş değerlerine, ayrıca Süre'ye göz atalım. Örnek, Opaklık özelliğinin animasyonunu oluşturur ve Opaklık özellik türü Double olur. Bu nedenle burada kullanılacak animasyon DoubleAnimation'dır.

From="1.0" To="0.0" , animasyon çalıştırıldığında Opacity özelliğinin 1 değerinden başlamasını ve 0'a doğru animasyonla değişmesini belirtir. Başka bir deyişle, bu Double değerlerinin Opacity özelliği için anlamı bakımından, bu animasyon nesnenin opak başlamasına ve saydam olarak solmasına neden olur.

...
<Storyboard x:Name="myStoryboard">
  <DoubleAnimation
    Storyboard.TargetName="MyAnimatedRectangle"
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:1"/>
</Storyboard>
...

Duration="0:0:1" animasyonunun ne kadar süreceğini, yani dikdörtgenin ne kadar hızlı solduğunu belirtir. Duration özelliği hours:minutes:seconds biçiminde belirtilir. Bu örnekteki süre bir saniyedir.

Süre değerleri ve XAML söz dizimi hakkında daha fazla bilgi için bkz. Süre.

Uyarı

Gösterdiğimiz örnekte, animasyonlu nesnenin başlangıç durumunun varsayılan veya açık olarak ayarlanmış Saydamlık değerinin her zaman 1'e eşit olduğundan eminseniz, Başlangıç değerini atlayabilirsiniz, animasyon varsayılan başlangıç değerini kullanır ve sonuç aynı olur.

Kimden/Kime/Tarafından boş değer atanabilir

Daha önce From, To veya By değerlerini atlayabileceğinizi ve bu nedenle eksik bir değerin yerine geçerli animasyonsuz değerleri kullanabileceğinizi belirtmiştik. Bir animasyonun Kimden, Kime veya Aracılığıyla özellikleri, tahmin edebileceğiniz türde değildir. Örneğin , DoubleAnimation.To özelliğinin türü Double değildir. Bunun yerine, Double için Nullable. Varsayılan değeri 0 değil null değeridir. Bu null değer, animasyon sisteminin From, To veya By özelliği için özel olarak bir değer ayarlamadığınızdan nasıl ayırt ettiğidir.

Animasyonun diğer özellikleri

Bu bölümde açıklanan sonraki özelliklerin tümü, çoğu animasyon için uygun varsayılan değerlere sahip olmaları için isteğe bağlıdır.

AutoReverse

Bir animasyonda AutoReverse veya RepeatBehavior belirtmezseniz, bu animasyon bir kez çalıştırılır ve Süre olarak belirtilen süre boyunca çalıştırılır.

AutoReverse özelliği, zaman çizelgesinin Süresi sonuna ulaştıktan sonra ters oynatılıp oynatılmayacağını belirtir. Doğru olarak ayarlarsanız, animasyon bildirilen Süre sonuna ulaştığında tersine döner ve değerini bitiş değerinden (To) başlangıç değerine (From) geri değiştirir. Bu, animasyonun Süresinin iki katı kadar etkili bir şekilde çalıştığı anlamına gelir.

RepeatBehavior

RepeatBehavior özelliği, bir zaman çizelgesinin kaç kez yürütüldüğünü veya zaman çizelgesinin içinde yinelenmesi gereken daha uzun bir süreyi belirtir. Varsayılan olarak, bir zaman çizelgesinin yineleme sayısı "1x" olur; bu da Süresi için bir kez oynatıldığı ve yinelenmediği anlamına gelir.

Animasyonların birden çok yineleme çalıştırmasına neden olabilirsiniz. Örneğin, "3x" değeri animasyonun üç kez çalışmasına neden olur. İsterseniz RepeatBehavior için farklı bir Süre belirtebilirsiniz. Bu Süre, animasyonun Süresinden daha uzun olmalıdır. Örneğin, Süresi "0:0:2" olan bir animasyon için "0:0:10" RepeatBehavior belirtirseniz, bu animasyon beş kez yineler. Eğer bunlar eşit olarak bölünmezse, animasyon RepeatBehavior zamanına ulaşıldığı sırada yarıda kesilebilir. Son olarak, animasyon kasıtlı olarak durdurulana kadar sonsuz bir şekilde çalışmasına neden olan "Forever" özel değerini belirtebilirsiniz.

RepeatBehavior değerleri ve XAML söz dizimi hakkında daha fazla bilgi için bkz. RepeatBehavior.

FillBehavior="Stop"

Varsayılan olarak, bir animasyon sona erdiğinde, süresi aşıldıktan sonra bile animasyon, özellik değerini son Hedef veya Değeriyle değiştirilmiş haliyle bırakır. Ancak FillBehavior özelliğinin değerini FillBehavior.Stop olarak ayarlarsanız, animasyonlu değerin değeri animasyon uygulanmadan önceki değere veya bağımlılık özellik sistemi tarafından belirlenen geçerli etkin değere geri döner (bu ayrım hakkında daha fazla bilgi için bkz . Bağımlılık özelliklerine genel bakış).

BaşlangıçZamanı

Varsayılan olarak, animasyonun BeginTime değeri "0:0:0"dır, bu nedenle Storyboard çalıştığı anda başlar. Görsel Taslak birden fazla animasyon içeriyorsa ve diğerlerinin başlangıç zamanlarını ilk animasyonla karşılaştırmak veya kasıtlı olarak kısa bir gecikme oluşturmak istiyorsanız bunu değiştirebilirsiniz.

SpeedRatio

Görsel Taslak'ta birden fazla animasyon varsa, Görsel Taslak'a göre bir veya daha fazla animasyonun zaman hızını değiştirebilirsiniz. Animasyonlar çalıştırılırken Süre süresinin nasıl dolduğunu kontrol eden üst Görsel Taslaktır. Bu özellik çok sık kullanılmaz. Daha fazla bilgi için bkz . SpeedRatio.

Görsel Taslak'ta birden fazla animasyon tanımlama

Görsel Taslak içeriği birden fazla animasyon tanımı olabilir. Aynı hedef nesnenin iki özelliğine ilgili animasyonlar uyguluyorsanız birden fazla animasyona sahip olabilirsiniz. Örneğin, ui öğesinin RenderTransform olarak kullanılan TranslateTransform'un hem TranslateX hem de TranslateY özelliklerini değiştirebilirsiniz; bu, öğenin çapraz çevirmesine neden olur. Bunu gerçekleştirmek için iki farklı animasyona ihtiyacınız vardır, ancak her zaman bu iki animasyonun birlikte çalıştırılmasını istediğiniz için animasyonların aynı Görsel Taslak'ın parçası olmasını isteyebilirsiniz.

Animasyonların aynı türde olması veya aynı nesneyi hedeflemesi gerekmez. Farklı sürelere sahip olabilirler ve özellik değerlerini paylaşmaları gerekmez.

Ana Storyboard çalıştırıldığında, içindeki animasyonların her biri de çalışır.

Görsel Taslak sınıfı aslında animasyon türleriyle aynı animasyon özelliklerine sahiptir çünkü her ikisi de Zaman Çizelgesi temel sınıfını paylaşır. Bu nedenle, bir Storyboard üzerinde RepeatBehavior veya BeginTime bulunabilir. Ancak, kapsanan tüm animasyonların bu davranışa sahip olmasını istemediğiniz sürece bunları genellikle görsel taslakta ayarlamazsınız. Genel bir kural olarak, bir Görsel Taslak üzerinde ayarlanan herhangi bir Zaman Çizelgesi özelliği, tüm alt animasyonlar için geçerlidir. Eğer ayarlanmamışsa, Storyboard, kapsanan animasyonların en uzun Süre değerinden hesaplanan örtük bir süreye sahiptir. Bir süre açıkça ayarlanmış bir Storyboard'da, alt animasyonlarından birinden daha kısaysa, bu animasyonun kesilmesine neden olur ve bu genellikle tercih edilmez.

Görsel taslak, aynı nesne üzerinde aynı özelliği hedeflemeye ve animasyon yapmaya çalışan iki animasyon içeremez. Bunu denerseniz, storyboard çalıştırılmaya çalışıldığında bir çalışma zamanı hatası alırsınız. Bu kısıtlama, animasyonlar kasıtlı olarak farklı BeginTime değerleri ve süreleri nedeniyle zaman içinde çakışmasa bile geçerlidir. Tek bir görsel taslaktaki aynı özelliğe daha karmaşık bir animasyon zaman çizelgesi uygulamak istiyorsanız, bunu gerçekleştirmenin yolu bir anahtar kare animasyonu kullanmaktır. Bkz. Anahtar çerçevesi ve kolaylaştırma işlevi animasyonları.

Bu girişler birden çok görsel taslaktan geliyorsa, animasyon sistemi bir özelliğin değerine birden fazla animasyon uygulayabilir. Görsel taslakları aynı anda çalıştırmak için bu davranışı kasıtlı olarak kullanmak yaygın değildir. Ancak, denetim özelliğine uyguladığınız uygulama tanımlı bir animasyonun, daha önce denetimin görsel durum modelinin bir parçası olarak çalıştırılan bir animasyonun HoldEnd değerini değiştirmesi mümkündür.

Storyboard'u kaynak olarak tanımlamak

Görsel Taslak, animasyon nesnelerini yerleştirdiğiniz kapsayıcıdır. Genellikle Storyboard'u animasyon eklemek istediğiniz nesnenin kullanabileceği bir kaynak olarak, sayfa düzeyinde Resources veya Application.Resources içinde tanımlarsınız.

Bu sonraki örnekte, önceki örnek Görsel Taslak'ın sayfa düzeyinde kaynaklar tanımında nasıl yer aldığı ve Görsel Taslak'ın kök Sayfanın anahtarlı kaynağı olduğu gösterilir. x:Name özniteliğine dikkat edin. Bu öznitelik, XAML'deki diğer öğelerin ve kodun daha sonra Görsel Taslak'a başvurabilmesi için Görsel Taslak için bir değişken adı tanımlama yöntemidir.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>
  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

Page.xaml veya app.xaml gibi bir XAML dosyasının XAML kökünde kaynak tanımlamak, XAML'nizdeki anahtarlı kaynakları düzenlemeye yönelik yaygın bir uygulamadır. Ayrıca kaynakları ayrı dosyalar halinde hesaba katabilir ve bunları uygulamalar veya sayfalarla birleştirebilirsiniz. Daha fazla bilgi için bkz . ResourceDictionary ve XAML kaynak başvuruları.

Uyarı

Windows Çalışma Zamanı XAML, x:Key özniteliğini veya x:Name özniteliğini kullanarak kaynakları tanımlamayı destekler. Bir Storyboard için x:Name özniteliğini kullanmak daha yaygındır, çünkü sonunda değişken adına göre başvurmak isteyeceksiniz, böylece Begin yöntemini çağırabilir ve animasyonları çalıştırabilirsiniz. x:Key özniteliğini kullanıyorsanız, Öğe dizin oluşturucu gibi ResourceDictionary yöntemlerini kullanarak bunu anahtarlı kaynak olarak almanız ve ardından alınan nesneyi Görsel Taslak yöntemlerini kullanmak üzere Görsel Taslak'a atamanız gerekir.

Görsel durumlar için hikaye panoları

Ayrıca, bir denetimin görsel görünümü için görsel durum animasyonlarını bildirirken animasyonlarınızı bir Storyboard birimine eklersiniz. Bu durumda tanımladığınız Görsel Taslak öğeleri, Bir Stil içinde daha derin iç içe yerleştirilmiş bir VisualState kapsayıcısına gider (anahtarlı kaynak Stildir). Bu durumda Görsel Taslak için bir anahtara veya ada ihtiyacınız yoktur çünkü VisualStateManager'ın çağırabileceği hedef ada sahip olan VisualState'tir. Denetim stilleri genellikle bir sayfaya veya uygulama Kaynakları koleksiyonuna yerleştirilmeyip ayrı XAML ResourceDictionary dosyalarına ayrılır. Daha fazla bilgi için Görsel durumlar için hikaye tahtası animasyonları bölümüne bakın.

Bağımlı ve bağımsız animasyonlar

Bu noktada animasyon sisteminin nasıl çalıştığı hakkında bazı önemli noktaları tanıtmalıyız. Özellikle animasyon, Windows Çalışma Zamanı uygulamasının ekrana nasıl yansıtıldığını ve bu işlemde iş parçacıklarının nasıl kullanıldığını temel olarak etkiler. Windows Çalışma Zamanı uygulamasının her zaman bir ana kullanıcı arabirimi iş parçacığı vardır ve bu iş parçacığı ekranı geçerli bilgilerle güncelleştirmekle sorumludur. Buna ek olarak, bir Windows Çalışma Zamanı uygulaması, düzenlerin gösterilmeden hemen önce hesaplanması için kullanılan bir oluşturma iş parçacığına sahiptir. Kullanıcı arabirimine animasyon eklediğinizde, kullanıcı arabirimi iş parçacığı için çok fazla çalışmaya neden olma olasılığı vardır. Sistem, her yenileme arasındaki oldukça kısa zaman aralıklarını kullanarak ekranın büyük alanlarını yeniden çizmelidir. Bu, animasyonlu özelliğin en son özellik değerini yakalamak için gereklidir. Dikkatli değilseniz, animasyonun kullanıcı arabirimini daha az yanıt verebilir veya aynı kullanıcı arabirimi iş parçacığında bulunan diğer uygulama özelliklerinin performansını etkileme riski vardır.

Kullanıcı arabirimi iş parçacığını yavaşlatma riski olduğu belirlenen çeşitli animasyonlara bağımlı animasyon adı verilir. Bu riske tabi olmayan animasyonlar bağımsız bir animasyondur. Bağımlı ve bağımsız animasyonlar arasındaki ayrım, daha önce açıklandığı gibi yalnızca animasyon türleri (DoubleAnimation vb.) tarafından belirlenmemektedir. Bunun yerine, animasyon uyguladığınız belirli özelliklere ve devralma ile kontrollerin bileşimi gibi diğer faktörlere göre belirlenir. Bir animasyon kullanıcı arabirimini değiştirse bile, animasyonun kullanıcı arabirimi iş parçacığı üzerinde en az etkiye sahip olabileceği ve bunun yerine oluşturma iş parçacığı tarafından bağımsız bir animasyon olarak işlenebileceği durumlar vardır.

Animasyon aşağıdaki özelliklerden herhangi birine sahipse bağımsızdır:

Uyarı

Animasyonunuzun bağımsız olarak ele alınabilmesi için öğesini açıkça ayarlamanız Duration="0"gerekir. Örneğin, bu XAML'den kaldırırsanız Duration="0" , çerçevenin KeyTime değeri "0:0:0" olsa bile animasyon bağımlı olarak değerlendirilir.

<Storyboard>
  <DoubleAnimationUsingKeyFrames
    Duration="0"
    Storyboard.TargetName="Button2"
    Storyboard.TargetProperty="Width">
    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="200"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

Animasyonunuz bu ölçütleri karşılamıyorsa, büyük olasılıkla bağımlı bir animasyondur. Varsayılan olarak, animasyon sistemi bağımlı bir animasyon çalıştırmaz. Bu nedenle geliştirme ve test etme işlemi sırasında animasyonunuzun çalıştığını bile göremeyebilirsiniz. Bu animasyonu kullanmaya devam edebilirsiniz, ancak bu tür bağımlı animasyonları özellikle etkinleştirmeniz gerekir. Animasyonunuzu etkinleştirmek için animasyon nesnesinin EnableDependentAnimation özelliğini true olarak ayarlayın. (Bir animasyonu temsil eden her Zaman Çizelgesi alt sınıfı, özelliğin farklı bir uygulamasına sahiptir, ancak bunların tümü olarak adlandırılır EnableDependentAnimation.)

Uygulama geliştiricisine düşen bağımlı animasyonları etkinleştirme gereksinimi, animasyon sisteminin ve geliştirme deneyiminin bilinçli bir tasarım yönüdür. Geliştiricilerin animasyonların kullanıcı arabiriminizin yanıt verme hızı için bir performans maliyeti olduğunu fark etmelerini istiyoruz. Kötü performans gösteren animasyonları tam ölçekli bir uygulamada yalıtmak ve hatalarını ayıklamak zordur. Bu nedenle uygulamanızın kullanıcı arabirimi deneyimi için yalnızca gerçekten ihtiyacınız olan bağımlı animasyonları açmak daha iyidir. Çok fazla döngü kullanan dekoratif animasyonlar nedeniyle uygulamanızın performansını tehlikeye atmasını çok kolay hale getirmek istemedik. Animasyon için performans ipuçları hakkında daha fazla bilgi için bkz. Animasyonları ve medyayı iyileştirme.

Uygulama geliştiricisi olarak, EnableDependentAnimationdeğerinin true olduğu durumlarda bile bağımlı animasyonları her zaman devre dışı bırakabilen uygulama genelinde bir ayar uygulamayı da seçebilirsiniz. Bkz Timeline.AllowDependentAnimations.

Tavsiye

Visual Studio 2019 için Blend'de Animasyon Bölmesi'ni kullanıyorsanız, görsel durum özelliğine bağımlı bir animasyon uygulamayı denediğinizde tasarımcıda uyarılar görüntülenir. Uyarılar derleme çıkışında veya Hata Listesinde gösterilmez. XAML'yi el ile düzenliyorsanız tasarımcı bir uyarı göstermez. Çalışma zamanında hata ayıklarken, Çıkış bölmesinin Debug çıkışı, animasyonun bağımsız olmadığını ve atlanacağını belirten bir uyarı gösterir.

Animasyonu başlatma ve denetleme

Şu ana kadar size gösterdiğimiz her şey aslında bir animasyonu çalıştırmaya veya uygulanmaya neden olmuyor! Animasyon başlatılana ve çalışana kadar, XAML'de bir animasyonun tanımladığı değer değişiklikleri potansiyel olarak bulunur ve henüz gerçekleşmez. Uygulama ömrü veya kullanıcı deneyimiyle ilgili bir şekilde bir animasyonu açıkça başlatmanız gerekir. En basit düzeyde, bu animasyon için üst öğe olan Görsel Taslak üzerinde Begin yöntemini çağırarak bir animasyon başlatırsınız. XAML'den yöntemleri doğrudan çağıramazsınız, bu nedenle animasyonlarınızı etkinleştirmek için ne yaparsanız yapın, bunu koddan yapıyor olursunuz. Bu, uygulamanızın sayfaları veya bileşenleri için arka planda kod ya da özel bir denetim sınıfı tanımlıyorsanız denetiminizin mantığı olabilir.

Normalde Begin çağrılır ve animasyonun süresi dolana kadar çalışmasına izin verilir. Ancak, Çalışma zamanında Görsel Taslak'ı denetlemek için Duraklatma, Sürdürme ve Durdurma yöntemlerinin yanı sıra daha gelişmiş animasyon denetimi senaryoları için kullanılan diğer API'leri de kullanabilirsiniz.

Begin'i sonsuz yinelenen (RepeatBehavior="Forever") bir animasyon içeren bir görsel taslakta çağırdığınızda, bu animasyon, animasyonu içeren sayfa kaldırılana kadar veya siz özellikle "Duraklat" ya da "Durdur'u" çağırana kadar çalışır.

Uygulama kodundan animasyon başlatma

Animasyonları otomatik olarak veya kullanıcı eylemlerine yanıt olarak başlatabilirsiniz. Otomatik durumda, genellikle animasyon tetikleyicisi olarak işlev görmesi için Loaded gibi bir nesne yaşam süresi olayı kullanırsınız. Bu noktada kullanıcı arabirimi etkileşime hazır olduğundan ve kullanıcı arabiriminin başka bir bölümü yüklenmeye devam ettiğinden animasyon başlangıçta kesilmeyeceğinden , Yüklenen olayı bunun için kullanmak iyi bir olaydır.

Bu örnekte, kullanıcı dikdörtgene tıkladığında animasyon başlayacak şekilde PointerPressed olayı dikdörtgene eklenir.

<Rectangle PointerPressed="Rectangle_Tapped"
  x:Name="MyAnimatedRectangle"
  Width="300" Height="200" Fill="Blue"/>

Olay işleyicisi , Görsel Taslak'ınBegin yöntemini kullanarak Görsel Taslak'ı (animasyon) başlatır.

myStoryboard.Begin();

myStoryboard().Begin();

Animasyon değerleri uygulamayı tamamladıktan sonra başka bir mantığın çalışmasını istiyorsanız Tamamlandı olayını işleyebilirsiniz. Ayrıca, özellik sistemi/animasyon etkileşimleriyle ilgili sorunları gidermek için GetAnimationBaseValue yöntemi yararlı olabilir.

Tavsiye

Uygulama kodundan animasyon başlattığınız bir uygulama senaryosu için her kodlama yaparken, kullanıcı arabirimi senaryonuzun animasyon kitaplığında bir animasyon veya geçişin mevcut olup olmadığını yeniden gözden geçirmek isteyebilirsiniz. Kitaplık animasyonları tüm Windows Çalışma Zamanı uygulamalarında daha tutarlı bir kullanıcı arabirimi deneyimi sağlar ve kullanımı daha kolaydır.

Görsel durumlar için animasyonlar

Bir denetimin görsel durumunu tanımlamak için kullanılan görsel taslak için çalıştırma davranışı, bir uygulamanın görsel taslakları doğrudan çalıştırabileceğinden farklıdır. XAML'deki bir görsel durum tanımına uygulandığında, Storyboard, bir VisualState öğesinin parçasıdır ve bu durum, VisualStateManager API'si kullanılarak bir bütün olarak kontrol edilir. içindeki tüm animasyonlar, visualstate içeren bir denetim tarafından kullanıldığında animasyon değerlerine ve Zaman Çizelgesi özelliklerine göre çalıştırılır. Daha fazla bilgi için bkz Görsel durumlar için taslaklar. Görsel durumlar için görünen FillBehavior farklıdır. Görsel durumu başka bir duruma değiştirilirse, yeni görsel durumu özellikle bir özelliğe yeni bir animasyon uygulamasa bile, önceki görsel durumu ve animasyonları tarafından uygulanan tüm özellik değişiklikleri iptal edilir.

Storyboard ve EventTrigger

Tamamen XAML'de bildirilebilen bir animasyon başlatmanın bir yolu vardır. Ancak bu teknik artık yaygın olarak kullanılmayabilir. VisualStateManager desteğinden önce WPF ve Silverlight'ın önceki sürümlerinden eski bir söz dizimidir. Bu EventTrigger söz dizimi içeri aktarma/uyumluluk nedeniyle Windows Çalışma Zamanı XAML'sinde çalışmaya devam eder, ancak yalnızca FrameworkElement.Loaded olayını temel alan bir tetikleyici davranışı için çalışır; diğer olayları tetikleme girişimi özel durumlar oluşturur veya derlenemiyor. Daha fazla bilgi için bkz. EventTrigger veya BeginStoryboard.

XAML ilişkili özelliklerin animasyonu

Bu yaygın bir senaryo değildir, ancak XAML ekli özelliğine animasyonlu bir değer uygulayabilirsiniz. Ekli özelliklerin ne olduğu ve nasıl çalıştığı hakkında daha fazla bilgi için bkz. Ekli özelliklere genel bakış. Ekli bir özelliği hedeflemek için özellik adını parantez içine alan bir özellik yolu söz dizimi gerekir. Ayrık tamsayı değerleri uygulayan bir ObjectAnimationUsingKeyFrames kullanarak Canvas.ZIndex gibi yerleşik ekli özelliklere animasyon uygulayabilirsiniz. Ancak, Windows Çalışma Zamanı XAML uygulamasının mevcut sınırlamalarından biri, özel bir ekli özelliğe animasyon ekleyememenizdir.

Diğer animasyon türleri ve kullanıcı arabiriminizi animasyonlandırma hakkında bilgi edinmek için sonraki adımlar

Şimdiye kadar, iki değer arasında animasyon oluşturan ve ardından animasyon çalışırken gerekli değerleri doğrusal olarak ilişkilendiren özel animasyonları gösterdik. Bunlara Başlangıç/Bitiş/Yoluyla animasyonları adı verilir. Ancak, başlangıç ile bitiş arasında kalan ara değerleri bildirmenizi sağlayan başka bir animasyon türü vardır. Bunlara anahtar kare animasyonları adı verilir. Ayrıca, From/To/By animasyonları veya anahtar kare animasyonu üzerindeki enterpolasyon mantığını değiştirmenin bir yolu da vardır. Bu, bir kolaylaştırma işlevi uygulamayı içerir. Bu kavramlar hakkında daha fazla bilgi için bkz . Anahtar çerçevesi ve kolaylaştırma işlevi animasyonları.

WPF ile farklar

Windows Presentation Foundation (WPF) hakkında bilginiz varsa bu bölümü okuyun; aksi takdirde atlayabilirsiniz.

Genel olarak, bir Windows Çalışma Zamanı uygulamasında görsel taslak animasyonlar oluşturmak WPF gibidir. Ancak bir dizi önemli fark vardır:

  • Görsel taslaklı animasyonlar, bir kullanıcı arabirimine görsel olarak animasyon eklemenin tek yolu değildir ve uygulama geliştiricilerinin bunu yapması için en kolay yol da değildir. Görsel taslak animasyonları kullanmak yerine, tema animasyonlarını ve geçiş animasyonlarını kullanmak genellikle daha iyi bir tasarım uygulamasıdır. Bunlar, animasyon özelliği hedeflemenin karmaşıklıklarına girmeden önerilen UI animasyonlarını hızla oluşturabilir. Daha fazla bilgi için bkz . XAML'deki animasyonlar.
  • Windows Çalışma Zamanı'nda birçok XAML denetimi, yerleşik davranışlarının bir parçası olarak tema animasyonları ve geçiş animasyonları içerir. Çoğunlukla WPF denetimlerinin varsayılan animasyon davranışı yoktu.
  • Animasyon sistemi animasyonların kullanıcı arabiriminizde kötü performansa neden olabileceğini belirlerse, oluşturduğunuz tüm özel animasyonlar windows çalışma zamanı uygulamasında varsayılan olarak çalıştırılmaz. Sistemin bir performans etkisi olabileceğini belirlediği animasyonlara bağımlı animasyonlar denir. Bu bağımlı hale gelir çünkü animasyonunuzun zamanlaması doğrudan UI iş parçacığında çalışır ve etkin kullanıcı girdisi ile diğer güncellemeler de çalışma zamanı değişikliklerini kullanıcı arabirimine uygulamaya çalışır. Kullanıcı arabirimi iş parçacığında kapsamlı sistem kaynakları kullanan bağımlı bir animasyon, uygulamanın belirli durumlarda yanıt vermemeye başlamasına neden olabilir. Animasyonunuz bir düzen değişikliğine neden oluyorsa veya ui iş parçacığında performansı başka bir şekilde etkileme potansiyeline sahipse, genellikle animasyonu çalışmasını görmek için açıkça etkinleştirmeniz gerekir. Belirli animasyon sınıflarında EnableDependentAnimation özelliği bunun içindir. Daha fazla bilgi için bkz . Bağımlı ve bağımsız animasyonlar .
  • Özel kolaylaştırma işlevleri şu anda Windows Çalışma Zamanı'nda desteklenmiyor.
  • Last updated on