Aracılığıyla paylaş

Temel animasyon

  • Makale

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI) animasyon sınıfları görsel öğelerin farklı özelliklerini hedefler ve tipik bir temel animasyon bir özelliği belirli bir süre boyunca bir değerden diğerine aşamalı olarak değiştirir.

Temel animasyonlar, VisualElement nesneler üzerinde çalışan ViewExtensions sınıfı tarafından sağlanan uzantı yöntemleriyle oluşturulabilir:

Varsayılan olarak, her animasyon 250 milisaniye sürer. Ancak, animasyon oluşturulurken her animasyon için bir süre belirtilebilir.

Not

ViewExtensions sınıfı, LayoutTo uzantı yöntemini de sağlar. Ancak, bu yöntem, boyut ve konum değişiklikleri içeren düzen durumları arasındaki geçişlere animasyon eklemek için düzenler tarafından kullanılmak üzere tasarlanmıştır.

ViewExtensions sınıfındaki animasyon uzantısı yöntemlerinin tümü zaman uyumsuz olur ve bir Task<bool> nesnesi döndürür. Dönüş değeri, animasyon tamamlanırsa false ve animasyon iptal edilirse true. Bu nedenle, animasyon işlemleri await işleciyle birleştirildiğinde, önceki yöntem tamamlandıktan sonra yürütülen sonraki animasyon yöntemleriyle sıralı animasyonlar oluşturmak mümkün hale gelir. Daha fazla bilgi için bkz. Bileşik animasyonlar.

Arka planda animasyonu tamamlama gereksinimi varsa await işleci atlanabilir. Bu senaryoda, animasyon uzatma yöntemleri animasyonu başlattıktan sonra hızla geri dönecek ve animasyon arka planda gerçekleşecektir. Bileşik animasyonlar oluşturulurken bu işlemden yararlanabilirsiniz. Daha fazla bilgi için bkz. Bileşik animasyonlar.

Android'de, animasyonlar sistem animasyon ayarlarına saygılıdır:

  • Sistemin animasyonları devre dışı bırakılırsa (erişilebilirlik özellikleri veya geliştirici özellikleri tarafından), yeni animasyonlar hemen son durumlarına atlar.
  • Animasyonlar devam ederken cihazın güç tasarrufu modu etkinleştirilirse, animasyonlar hemen bitmiş durumlarına atlar.
  • Animasyonlar devam ederken cihazın animasyon süreleri sıfır (devre dışı) olarak ayarlanırsa ve API sürümü 33 veya daha büyükse, animasyonlar hemen son durumlarına atlar.

Tek animasyonlar

ViewExtensions sınıfındaki her uzantı yöntemi, belirli bir süre boyunca bir özelliği bir değerden başka bir değere aşamalı olarak değiştiren tek bir animasyon işlemi uygular.

Rotasyon

Döndürme, bir öğenin Rotation özelliğini aşamalı olarak değiştiren RotateTo yöntemiyle gerçekleştirilir:

await image.RotateTo(360, 2000);
image.Rotation = 0;

Bu örnekte, bir Image örneği 2 saniye (2000 milisaniye) üzerinde 360 dereceye kadar döndürülür. RotateTo yöntemi, animasyonun başlangıcı için öğenin geçerli Rotation özellik değerini alır ve bu değerden ilk bağımsız değişkenine (360) döner. Animasyon tamamlandıktan sonra görüntünün Rotation özelliği 0'a sıfırlanır. Bu, animasyon bittikten sonra Rotation özelliğinin 360'ta kalmamasını sağlar ve bu da ek döndürmeleri engeller.

Not

RotateTo yöntemine ek olarak, sırasıyla RotationX ve RotationY özelliklerine animasyon uygulayan RotateXTo ve RotateYTo yöntemleri de vardır.

Göreli döndürme

Göreli döndürme, bir öğenin Rotation özelliğini aşamalı olarak değiştiren RelRotateTo yöntemiyle gerçekleştirilir:

await image.RelRotateTo(360, 2000);

Bu örnekte, bir Image örneği 2 saniye (2000 milisaniye) üzerinde başlangıç konumundan 360 derece döndürülür. RelRotateTo yöntemi, animasyonun başlangıç noktası için öğenin şu anki Rotation özellik değerini alır ve ardından bu değerden, değer artı ilk bağımsız değişkeni (360) kadar döner. Bu, her animasyonda başlangıç konumundan her zaman 360 derece döndürme olmasını sağlar. Bu nedenle, animasyon devam ederken yeni bir animasyon çağrılırsa, geçerli konumdan başlar ve 360 derecelik bir artış olmayan bir konumda sona erebilir.

Ölçekleme

Ölçeklendirme, bir öğenin Scale özelliğini aşamalı olarak değiştiren ScaleTo yöntemiyle gerçekleştirilir:

await image.ScaleTo(2, 2000);

Bu örnekte bir Image örneğin ölçeği 2 saniye (2000 milisaniye) üzerinden iki katına çıkarılır. ScaleTo yöntemi, animasyonun başlangıcında öğenin geçerli Scale özellik değerini alır ve ardından bu değerden ilk parametreye doğru ölçeklendirir. Bu, görüntünün boyutunu boyutunu iki katına genişletme etkisine sahiptir.

Not

ScaleTo yöntemine ek olarak, sırasıyla ScaleX ve ScaleY özelliklerine animasyon uygulayan ScaleXTo ve ScaleYTo yöntemleri de vardır.

Göreli ölçeklendirme

Göreli ölçeklendirme, öğenin Scale özelliğini aşamalı olarak değiştiren RelScaleTo yöntemiyle gerçekleştirilir:

await image.RelScaleTo(2, 2000);

Bu örnekte bir Image örneğin ölçeği 2 saniye (2000 milisaniye) üzerinden iki katına çıkarılır. RelScaleTo yöntemi, animasyonun başlangıcı için öğenin geçerli Scale özellik değerini alır, ardından bu değerden başlayarak bu değere ilk bağımsız değişkeni eklenmiş hâle ölçeklendirir. Bu, her animasyonun başlangıç konumundan her zaman 2'lik bir ölçeklendirme olmasını sağlar.

Tutturucularla ölçeklendirme ve döndürme

Görsel öğenin AnchorX ve AnchorY özellikleri, Rotation ve Scale özellikleri için ölçeklendirme veya döndürme merkezini ayarlar. Bu nedenle, değerleri RotateTo ve ScaleTo yöntemlerini de etkiler.

Düzenin ortasına yerleştirilmiş bir Image verilen aşağıdaki kod örneği, AnchorY özelliği ayarlanarak görüntünün düzenin merkezi etrafında döndürülmesini gösterir.

double radius = Math.Min(absoluteLayout.Width, absoluteLayout.Height) / 2;
image.AnchorY = radius / image.Height;
await image.RotateTo(360, 2000);

Image örneğini düzenin ortasında döndürmek için, AnchorX ve AnchorY özellikleri Imagegenişliğine ve yüksekliğine göre değerlere ayarlanmalıdır. Bu örnekte, Image merkezi düzenin merkezinde olacak şekilde tanımlanmıştır ve bu nedenle varsayılan AnchorX değeri 0,5'in değiştirilmesini gerektirmez. Ancak AnchorY özelliği, Image üst kısmından düzenin orta noktasına kadar olan bir değer olarak yeniden tanımlanır. Bu, Image'ın düzenin orta noktası çevresinde 360 derece tam bir dönüş yapmasını sağlar.

Çeviri

Çeviri, bir öğenin TranslationX ve TranslationY özelliklerini aşamalı olarak değiştiren TranslateTo yöntemiyle gerçekleştirilir:

await image.TranslateTo(-100, -100, 1000);

Bu örnekte, Image örneği 1 saniyeden (1000 milisaniye) fazla yatay ve dikey olarak çevrilir. TranslateTo yöntemi aynı anda görüntü 100 cihazdan bağımsız birimi sola ve 100 cihazdan bağımsız birimi yukarı doğru çevirir. Bunun nedeni, birinci ve ikinci bağımsız değişkenlerin her ikisinin de negatif sayılar olmasıdır. Pozitif sayılar sağlanarak görüntü sağa ve aşağıya kaydırılır.

Önemli

Bir öğe başlangıçta ekrandan çıkarılıp sonra ekrana çevrilirse, çeviriden sonra öğenin giriş düzeni ekran dışında kalır ve kullanıcı bununla etkileşim kuramaz. Bu nedenle, bir görünümün son konumuna yerleştirilmesi ve ardından gerekli çevirilerin gerçekleştirilmesi önerilir.

Yavaşça Kaybolma

Bir öğenin Opacity özelliğini aşamalı olarak değiştiren FadeTo yöntemiyle solma gerçekleştirilir.

image.Opacity = 0;
await image.FadeTo(1, 4000);

Bu örnekte, Image örneği 4 saniyeden (4000 milisaniye) kısalır. FadeTo yöntemi, animasyonun başlangıcı için öğenin geçerli Opacity özellik değerini alır ve ardından bu değerden ilk bağımsız değişkenine kadar kaybolur.

Bileşik animasyonlar

Bileşik animasyon, animasyonların sıralı bir birleşimidir ve await işleciyle oluşturulabilir:

await image.TranslateTo(-100, 0, 1000);    // Move image left
await image.TranslateTo(-100, -100, 1000); // Move image diagonally up and left
await image.TranslateTo(100, 100, 2000);   // Move image diagonally down and right
await image.TranslateTo(0, 100, 1000);     // Move image left
await image.TranslateTo(0, 0, 1000);       // Move image up

Bu örnekte, Image örneği 6 saniyeden (6000 milisaniye) fazla çevrilmiştir. Image çevirisi beş animasyon kullanır ve await işleci her animasyonun sırayla yürütüldüğünü belirtir. Bu nedenle, sonraki animasyon yöntemleri önceki yöntem tamamlandıktan sonra yürütülür.

Bileşik animasyonlar

Bileşik animasyon, iki veya daha fazla animasyonun aynı anda çalıştığı animasyonların birleşimidir. Bileşik animasyonlar, beklenen ve beklenilmeyen animasyonlar birleştirilerek oluşturulabilir:

image.RotateTo(360, 4000);
await image.ScaleTo(2, 2000);
await image.ScaleTo(1, 2000);

Bu örnekte, Image örneği ölçeklendirilir ve aynı anda 4 saniye (4000 milisaniye) üzerinde döndürülür. Image ölçeklendirmesinde döndürme ile aynı anda gerçekleşen iki sıralı animasyon kullanılır. RotateTo yöntemi bir await işleci olmadan yürütülür ve hemen döner, ardından ilk ScaleTo animasyonu başlar. İlk ScaleTo yöntemindeki await işleci, ikinci ScaleTo yöntemini ilk ScaleTo yöntemi tamamlanana kadar geciktirmektedir. Bu noktada RotateTo animasyonu yarı yarıya tamamlanır ve Image 180 derece döndürülür. Son 2 saniye boyunca (2000 milisaniye), ikinci ScaleTo animasyon ve RotateTo animasyon tamamlanmıştır.

Birden çok animasyonu eşzamanlı olarak çalıştırma

Task.WhenAny ve Task.WhenAll yöntemleri birden çok zaman uyumsuz yöntemi eşzamanlı olarak çalıştırmak için kullanılabilir ve bu nedenle bileşik animasyonlar oluşturabilir. Her iki yöntem de bir Task nesnesi döndürür ve her biri bir Task nesnesi döndüren bir yöntem koleksiyonunu kabul eder. Task.WhenAny yöntemi, aşağıdaki kod örneğinde gösterildiği gibi koleksiyonundaki herhangi bir yöntem yürütmeyi tamamladığında tamamlar:

await Task.WhenAny<bool>
(
  image.RotateTo(360, 4000),
  image.ScaleTo(2, 2000)
);
await image.ScaleTo(1, 2000);

Bu örnekte, Task.WhenAny yöntemi iki görev içerir. İlk görev bir Image örneğini 4 saniye (4000 milisaniye) üzerinde döndürür ve ikinci görev görüntüyü 2 saniye (2000 milisaniye) üzerinde ölçeklendirir. İkinci görev tamamlandığında, Task.WhenAny yöntem çağrısı tamamlar. Ancak, RotateTo yöntemi hala çalışıyor olsa da, ikinci ScaleTo yöntemi başlayabilir.

Task.WhenAll yöntemi, aşağıdaki kod örneğinde gösterildiği gibi koleksiyonundaki tüm yöntemler tamamlandığında tamamlanır:

// 10 minute animation
uint duration = 10 * 60 * 1000;
await Task.WhenAll
(
  image.RotateTo(307 * 360, duration),
  image.RotateXTo(251 * 360, duration),
  image.RotateYTo(199 * 360, duration)
);

Bu örnekte, Task.WhenAll yöntemi her biri 10 dakikadan fazla yürütülen üç görev içerir. Her Task farklı sayıda 360 derece döndürme – RotateToiçin 307 döndürme, RotateXToiçin 251 döndürme ve RotateYToiçin 199 döndürme yapar. Bu değerler asal sayılardır, bu yüzden döndürmelerin eşitlenmemesini ve yinelenen desenlerle sonuçlanmamasını sağlar.

Animasyonları iptal etme

CancelAnimations uzantısı yöntemi, belirli bir VisualElementüzerinde çalışan döndürme, ölçeklendirme, çeviri ve solma gibi animasyonları iptal etmek için kullanılır.

image.CancelAnimations();

Bu örnekte, Image örneğinde çalışan tüm animasyonlar hemen iptal edilir.