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, ViewExtensions nesneler üzerinde çalışan VisualElement sınıfı tarafından sağlanan uzantı yöntemleriyle oluşturulabilir:

• CancelAnimations animasyonları iptal eder.
• FadeTo animates the Opacity property of a VisualElement.
• RelScaleTo applies an animated incremental increase or decrease to the Scale property of a VisualElement.
• RotateTo animates the Rotation property of a VisualElement.
• RelRotateTo applies an animated incremental increase or decrease to the Rotation property of a VisualElement.
• RotateXTo animates the RotationX property of a VisualElement.
• RotateYTo animates the RotationY property of a VisualElement.
• ScaleTo animates the Scale property of a VisualElement.
• ScaleXTo animates the ScaleX property of a VisualElement.
• ScaleYTo animates the ScaleY property of a VisualElement.
• TranslateTo, bir TranslationX'ün TranslationY ve VisualElement ö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.

Note

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. For more information, see Compound animations.

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 RotateTo özelliğini aşamalı olarak değiştiren Rotation 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.

Note

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

Göreli döndürme

Göreli döndürme, bir öğenin RelRotateTo özelliğini aşamalı olarak değiştiren Rotation 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. The RelRotateTo method obtains the current Rotation property value of the element for the start of the animation, and then rotates from that value to the value plus its first argument (360). 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 ScaleTo özelliğini aşamalı olarak değiştiren Scale 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.

Note

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

Göreli ölçeklendirme

Göreli ölçeklendirme, öğenin RelScaleTo özelliğini aşamalı olarak değiştiren Scale 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. The RelScaleTo method obtains the current Scale property value of the element for the start of the animation, and then scales from that value to the value plus its first argument. Bu, her animasyonun başlangıç konumundan her zaman 2'lik bir ölçeklendirme olmasını sağlar.

Scaling and rotation with anchors

Görsel öğenin AnchorX ve AnchorY özellikleri, Rotation ve Scale özellikleri için ölçeklendirme veya döndürme merkezini ayarlar. Therefore, their values also affect the RotateTo and ScaleTo methods.

Given an Image that has been placed at the center of a layout, the following code example demonstrates rotating the image around the center of the layout by setting its AnchorY property:

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 TranslateTo ve TranslationX özelliklerini aşamalı olarak değiştiren TranslationY 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. This is because the first and second arguments are both negative numbers. Providing positive numbers would translate the image to the right, and down.

Ö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. Therefore, it's recommended that a view should be laid out in its final position, and then any required translations performed.

Fading

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

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

In this example, the Image instance fades in over 4 seconds (4000 milliseconds). The FadeTo method obtains the current Opacity property value of the element for the start of the animation, and then fades in from that value to its first argument.

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 await yöntemindeki ScaleTo 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.