XAML'deki animasyonlar

Animasyonlar, hareket ve etkileşim ekleyerek uygulamanızı geliştirebilir. Windows Çalışma Zamanı animasyon kitaplığındaki animasyonları kullanarak Windows görünümünü uygulamanızla tümleştirebilirsiniz. Bu konu başlığı altında, animasyonların özeti ve her birinin kullanıldığı tipik senaryoların örnekleri sağlanır.

Tavsiye

XAML için Windows Çalışma Zamanı denetimleri, bir animasyon kitaplığından gelen yerleşik davranışlar olarak bazı animasyon türlerini içerir. Uygulamanızda bu denetimleri kullanarak, kendiniz programlamak zorunda kalmadan animasyonlu görünüm ve hissi elde edebilirsiniz.

Windows Çalışma Zamanı animasyon kitaplığındaki animasyonlar şu avantajları sağlar:

  • Animasyon yönergelerine uygun hareketler
  • Kullanıcı arabirimi durumları arasında kullanıcıyı bilgilendiren ancak dikkatini dağıtmayan hızlı ve akıcı geçişler
  • Bir uygulama içindeki kullanıcıya geçişleri gösteren görsel davranış

Örneğin, kullanıcı listeye bir öğe eklediğinde, yeni öğe anında listede görünmek yerine, animasyonla yerine geçer. Listedeki diğer öğeler, kısa bir süre içinde yeni konumlarına animasyonla hareket ederek eklenen öğeye yer açar. Buradaki geçiş davranışı, denetim etkileşimini kullanıcı için daha belirgin hale getirir.

Windows 10, sürüm 1607, gezinti sırasında bir öğenin görünümler arasında animasyon olarak hareket ettiği animasyonları uygulamak için yeni bir ConnectedAnimationService API’sini tanıtmaktadır. Bu API,diğer animasyon kitaplığı API'lerinden farklı bir kullanım düzenine sahiptir. ConnectedAnimationService kullanımı, başvuru sayfası'te ele alınmıştır.

Animasyon kitaplığı, olası her senaryo için animasyon sağlamaz. XAML'de özel animasyon oluşturmak isteyebileceğiniz durumlar vardır. Daha fazla bilgi için bkz. Storyboard animasyonları.

Ayrıca, ScrollViewer'ın kaydırma konumuna göre bir öğeyi animasyonlandırma gibi bazı gelişmiş senaryolarda geliştiriciler özel animasyonlar uygulamak için Görsel Katman birlikte çalışma özelliğini kullanmak isteyebilir. Daha fazla bilgi için bkz. Görsel Katman .

Animasyon türleri

Windows Çalışma Zamanı animasyon sistemi ve animasyon kitaplığı, denetimlerin ve kullanıcı arabiriminin diğer bölümlerinin animasyonlu bir davranışa sahip olmasını sağlamak için daha büyük bir hedefe hizmet eder. Birkaç farklı animasyon türü vardır.

  • Tema geçişleri , önceden tanımlanmış Windows Çalışma Zamanı XAML kullanıcı arabirimi türlerindeki denetimler veya öğeler dahil olmak üzere kullanıcı arabiriminde belirli koşullar değiştiğinde otomatik olarak uygulanır. Animasyonlar Windows'un görünüm ve hissini desteklediğinden ve tüm uygulamaların bir etkileşim modundan diğerine geçtiğinde belirli kullanıcı arabirimi senaryoları için ne yapacağını tanımladığından bunlar tema geçişleri olarak adlandırılır. Tema geçişleri animasyon kitaplığının bir parçasıdır.
  • Tema animasyonları , önceden tanımlanmış Windows Çalışma Zamanı XAML kullanıcı arabirimi türlerinin bir veya daha fazla özelliğine yönelik animasyonlardır. Tema animasyonları belirli bir öğeyi hedeflediğinden ve denetim içindeki belirli görsel durumlarında mevcut olduğundan tema animasyonları tema geçişlerinden farklıdır; tema geçişleri ise görsel durumların dışında bulunan denetimin özelliklerine atanır ve bu durumlar arasındaki geçişleri etkiler. Windows Çalışma Zamanı XAML denetimlerinin çoğu, denetim şablonlarının parçası olan görsel taslakların içinde tema animasyonları ve görsel durumlar tarafından tetiklenen animasyonlar içerir. Şablonları değiştirmediğiniz sürece, bu yerleşik tema animasyonlarını kullanıcı arabiriminizdeki denetimler için kullanabilirsiniz. Ancak şablonları değiştirirseniz yerleşik denetim teması animasyonlarını da kaldıracaksınız. Bunları geri almak için denetimin görsel durumları kümesinde tema animasyonları içeren bir görsel taslak tanımlamanız gerekir. Görsel durumların içinde olmayan görsel taslaklardan tema animasyonları çalıştırabilir ve Begin yöntemiyle başlatabilirsiniz, ancak bu daha az yaygındır. Tema animasyonları, animasyon kitaplığının bir parçasıdır.
  • Görsel geçişler , denetim tanımlı görsel durumlarından birinden başka bir duruma geçtiğinde uygulanır. Bunlar, yazdığınız özel animasyonlardır ve genellikle bir denetim için yazdığınız özel şablonla ve bu şablondaki görsel durum tanımlarıyla ilgilidir. Animasyon yalnızca durumlar arasındaki süre boyunca çalışır ve bu genellikle kısa bir süre , en fazla birkaç saniyedir. Daha fazla bilgi içingörsel durumları için görsel taslak animasyonlarının "VisualTransition" bölümüne bakın.
  • Storyboard edilmiş animasyonlar zaman içinde bir Windows Çalışma Zamanı bağımlılık özelliğinin değerine animasyon yapar. Görsel taslaklar görsel geçişin bir parçası olarak tanımlanabilir veya uygulama tarafından çalışma zamanında tetiklenebilir. Daha fazla bilgi için bkz. Storyboard animasyonları. Bağımlılık özellikleri ve nerede oldukları hakkında daha fazla bilgi için bkz . Bağımlılık özelliklerine genel bakış.
  • Yeni ConnectedAnimationService API'sinin sağladığı bağlı animasyonlar, geliştiricilerin gezinti sırasında bir öğenin görünümler arasında animasyon oluşturacak şekilde göründüğü bir efekti kolayca oluşturmasına olanak sağlar. Bu API, Windows 10, sürüm 1607'den itibaren kullanılabilir. Daha fazla bilgi için bkz . ConnectedAnimationService .

Kitaplıkta kullanılabilen animasyonlar

Aşağıdaki animasyonlar animasyon kitaplığında sağlanır. Ana kullanım senaryoları, bunların nasıl tanımlanacağı hakkında daha fazla bilgi edinmek ve animasyonun bir örneğini görmek için animasyonun adına tıklayın.

Sayfa geçişi

Bir uygulama içinde gezintiye animasyon eklemek için sayfa geçişlerini kullanın. Neredeyse tüm uygulamalar bir tür gezinti kullandığından, sayfa geçişi animasyonları uygulamalar tarafından kullanılan en yaygın tema animasyonu türüdür. Sayfa geçişi API'leri hakkında daha fazla bilgi için bkz . NavigationThemeTransition .

İçerik geçişi ve giriş geçişi

İçerik geçiş animasyonlarını (ContentThemeTransition) kullanarak bir parça veya içerik kümesini geçerli görünüme veya geçerli görünümden dışarı taşıyın. Örneğin, içerik geçişi animasyonları, sayfa ilk yüklendiğinde veya sayfanın bir bölümünde içerik değiştiğinde görüntülenmeye hazır olmayan içeriği gösterir.

EntranceThemeTransition , kullanıcı arabiriminin bir sayfası veya büyük bölümü ilk yüklendiğinde içeriğe uygulanabilen bir hareketi temsil eder. Bu nedenle içeriğin ilk görünümü, içerikte yapılan bir değişiklikten farklı geri bildirim sunabilir. EntranceThemeTransition, varsayılan parametrelere sahip bir NavigationThemeTransition ile eşdeğerdir, ancak bir Çerçeve dışında kullanılabilir.

Belirme/kapatma ve çapraz geçiş

Geçici kullanıcı arabirimi ögelerini veya denetimleri göstermek veya gizlemek için giriş ve çıkış animasyonlarını kullanın. XAML'de bunlar FadeInThemeAnimation ve FadeOutThemeAnimation olarak temsil edilir. Örneklerden biri, kullanıcı etkileşimi nedeniyle yeni denetimlerin görüntülenebildiği bir uygulama çubuğundadır. Başka bir örnek, bir süre kullanıcı girişi algılanmadığında kaybolan geçici bir kaydırma çubuğu veya pencere kaydırma göstergesidir. Uygulamalar, içerik dinamik olarak yüklenirken bir yer tutucu öğeden son öğeye geçiş yaparken animasyonda soldurma özelliğini de kullanmalıdır.

Bir öğenin durumu değiştiğinde geçişi düzeltmek için çapraz geçiş animasyonu kullanın; örneğin, uygulama bir görünümün geçerli içeriğini yenilediğinde. XAML animasyon kitaplığı ayrılmış bir çapraz geçiş animasyonu sağlamaz, ancak çakışan zamanlamayla FadeInThemeAnimation ve FadeOutThemeAnimation kullanarak aynı sonucu elde edebilirsiniz.

İşaretçi yukarı/aşağı

Kullanıcıya başarılı bir dokunma için geri bildirim sağlamak veya bir kutucuğa tıklamak için PointerUpThemeAnimation ve PointerDownThemeAnimation animasyonlarını kullanın. Örneğin, kullanıcı bir kutucuğa tıkladığında veya dokunduğunda işaretçi aşağı animasyonu oynatılır. Tıklama veya dokunma serbest bırakıldıktan sonra işaretçi yukarı animasyonu oynatılır.

Yeniden konumlandır

Öğeyi yeni bir konuma taşımak için yeniden konumlandırma animasyonlarını (RepositionThemeAnimation veya RepositionThemeTransition) kullanın. Örneğin, bir öğe denetimindeki üst bilgileri taşımak yeniden konumlandırma animasyonunu kullanır.

Açılan pencereyi göster/gizle

Geçerli görünümün en üstünde Açılan Pencere veya benzer bağlamsal kullanıcı arabirimini gösterip gizlediğinizde PopInThemeAnimation ve PopOutThemeAnimation kullanın. PopupThemeTransition, bir açılır pencereyi hafifçe kapatmak istiyorsanız yararlı geri bildirim sağlayan tema geçiş efektidir.

Kenar kullanıcı arabirimini gösterme/gizleme

EdgeUIThemeTransition animasyonunu kullanarak küçük, kenar tabanlı kullanıcı arabirimini görünüm içine ve dışına kaydırın. Örneğin, ekranın üst veya alt kısmında özel bir uygulama çubuğu veya ekranın üst kısmında hatalar ve uyarılar için kullanıcı arabirimi yüzeyi gösterirken bu animasyonları kullanın.

Bölmeyi veya paneli göstermek ve gizlemek için PaneThemeTransition animasyonunu kullanın. Bu, özel klavye veya görev bölmesi gibi büyük kenar tabanlı kullanıcı arabirimi içindir.

Liste öğesi değişiklikleri

Var olan bir listeye öğe eklediğinizde veya sildiğinizde animasyonlu davranış eklemek için AddDeleteThemeTransition animasyonunu kullanın. Ekleme için geçiş, yeni öğelere yer açmak için önce listedeki mevcut öğeleri yeniden konumlandırır ve ardından yeni öğeleri ekler. Silme işlemi için, geçiş bir listeden öğeleri kaldırır ve gerekirse, silinen öğeler kaldırıldıktan sonra kalan liste öğelerini yeniden konumlandırır.

Ayrıca, bir öğe listedeki konumunu değiştirirse uygulayacağınız ayrı bir ReorderThemeTransition vardır. Bu, bir öğeyi silip ilişkili silme/ekleme animasyonlarıyla yeni bir yere eklemekten farklı animasyonludur.

Bu animasyonların, ListView ve GridView varsayılan ve şablonlarına dahil edildiğini unutmayın; bu nedenle, bu denetimleri zaten kullanıyorsanız, bu animasyonları el ile eklemenize gerek yoktur.

Sürükle/bırak

Kullanıcı bir öğeyi sürüklediğinde veya bıraktığında görsel geri bildirim sağlamak için sürükleme animasyonlarını (DragItemThemeAnimation, DragOverThemeAnimation) ve bırakma animasyonunu (DropTargetItemThemeAnimation) kullanın.

Etkin olduğunda, animasyonlar kullanıcıya listenin bırakılan bir öğe etrafında yeniden düzenlenebileceğini gösterir. Geçerli konuma bırakılırsa, kullanıcıların öğenin listeye nereye yerleştirileceğini bilmesi yararlı olur. Animasyonlar, sürüklenen bir öğenin listedeki diğer iki öğe arasına bırakılabileceğine ve bu öğelerin kenara çekileceğine dair görsel geri bildirim sağlar.

Özel denetimlerle animasyonları kullanma

Aşağıdaki tabloda, bu Windows Çalışma Zamanı denetimlerinin özel bir sürümünü oluştururken hangi animasyonu kullanmanız gerektiğiyle ilgili önerilerimiz özetlemektedir:

Kullanıcı arabirimi türü Önerilen animasyon
İletişim kutusu FadeInThemeAnimation ve FadeOutThemeAnimation
Uçan Menü PopInThemeAnimation ve PopOutThemeAnimation
Tooltip FadeInThemeAnimation ve FadeOutThemeAnimation
Bağlam menüsü PopInThemeAnimation ve PopOutThemeAnimation
Komut çubuğu EdgeUIThemeTransition
Görev bölmesi veya kenar tabanlı panel PaneThemeTransition
Herhangi bir kullanıcı arabirimi kapsayıcısının içeriği contentThemeTransition
Kontroller için veya başka bir animasyon uygulanmadığında FadeInThemeAnimation ve FadeOutThemeAnimation

Geçiş animasyonu örnekleri

İdeal olarak, uygulamanız kullanıcı arabirimini geliştirmek veya kullanıcılarınızı rahatsız etmeden daha çekici hale getirmek için animasyonlar kullanır. Bunu yapmanızın bir yolu, animasyonlu geçişleri kullanıcı arabirimine uygulamaktır, böylece bir şey ekrana girdiğinde veya ekrandan ayrıldığında ya da başka bir şekilde değiştiğinde animasyon kullanıcının dikkatini değişikliğe çeker. Örneğin, düğmeleriniz sadece belirip kaybolmak yerine hızla belirip kaybolabilir. Tutarlı önerilen veya tipik animasyon geçişleri oluşturmak için kullanılabilecek bir dizi API oluşturduk. Buradaki örnekte, bir düğmenin hızla görünüme kaydırabilmesi için bir animasyonu nasıl uygulayacağınız gösterilmektedir.

<Button Content="Transitioning Button">
     <Button.Transitions>
         <TransitionCollection> 
             <EntranceThemeTransition/>
         </TransitionCollection>
     </Button.Transitions>
 </Button>

Bu kodda, düğmenin geçiş koleksiyonuna EntranceThemeTransition nesnesini ekleyeceğiz. Şimdi düğme ilk kez işlendiğinde, yalnızca görüntülenmek yerine hızla görünüme kaydırılır. Animasyon nesnesinin ne kadar uzağa ve hangi yönde kaydırıldığını ayarlamak için animasyon nesnesi üzerinde birkaç özellik ayarlayabilirsiniz, ancak bu, belirli bir senaryo için basit bir API olması anlamına geliyordu, yani göz alıcı bir giriş yapmak için.

Ayrıca uygulamanızın stil kaynaklarında geçiş animasyonu temaları tanımlayabilir ve efekti tekdüzen olarak uygulayabilirsiniz. Bu örnek bir öncekine eşdeğerdir, yalnızca Stil kullanılarak uygulanır:

<UserControl.Resources>
     <Style x:Key="DefaultButtonStyle" TargetType="Button">
         <Setter Property="Transitions">
             <Setter.Value>
                 <TransitionCollection>
                     <EntranceThemeTransition/>
                 </TransitionCollection>
             </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
      
<StackPanel x:Name="LayoutRoot">
    <Button Style="{StaticResource DefaultButtonStyle}" Content="Transitioning Button"/>
</StackPanel>

Önceki örnekler tek bir denetime tema geçişi uygular, ancak tema geçişleri bir nesne kapsayıcısına uygulandığında daha da ilgi çekicidir. Bunu yaptığınızda, kapsayıcının tüm alt nesneleri geçişe dahil olur. Aşağıdaki örnekte, EntranceThemeTransition bir grup dikdörtgenden oluşan Kılavuz üzerine uygulanır.

<!-- If you set an EntranceThemeTransition animation on a panel, the
     children of the panel will automatically offset when they animate
     into view to create a visually appealing entrance. -->        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- The sequence children appear depends on their order in 
         the panel's children, not necessarily on where they render
         on the screen. Be sure to arrange your child elements in
         the order you want them to transition into view. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

Kılavuzu'nun çocuk dikdörtgenleri, bu animasyonu dikdörtgenlere ayrı ayrı uyguladığınızda olduğu gibi bir kerede değil, görsel olarak hoş bir şekilde ardışık olarak görünür hale gelir.

Bu animasyonun bir gösterimi aşağıdadır:

Çocuk dikdörtgenin görünür hale gelmesini gösteren animasyon

Bu alt öğelerden biri veya daha fazlası konum değiştirildiğinde kapsayıcının alt nesneleri de yeniden akabilir. Aşağıdaki örnekte, dikdörtgenlerden oluşan bir ızgaraya RepositionThemeTransition uyguluyoruz. Dikdörtgenlerden birini kaldırdığınızda, diğer tüm dikdörtgenler yeni konumlarına yeniden akar.

<Button Content="Remove Rectangle" Click="RemoveButton_Click"/>
        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
                    
            <!-- Without this, there would be no animation when items 
                 are removed. -->
            <RepositionThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- All these rectangles are just to demonstrate how the items
         in the grid re-flow into position when one of the child items
         are removed. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
    if (rectangleItems.Items.Count > 0)
    {    
        rectangleItems.Items.RemoveAt(0);
    }                         
}

Tek bir nesneye veya nesne kapsayıcısına birden çok geçiş animasyonu uygulayabilirsiniz. Örneğin, dikdörtgen listesinin görünmesi için bir animasyon eklemek ve pozisyon değiştirdiklerinde de animasyonla bu değişikliği göstermek istiyorsanız, bunu RepositionThemeTransition ve EntranceThemeTransition uygulayarak yapabilirsiniz.

...
<ItemsControl.ItemContainerTransitions>
    <TransitionCollection>
        <EntranceThemeTransition/>                    
        <RepositionThemeTransition/>
    </TransitionCollection>
</ItemsControl.ItemContainerTransitions>
...

Kullanıcı arabirimi öğelerinizde animasyonlar eklendikçe, kaldırıldıklarında, yeniden sıralandıklarında ve bu şekilde animasyonlar oluşturmak için çeşitli geçiş efektleri vardır. Bu API'lerin adları "ThemeTransition" içerir:

API Description
GezintiTemaGeçişi Çerçevesayfa gezintisi için Windows'e özel bir kişilik animasyonu sağlar.
EkleSilTemaGeçişi Denetimlerin alt öğe veya içerik eklemesi veya silmesi için animasyonlu geçiş davranışını sağlar. Denetim genellikle bir öğe kapsayıcısıdır.
contentThemeTransition Denetimin içeriği değiştiğinde animasyonlu geçiş davranışını sağlar. Bunu AddDeleteThemeTransition'a ek olarak uygulayabilirsiniz.
EdgeUIThemeTransition (Küçük) kenar kullanıcı arabirimi geçişi için animasyonlu geçiş davranışını sağlar.
GirişTemaGeçişi Denetimlerin ilk göründüğü zaman için animasyonlu geçiş davranışını sağlar.
PaneThemeTransition Panel (büyük kenar kullanıcı arabirimi) kullanıcı arabirimi geçişi için animasyonlu geçiş davranışı sağlar.
PopupThemeTransition Denetimlerin açılır bileşenleri (örneğin, bir nesnedeki araç ipucu stili kullanıcı arabirimi) göründüğünde uygulanacak animasyonlu geçiş davranışını sağlar.
ReorderThemeTransition Liste görünümü denetim öğelerinin sırasını değiştirmesi için animasyonlu geçiş davranışını sağlar. Bu genellikle sürükle-bırak işleminin bir sonucu olarak gerçekleşir. Farklı denetimler ve temalar, animasyonlar için farklı özelliklere sahip olabilir.
Yeniden KonumlandırThemeTransition Denetimlerin konum değişikliği sırasında animasyonlu geçiş davranışını sağlar.

Tema animasyonu örnekleri

Geçiş animasyonlarının uygulanması kolaydır. Ancak animasyon efektlerinizin zamanlaması ve sırası üzerinde biraz daha fazla denetim sahibi olmak isteyebilirsiniz. Animasyonunuzun davranışı için tutarlı bir tema kullanırken daha fazla denetim sağlamak için tema animasyonlarını kullanabilirsiniz. Tema animasyonları ayrıca özel animasyonlara göre daha az işaretleme gerektirir. Burada FadeOutThemeAnimation kullanarak dikdörtgenin görünümünün kaybolmasını sağlayacağız.

<StackPanel>    
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <FadeOutThemeAnimation TargetName="myRectangle" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle PointerPressed="Rectangle_Tapped" x:Name="myRectangle"  
              Fill="Blue" Width="200" Height="300"/>
</StackPanel>

// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
}

Geçiş animasyonlarından farklı olarak, tema animasyonunun otomatik olarak çalıştıran yerleşik tetikleyicisi (geçiş) yoktur. XAML'de tanımlarken tema animasyonu eklemek için görsel taslak kullanmanız gerekir. Animasyonun varsayılan davranışını da değiştirebilirsiniz. Örneğin, FadeOutThemeAnimationüzerindeki Süre zaman değerini artırarak solma işlemini yavaşlatabilirsiniz.

Uyarı

Temel animasyon tekniklerini göstermek amacıyla görsel taslak yöntemlerini çağırarak animasyonu başlatmak için uygulama kodunu kullanıyoruz. Görsel Taslak animasyonlarının nasıl çalıştığını Başlangıç, Durdurma, Duraklatma ve SürdürmeGörsel Taslak yöntemlerini kullanarak denetleyebilirsiniz. Ancak, genellikle uygulamalara kitaplık animasyonlarını bu şekilde eklemezsiniz. Bunun yerine, kitaplık animasyonlarını genellikle denetimlere veya öğelere uygulanan XAML stilleri ve şablonlarıyla tümleştirirsiniz. Şablonlar ve görsel durumlar hakkında bilgi edinmek biraz daha önemlidir. Ancak, görsel durumlar için tasarlanmış animasyonlar konusunun bir parçası olarak görsel durumlarda kütüphane animasyonlarını nasıl kullanacağınızı kapsıyoruz.

Animasyon efektleri oluşturmak için kullanıcı arabirimi öğelerinize birkaç tema animasyonu daha uygulayabilirsiniz. Bu API'nin adları "ThemeAnimation" ifadesini içerir:

API Description
DragÖğeTemaAnimasyonu Sürüklenen öğe öğelerine uygulanan önceden yapılandırılmış animasyonu temsil eder.
DragOverThemeAnimation Sürüklenen öğenin altındaki öğelere uygulanan önceden yapılandırılmış animasyonu temsil eder.
dropTargetItemThemeAnimation Potansiyel bırakma hedefi öğelerine uygulanan önceden yapılandırılmış animasyon.
FadeInThemeAnimation İlk göründükleri zaman denetimlere uygulanan önceden yapılandırılmış opaklık animasyonu.
FadeOutThemeAnimation Kullanıcı arabiriminden kaldırıldığında veya gizlendiğinde denetimlere uygulanan önceden yapılandırılmış opaklık animasyonu.
PointerDownThemeAnimation Bir öğeye veya öğeye dokunan veya tıklayan kullanıcı eylemi için önceden yapılandırılmış animasyon.
pointerUpThemeAnimation Kullanıcının bir nesneye veya elemana dokunup eylemi serbest bırakmasıyla çalışan, kullanıcı eylemi için önceden yapılandırılmış animasyon.
PopInThemeAnimation Görünürken denetimlerin açılır bileşenleri için geçerli olan önceden yapılandırılmış animasyon. Bu animasyon, opaklık ve çeviriyi birleştirir.
PopOutThemeAnimation Denetimlerin açılır bileşenleri kapatıldığında veya kaldırıldıklarında geçerli olan önceden yapılandırılmış animasyon. Bu animasyon, opaklık ve çeviriyi birleştirir.
RepositionThemeAnimation Yeniden konumlandırıldığında bir nesne için önceden yapılandırılmış animasyon.
SplitCloseThemeAnimation Önceden yapılandırılmış animasyon, ComboBox tarzında bir animasyon kullanarak hedef kullanıcı arabirimini gizler ve açma ve kapatma işlemlerini gerçekleştirir.
SplitOpenThemeAnimation Önceden yapılandırılmış animasyon, ComboBox açma ve kapatma stilinde bir animasyon kullanarak hedef kullanıcı arabirimini gösterir.
DrillInThemeAnimation Kullanıcı bir liste sayfasından ayrıntı sayfasına kadar mantıksal hiyerarşide ileriye gittiği zaman çalıştırılan önceden yapılandırılmış bir animasyonu temsil eder.
DrillOutThemeAnimation Kullanıcı, ayrıntı sayfasından liste sayfasına kadar mantıksal hiyerarşide geriye doğru gittiği zaman çalıştırılan önceden yapılandırılmış bir animasyonu temsil eder.

Kendi animasyonlarınızı oluşturma

Tema animasyonları gereksinimleriniz için yeterli olmadığında, kendi animasyonlarınızı oluşturabilirsiniz. Nesneleri, bir veya daha fazla özellik değerine animasyon ekleyerek animasyonlu hale getirirsiniz. Örneğin, dikdörtgenin genişliğine, RotateTransform açısına veya bir düğmenin renk değerine animasyon uygulayabilirsiniz. Bu tür özel animasyonları, Windows Çalışma Zamanı'nın önceden yapılandırılmış bir animasyon türü olarak zaten sağladığı kitaplık animasyonlarından ayırmak için görsel taslak animasyon olarak adlandırıyoruz. Storyboard kullandığınız animasyonlarda, belirli bir türün değerlerini değiştirebilen bir animasyon (örneğin, bir Doubleanimasyonunu gerçekleştirmek için DoubleAnimation) kullanır ve bu animasyonu kontrol etmek için bir Storyboard içerisine yerleştirirsiniz.

Animasyonlu olmak için, animasyonunu oluşturduğunuz özelliğinbir bağımlılık özelliği olması gerekir. Bağımlılık özellikleri hakkında daha fazla bilgi için bkz . Bağımlılık özelliklerine genel bakış. Özel görsel taslaklı animasyonlar oluşturma ve bunları hedefleme ve denetleme de dahil olmak üzere daha fazla bilgi için bkz. Görsel taslaklı animasyonlar.

XAML'de uygulama kullanıcı arabirimi tanımının özel görsel taslak animasyonları tanımlayabileceğiniz en büyük alanı, XAML'deki denetimler için görsel durumlar tanımlıyor olmanızdır. Bunu, yeni bir denetim sınıfı oluşturduğunuz veya denetim şablonunda görsel durumları olan mevcut bir denetimi yeniden ayarladığınız için yapacaksınız. Daha fazla bilgi için Görsel durumlar için hikaye tahtası animasyonları bölümüne bakın.

  • Last updated on