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, nesneler üzerinde VisualElement çalışan sınıfı tarafından ViewExtensions sağlanan uzantı yöntemleriyle oluşturulabilir:
- CancelAnimations tüm animasyonları iptal eder.
- FadeTo özelliğine Opacity animasyon ekler VisualElement.
- RelScaleTo özelliğine ScaleVisualElementanimasyonlu artımlı artış veya azaltma uygular.
- RotateTo özelliğine Rotation animasyon ekler VisualElement.
- RelRotateTo özelliğine RotationVisualElementanimasyonlu artımlı artış veya azaltma uygular.
- RotateXTo özelliğine RotationX animasyon ekler VisualElement.
- RotateYTo özelliğine RotationY animasyon ekler VisualElement.
- ScaleTo özelliğine Scale animasyon ekler VisualElement.
- ScaleXTo özelliğine ScaleX animasyon ekler VisualElement.
- ScaleYTo özelliğine ScaleY animasyon ekler VisualElement.
- TranslateTo ve özelliklerine TranslationXTranslationY animasyon ekler VisualElement.
Varsayılan olarak, her animasyon 250 milisaniye sürer. Ancak, animasyon oluşturulurken her animasyon için bir süre belirtilebilir.
Dekont
ViewExtensions sınıfı da bir LayoutTo uzantı yöntemi 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.
sınıfındaki animasyon uzantısı yöntemlerinin ViewExtensions tümü zaman uyumsuz olur ve bir Task<bool>
nesne döndürür. Dönüş değeri, false
animasyon tamamlanırsa ve true
animasyon iptal edilirse olur. Bu nedenle, animasyon işlemleri işleciyle await
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.
Animasyonların arka planda tamamlanmasını sağlamak için bir gereksinim varsa işleç await
atlanabilir. Bu senaryoda, animasyon uzantısı yöntemleri animasyonu başlatıldıktan sonra, animasyon arka planda gerçekleşirken hızlı bir şekilde döndürülecektir. 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
sınıfındaki ViewExtensions 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.
Döndürme
Döndürme yöntemiyle RotateTo gerçekleştirilir ve bu yöntem bir öğenin özelliğini aşamalı olarak değiştirir Rotation :
await image.RotateTo(360, 2000);
image.Rotation = 0;
Bu örnekte, bir Image örnek 2 saniye (2000 milisaniye) üzerinde 360 dereceye kadar döndürülür. RotateTo yöntemi, animasyonun başlangıcı için öğesinin geçerli Rotation özellik değerini alır ve ardından 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 olarak sıfırlanır. Bu, özelliğin Rotation animasyon sona erdikten sonra 360'ta kalmamasını sağlar ve bu da ek döndürmeleri engeller.
Dekont
yöntemine RotateTo ek olarak, sırasıyla ve özelliklerine RotationX
animasyon uygulayan ve RotateYToRotationY
yöntemleri de RotateXTo vardır.
Göreli döndürme
Göreli döndürme, bir öğenin özelliğini aşamalı olarak değiştiren Rotation yöntemiyle RelRotateTo gerçekleştirilir:
await image.RelRotateTo(360, 2000);
Bu örnekte bir örnek, Image başlangıç konumundan 2 saniye (2000 milisaniye) üzerinde 360 derece döndürülür. RelRotateTo yöntemi, animasyonun başlangıcı için öğesinin geçerli Rotation özellik değerini alır ve ardından bu değerden değere artı ilk bağımsız değişkenine (360) 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çeklendirme
Ölçeklendirme, bir öğenin özelliğini aşamalı olarak değiştiren Scale
yöntemiyle ScaleTo gerçekleştirilir:
await image.ScaleTo(2, 2000);
Bu örnekte bir örnek, Image boyutunun iki katına 2 saniye (2000 milisaniye) kadar ölçeklendirilir. ScaleTo yöntemi, animasyonun başlangıcı için öğesinin geçerli Scale özellik değerini alır ve ardından bu değerden ilk bağımsız değişkenine ölçeklendirilir. Bu, görüntünün boyutunu boyutunu iki katına genişletme etkisine sahiptir.
Dekont
yöntemine ScaleTo ek olarak, sırasıyla ve özelliklerine ScaleX
animasyon uygulayan ve ScaleYToScaleY
yöntemleri de ScaleXTo vardır.
Göreli ölçeklendirme
Göreli ölçeklendirme yöntemiyle RelScaleTo gerçekleştirilir ve bu yöntem bir öğenin özelliğini aşamalı olarak değiştirir Scale :
await image.RelScaleTo(2, 2000);
Bu örnekte bir örnek, Image boyutunun iki katına 2 saniye (2000 milisaniye) kadar ölçeklendirilir. RelScaleTo yöntemi, animasyonun başlangıcı için öğesinin geçerli Scale özellik değerini alır ve ardından bu değerden değere artı ilk bağımsız değişkenine ö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 AnchorX
öğenin ve AnchorY
özellikleri, ve Scale özellikleri için ölçeklendirme veya döndürme merkezini Rotation ayarlar. Bu nedenle, değerleri ve ScaleTo yöntemlerini de etkilerRotateTo.
Image Bir düzenin ortasına yerleştirilmiş olan bir göz önüne alındığında, aşağıdaki kod örneği, özelliğini ayarlayarak görüntünün düzenin merkezinde döndürülmesini AnchorY
gösterir:
double radius = Math.Min(absoluteLayout.Width, absoluteLayout.Height) / 2;
image.AnchorY = radius / image.Height;
await image.RotateTo(360, 2000);
Örneği düzenin Image ortasında döndürmek için ve AnchorY özellikleri, AnchorX genişliğine ve yüksekliğine Imagegöre değerlere ayarlanmalıdır. Bu örnekte, öğesinin Image merkezi düzenin merkezinde olacak şekilde tanımlanmıştır ve bu nedenle varsayılan AnchorX 0,5 değeri değiştirilmesini gerektirmez. Ancak özelliği, düzenin AnchorY en üstünden Image orta noktasına kadar olan bir değer olarak yeniden tanımlanır. Bu, düzenin Image orta noktası çevresinde 360 derece tam döndürme olmasını sağlar.
Çeviri
Çeviri, bir öğenin ve TranslationY özelliklerini aşamalı olarak değiştiren TranslationX yöntemiyle TranslateTo gerçekleştirilir:
await image.TranslateTo(-100, -100, 1000);
Bu örnekte, örnek 1 saniyeden Image (1000 milisaniye) fazla yatay ve dikey olarak çevrilir. yöntemi aynı TranslateTo 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ğı çevrilir.
Ö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.
Solma
Bir öğenin özelliğini aşamalı olarak değiştiren Opacity yöntemiyle FadeTo soluklama gerçekleştirilir:
image.Opacity = 0;
await image.FadeTo(1, 4000);
Bu örnekte örnek Image 4 saniyeden (4000 milisaniye) kısalır. FadeTo yöntemi, animasyonun başlangıcı için öğesinin 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 işleçle await
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 örnek Image 6 saniye (6000 milisaniye) üzerinde çevrilmiştir. çevirisi Image beş animasyon kullanır ve işleç her animasyonun await
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 örnek Image ölçeklendirilir ve aynı anda 4 saniye (4000 milisaniye) üzerinde döndürülür. öğesinin Image ölçeklenmesi, döndürmeyle aynı anda gerçekleşen iki sıralı animasyonu kullanır. RotateTo yöntemi bir await
işleç olmadan yürütülür ve ilk ScaleTo animasyon başlarken hemen döndürür. await
İlk yöntemdeki işleç, ilk ScaleTo yöntem tamamlanana kadar ScaleTo ikinci ScaleTo yöntemi geciktirmektedir. Bu noktada RotateTo animasyon yarı yarıya Image tamamlanır ve 180 derece döndürülür. Son 2 saniye boyunca (2000 milisaniye), ikinci ScaleTo animasyon ve animasyon tamamlanmıştır RotateTo .
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
nesne döndürür ve her biri bir nesne döndüren Task
bir yöntem koleksiyonunu kabul eder. Aşağıdaki Task.WhenAny
kod örneğinde gösterildiği gibi, koleksiyonundaki herhangi bir yöntem yürütmeyi tamamladığında yöntemi tamamlar:
await Task.WhenAny<bool>
(
image.RotateTo(360, 4000),
image.ScaleTo(2, 2000)
);
await image.ScaleTo(1, 2000);
Bu örnekte yöntemi Task.WhenAny
iki görev içerir. İlk görev bir Image örneği 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 yöntem Task.WhenAny
çağrısı tamamlar. Ancak, yöntem hala çalışıyor olsa RotateTo da, ikinci ScaleTo yöntem başlayabilir.
Yöntemi, Task.WhenAll
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 yöntemi, Task.WhenAll
her biri 10 dakikadan fazla yürütülen üç görev içerir. Her Task
biri farklı sayıda 360 derece döndürme – için 307 döndürme, için RotateToRotateXTo251 döndürme ve için RotateYTo199 döndürme yapar. Bu değerler asal sayılardır, bu nedenle döndürmelerin eşitlenmediğinden ve bu nedenle yinelenen desenlerle sonuçlanmayacağından emin olur.
Animasyonları iptal etme
Bir uygulama, uzantı yöntemine yapılan bir çağrıyla bir veya daha fazla animasyonu CancelAnimations iptal edebilir:
image.CancelAnimations();
Bu örnekte, örnekte çalışan Image tüm animasyonlar hemen iptal edilir.