Windows uygulamaları için bağlı animasyon

Bağlı animasyonlar, bir öğenin iki farklı görünüm arasında geçişini canlandırarak dinamik ve ilgi çekici bir gezinti deneyimi oluşturmanıza olanak sağlar. Bu, kullanıcının bağlamını korumasına yardımcı olur ve görünümler arasında süreklilik sağlar.

Bağlı animasyonda, kullanıcı arabirimi içeriğindeki bir değişiklik sırasında iki görünüm arasında bir öğe "devam ediyor" gibi görünür ve bu öğe kaynak görünümdeki konumundan yeni görünümdeki hedefine kadar ekranda uçar. Bu, görünümler arasındaki ortak içeriği vurgular ve geçişin bir parçası olarak güzel ve dinamik bir etki oluşturur.

• Önemli API'ler: ConnectedAnimation sınıfı, ConnectedAnimationService sınıfı

WinUI 3 Galeri uygulamasını açın ve Gizli Geçişler'in işlevini izleyin

WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

Bu kısa videoda, bir uygulama, bir öğe görüntüsünü bir sonraki sayfanın üst bilgisinin parçası olacak şekilde animasyon vermek için bağlı bir animasyon kullanır. Bu etki, geçiş boyunca kullanıcı bağlamını korumaya yardımcı olur.

Bağlı animasyon ve Akıcı Tasarım Sistemi

Fluent Design System ışık, derinlik, hareket, malzeme ve ölçek içeren modern, kalın kullanıcı arabirimi oluşturmanıza yardımcı olur. Bağlı animasyon, uygulamanıza hareket ekleyen fluent design system bileşenidir. Daha fazla bilgi edinmek için bkz. Windows uygulamaları için tasarım.

Neden bağlı animasyon?

Sayfalar arasında gezinirken, kullanıcının gezinmeden sonra sunulan yeni içeriği ve gezinirken niyetiyle bağlantısını anlaması önemlidir. Bağlı animasyonlar, kullanıcının odağını aralarında paylaşılan içeriğe çekerek iki görünüm arasındaki ilişkiyi vurgulayan güçlü bir görsel metafor sağlar. Buna ek olarak, bağlı animasyonlar, uygulamanızın hareket tasarımını ayırt etmeye yardımcı olabilecek görsel ilgi çekicilik ve şıklık ekler.

Bağlı animasyon ne zaman kullanılır?

Bağlantılı animasyonlar genellikle sayfaları değiştirirken kullanılır, ancak bunlar kullanıcı arabirimindeki içeriği değiştirdiğiniz ve kullanıcının bağlamı korumasını istediğiniz herhangi bir deneyime uygulanabilir. Kaynak ve hedef görünümler arasında paylaşılan bir görüntü veya başka bir kullanıcı arabirimi parçası olduğunda gezinti geçişinde detaya gitmek yerine bağlı bir animasyon kullanmayı düşünmelisiniz.

Bağlı animasyonu yapılandırma

Bağlantılı animasyonlar, ileri ve geri sayfa gezintisi için özel olarak uyarlanmış animasyon yapılandırmaları sağlayarak Fluent tasarımını daha da somutlaştırıyor.

ConnectedAnimation üzerinde Configuration özelliğini ayarlayarak bir animasyon yapılandırması belirtirsiniz. (Sonraki bölümde bunun örneklerini göstereceğiz.)

Bu tabloda kullanılabilir yapılandırmalar açıklanmaktadır. Bu animasyonlarda uygulanan hareket ilkeleri hakkında daha fazla bilgi için bkz . Yön ve yerçekimi.

GravityConnectedAnimationConfiguration

Bu varsayılan yapılandırmadır ve ileri gezinti için önerilir. Kullanıcı uygulamada A'dan B'ye ilerlerken, bağlı öğe fiziksel olarak "sayfadan dışarı çıkıyor" gibi görünür. Bunu yaparken, eleman z ekseninde ilerlemiş gibi görünür ve yer çekiminin etkisiyle biraz düşer. Yerçekiminin etkilerinin üstesinden gelmek için, element hız kazanır ve son konumuna hızlanır. Sonuç olarak "ölçek ve dip" animasyonu elde edilir.

DirectConnectedAnimationConfiguration
Kullanıcı uygulamada geriye doğru gezinirken (B'den A'ya), animasyon daha doğrudan olur. Bağlı öğe, kübik Bezier yavaşlatma işlevi kullanılarak B'den A'ya doğrusal olarak çevrilir. Kullanıcıyı, gezinti akışının bağlamını koruyarak, mümkün olan en kısa sürede önceki durumuna döndüren geriye dönük görsel etkileşim öğesi.

BasicConnectedAnimationConfiguration
Bu, Windows 10, sürüm 1809 (SDK 17763) öncesi sürümlerde kullanılan varsayılan (ve yalnızca) animasyondur.

ConnectedAnimationService yapılandırması

ConnectedAnimationService sınıfı, genel hizmet yerine tek tek animasyonlara uygulanan iki özelliğe sahiptir.

• DefaultDuration
• VarsayılanYumuşatmaFonksiyonu

Çeşitli etkileri elde etmek için, bazı yapılandırmalar ConnectedAnimationService üzerindeki bu özellikleri yoksayar ve bu tabloda açıklandığı gibi kendi değerlerini kullanır.

Konfigürasyon	DefaultDuration'ı dikkate mi alır?	DefaultEasingFunction'u dikkate alıyor mu?
Ciddiyet	Evet	Evet* * A'dan B'ye temel çeviri bu geçiş fonksiyonunu kullanır, ancak "yerçekimi daldırma" kendi geçiş fonksiyonuna sahiptir.
Doğrudan	Hayır 150ms süresince animasyon yapar.	Hayır Decelerate easing işlevini kullanır.
Temel	Evet	Evet

Bağlı animasyonu nasıl uygulayacağınız

Bağlı animasyonu ayarlamak için iki adım gerekir:

1. Kaynak sayfada, sisteme kaynak öğenin bağlı animasyona katılacağını belirten bir animasyon nesnesi hazırlayın.
2. Hedef sayfada, hedef öğeye bir başvuru geçirerek animasyonu başlatın.

Kaynak sayfadan gezinirken, ConnectedAnimationService örneğini almak için ConnectedAnimationService.GetForCurrentView öğesini çağırın. Animasyon hazırlamak için, bu örnekte PrepareToAnimate öğesini çağırın ve geçişte kullanmak istediğiniz benzersiz bir anahtarı ve kullanıcı arabirimi öğesini geçirin. Benzersiz anahtar, animasyonu hedef sayfada daha sonra almanıza olanak tanır.

ConnectedAnimationService.GetForCurrentView()
    .PrepareToAnimate("forwardAnimation", SourceImage);

Gezinti gerçekleştiğinde, animasyonu hedef sayfada başlatın. Animasyonu başlatmak için ConnectedAnimation.TryStart'ı çağırın. Animasyonu oluştururken sağladığınız benzersiz anahtarla ConnectedAnimationService.GetAnimation'ı çağırarak doğru animasyon örneğini alabilirsiniz.

ConnectedAnimation animation =
    ConnectedAnimationService.GetForCurrentView().GetAnimation("forwardAnimation");
if (animation != null)
{
    animation.TryStart(DestinationImage);
}

İleri gezinti

Bu örnekte, iki sayfa arasında ileriye doğru gezinti için bir geçiş oluşturmak için ConnectedAnimationService'in nasıl kullanılacağı gösterilmektedir (Page_A Page_B).

İleri gezinti için önerilen animasyon yapılandırması GravityConnectedAnimationConfiguration'dır. Bu varsayılandır, bu nedenle farklı bir yapılandırma belirtmek istemediğiniz sürece Configuration özelliğini ayarlamanız gerekmez.

Kaynak sayfada animasyonu ayarlayın.

<!-- Page_A.xaml -->

<Image x:Name="SourceImage"
       HorizontalAlignment="Left" VerticalAlignment="Top"
       Width="200" Height="200"
       Stretch="Fill"
       Source="Assets/StoreLogo.png"
       PointerPressed="SourceImage_PointerPressed"/>

// Page_A.xaml.cs

private void SourceImage_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    // Navigate to detail page.
    // Suppress the default animation to avoid conflict with the connected animation.
    Frame.Navigate(typeof(Page_B), null, new SuppressNavigationTransitionInfo());
}

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    ConnectedAnimationService.GetForCurrentView()
        .PrepareToAnimate("forwardAnimation", SourceImage);
    // You don't need to explicitly set the Configuration property because
    // the recommended Gravity configuration is default.
    // For custom animation, use:
    // animation.Configuration = new BasicConnectedAnimationConfiguration();
}

Hedef sayfada animasyonu başlatın.

<!-- Page_B.xaml -->

<Image x:Name="DestinationImage"
       Width="400" Height="400"
       Stretch="Fill"
       Source="Assets/StoreLogo.png" />

// Page_B.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    ConnectedAnimation animation =
        ConnectedAnimationService.GetForCurrentView().GetAnimation("forwardAnimation");
    if (animation != null)
    {
        animation.TryStart(DestinationImage);
    }
}

Arka gezinti

Geri gezinti için (Page_A Page_B) aynı adımları izlersiniz, ancak kaynak ve hedef sayfalar ters çevrilir.

Kullanıcı geri döndüğünde, uygulamanın en kısa sürede önceki duruma döndürülmesini bekler. Bu nedenle, önerilen yapılandırma DirectConnectedAnimationConfiguration'dır. Bu animasyon daha hızlı, daha doğrudandır ve yavaşlama kolaylaştırma özelliğini kullanır.

Kaynak sayfada animasyonu ayarlayın.

// Page_B.xaml.cs

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    if (e.NavigationMode == NavigationMode.Back)
    {
        ConnectedAnimation animation = 
            ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("backAnimation", DestinationImage);

        // Use the recommended configuration for back animation.
        animation.Configuration = new DirectConnectedAnimationConfiguration();
    }
}

Hedef sayfada animasyonu başlatın.

// Page_A.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    ConnectedAnimation animation =
        ConnectedAnimationService.GetForCurrentView().GetAnimation("backAnimation");
    if (animation != null)
    {
        animation.TryStart(SourceImage);
    }
}

Animasyon kurulduğu zamandan başlatılmasına kadar geçen sürede, animasyon kaynağı uygulamadaki diğer arabirim elemanlarının üzerinde donmuş olarak görünür. Bu, diğer tüm geçiş animasyonlarını aynı anda gerçekleştirmenizi sağlar. Bu nedenle, kaynak öğenin varlığı dikkat dağıtıcı hale gelebileceğinden, iki adım arasında yaklaşık 250 milisaniyeden fazla beklememelisiniz. Bir animasyon hazırlarsanız ve üç saniye içinde başlatmazsanız sistem animasyonu atacak ve sonraki TryStart çağrıları başarısız olacaktır.

Liste ve ızgara deneyimlerinde bağlı animasyon

Genellikle, bir liste veya ızgara denetiminden ya da bu denetime bağlı bir animasyon oluşturmak istersiniz. Bu işlemi basitleştirmek için ListView ve GridView,PrepareConnectedAnimation ve TryStartConnectedAnimationAsync'te iki yöntemi kullanabilirsiniz.

Örneğin, veri şablonunda "PortraitEllipse" adlı bir öğe içeren bir ListView'nuz olduğunu varsayalım.

<ListView x:Name="ContactsListView" Loaded="ContactsListView_Loaded">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="vm:ContactsItem">
            <Grid>
                …
                <Ellipse x:Name="PortraitEllipse" … />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Belirli bir liste öğesine karşılık gelen elips ile bağlantılı bir animasyon hazırlamak için, benzersiz bir anahtar, öğe ve "PortraitEllipse" adıyla PrepareConnectedAnimation yöntemini çağırın.

void PrepareAnimationWithItem(ContactsItem item)
{
     ContactsListView.PrepareConnectedAnimation("portrait", item, "PortraitEllipse");
}

Bu öğeyle bir animasyonu hedef olarak başlatmak için (örneğin, ayrıntılı bir görünümden geri dönerken ) TryStartConnectedAnimationAsync komutunu kullanın. ListView için veri kaynağını yeni yüklediyseniz, Ilgili öğe kapsayıcısı oluşturulana kadar TryStartConnectedAnimationAsync animasyonu başlatmak için bekler.

private async void ContactsListView_Loaded(object sender, RoutedEventArgs e)
{
    ContactsItem item = GetPersistedItem(); // Get persisted item
    if (item != null)
    {
        ContactsListView.ScrollIntoView(item);
        ConnectedAnimation animation =
            ConnectedAnimationService.GetForCurrentView().GetAnimation("portrait");
        if (animation != null)
        {
            await ContactsListView.TryStartConnectedAnimationAsync(
                animation, item, "PortraitEllipse");
        }
    }
}

Eşgüdümlü animasyon

Eşgüdümlü animasyon, bir öğenin bağlı animasyon hedefiyle birlikte görüntülendiği ve ekranda hareket eden bağlı animasyon öğesiyle eşgüdümlü olarak gösterildiği özel bir giriş animasyon türüdür. Eşgüdümlü animasyonlar bir geçişe daha fazla görsel ilgi ekleyebilir ve kullanıcının dikkatini kaynak ve hedef görünümler arasında paylaşılan bağlama daha fazla çekebilir. Bu görüntülerde, öğenin başlık yazısı, eşgüdümlü bir animasyon ile hareket ediyor.

Eşgüdümlü animasyon yerçekimi yapılandırmasını kullandığında, yerçekimi hem bağlı animasyon öğesine hem de eşgüdümlü öğelere uygulanır. Eşgüdümlü öğeler, bağlı öğeyle birlikte yan yana "süzülerek" hareket edecektir, bu nedenle öğeler eşgüdümlü kalır.

Bağlı animasyona eşgüdümlü öğeler eklemek için TryStart'ın iki parametreli aşırı yüklemesini kullanın. Bu örnek, "CoverImage" adlı bağlı animasyon öğesiyle eşzamanlı olarak giriş yapan "DescriptionRoot" adlı Grid layout'un koordineli animasyonunu gösterir.

<!-- DestinationPage.xaml -->
<Grid>
    <Image x:Name="CoverImage" />
    <Grid x:Name="DescriptionRoot" />
</Grid>

// DestinationPage.xaml.cs
void OnNavigatedTo(NavigationEventArgs e)
{
    var animationService = ConnectedAnimationService.GetForCurrentView();
    var animation = animationService.GetAnimation("coverImage");

    if (animation != null)
    {
        // Don't need to capture the return value as we are not scheduling
        // any subsequent animations.
        animation.TryStart(CoverImage, new UIElement[] { DescriptionRoot });
     }
}

Öneriler

• Kaynak ve hedef sayfalar arasında bir öğenin paylaşıldığı sayfa geçişlerinde bağlı animasyon kullanın.
• İleri gezinti için GravityConnectedAnimationConfiguration kullanın.
• Geri gezinti için DirectConnectedAnimationConfiguration kullanın.
• Bağlı animasyonu hazırlamak ve başlatmak arasında ağ istekleri veya uzun süre çalışan diğer asenkron işlemleri beklemeyin. Geçişi önceden çalıştırmak için gerekli bilgileri önceden yüklemeniz veya hedef görünümde yüksek çözünürlüklü bir görüntü yüklenirken düşük çözünürlüklü yer tutucu görüntü kullanmanız gerekebilir.
• ConnectedAnimationService kullanıyorsanız Çerçevede geçiş animasyonunu önlemek için SuppressNavigationTransitionInfo kullanın, çünkü bağlı animasyonların varsayılan gezinti geçişleriyle aynı anda kullanılması amaçlanmamıştır. Gezinti geçişlerini kullanma hakkında daha fazla bilgi için bkz. NavigationThemeTransition .

İlgili makaleler

ConnectedAnimation

ConnectedAnimationService

NavigationThemeTransition