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.