Temel animasyon
.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:
- CancelAnimations animasyonları iptal eder.
- FadeTo, bir VisualElement'nin Opacity özelliğini canlandırır.
- RelScaleTo, bir VisualElement'nin Scale özelliğine animasyonlu artımlı artış veya azaltma uygular.
- RotateTo, bir VisualElement'nin Rotation özelliğine animasyon verir.
- RelRotateTo, bir VisualElement'nin Rotation özelliğine animasyonlu artımlı bir artış veya azalma uygular.
- RotateXTo, bir VisualElement'nin RotationX özelliğine animasyon uygular.
- RotateYTo, bir VisualElement'nin RotationY özelliğine animasyon uygular.
- ScaleTo, bir VisualElement'nin Scale özelliğini animasyonla hareketlendirir.
- ScaleXTo, bir VisualElement'nin ScaleX özelliğini canlandırır.
- ScaleYTo, bir VisualElement'nin ScaleY özelliğini canlandırır.
- TranslateTo, bir VisualElement'ün TranslationX ve TranslationY özelliklerinin animasyonunu sağlar.
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.