Aracılığıyla paylaş

Içinde Basit Animasyonlar Xamarin.Forms

ViewExtensions sınıfı, basit animasyonlar oluşturmak için kullanılabilecek uzantı yöntemleri sağlar. Bu makalede ViewExtensions sınıfını kullanarak animasyon oluşturma ve iptal etme işlemleri gösterilmektedir.

sınıfı, ViewExtensions basit animasyonlar oluşturmak için kullanılabilecek aşağıdaki uzantı yöntemlerini 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ı 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. Bu nedenle, yalnızca alt sınıflar tarafından Layout kullanılmalıdı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 yöntemleri genellikle işleç ile birlikte kullanılmalıdır ve bu da animasyonların await ne zaman tamamlandığını kolayca belirlemeyi mümkün kılar. Buna ek olarak, ö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.

operatör hakkında await daha fazla bilgi için bkz . Zaman Uyumsuz Desteğe Genel Bakış.

Tek Animasyonlar

içindeki 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. Bu bölümde her animasyon işlemi incelanmıştır.

Döndürme

Aşağıdaki kod örneği, bir Imageöğesinin RotateTo özelliğine animasyon Rotation eklemek için yönteminin kullanılmasını gösterir:

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

Bu kod, 2 saniye (2000 milisaniye) üzerinde 360 dereceye kadar dönerek örneğe animasyon Image sağlar. RotateTo yöntemi, animasyonun başlangıcı için 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.

Aşağıdaki ekran görüntüleri, her platformda devam eden döndürmeyi gösterir:

Döndürme Animasyonu

Not

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

Göreli Döndürme

Aşağıdaki kod örneği, bir Imageöğesinin RelRotateTo özelliğini artımlı olarak artırmak veya azaltmak Rotation için yönteminin kullanılmasını gösterir:

await image.RelRotateTo (360, 2000);

Bu kod, 2 saniye (2000 milisaniye) üzerindeki başlangıç konumundan 360 derece döndürerek örneğe animasyon Image sağlar. RelRotateTo yöntemi, animasyonun başlangıcı için geçerli Rotation özellik değerini alır ve ardından bu değerden değere ve 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.

Aşağıdaki ekran görüntüleri, her platformda devam eden göreli döndürmeyi gösterir:

Göreli Döndürme Animasyonu

Ölçeklendirme

Aşağıdaki kod örneği, bir Imageöğesinin ScaleTo özelliğine animasyon Scale eklemek için yönteminin kullanılmasını gösterir:

await image.ScaleTo (2, 2000);

Bu kod, boyutunu 2 saniye (2000 milisaniye) üzerinde iki katına çıkararak örneğe animasyon Image katıyor. yöntemi, ScaleTo animasyonun başlangıcı için geçerli Scale özellik değerini (varsayılan değer 1) alır ve ardından bu değerden ilk bağımsız değişkenine (2) ölçeklendirir. Bu, görüntünün boyutunu boyutunu iki katına genişletme etkisine sahiptir.

Aşağıdaki ekran görüntüleri, her platformda devam eden ölçeklendirmeyi gösterir:

Ölçeklendirme Animasyonu

Not

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

Göreli Ölçeklendirme

Aşağıdaki kod örneği, bir Imageöğesinin RelScaleTo özelliğine animasyon Scale eklemek için yönteminin kullanılmasını gösterir:

await image.RelScaleTo (2, 2000);

Bu kod, boyutunu 2 saniye (2000 milisaniye) üzerinde iki katına çıkararak örneğe animasyon Image katıyor. RelScaleTo yöntemi, animasyonun başlangıcı için geçerli Scale özellik değerini alır ve ardından bu değerden değere ve ilk bağımsız değişkenine (2) ölçeklendirilir. Bu, her animasyonun başlangıç konumundan her zaman 2'lik bir ölçeklendirme olmasını sağlar.

Tutturucularla Ölçeklendirme ve Döndürme

AnchorX ve özellikleri, ve AnchorY 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, aşağıdaki ekran görüntülerinde Image gösterildiği gibi düzenin orta noktası çevresinde 360 derece tam döndürme sağlar:

Yer İşaretleriyle Döndürme Animasyonu

Çeviri

Aşağıdaki kod örneği, bir öğesinin TranslateTo ve TranslationY özelliklerine animasyon TranslationX eklemek için yönteminin Imagekullanılmasını gösterir:

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

Bu kod, 1 saniyeden Image (1000 milisaniye) yatay ve dikey olarak çevirerek örneğe animasyon sağlar. yöntemi, TranslateTo görüntüyü aynı anda 100 piksel sola ve 100 piksel 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.

Aşağıdaki ekran görüntüleri, her platformda devam eden çeviriyi gösterir:

Çeviri Animasyonu

Not

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

Aşağıdaki kod örneği, bir Imageöğesinin FadeTo özelliğine animasyon Opacity eklemek için yönteminin kullanılmasını gösterir:

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

Bu kod Image , örneğe 4 saniyeden (4000 milisaniye) fazla soluklaştırarak animasyon sağlar. FadeTo yöntemi, animasyonun başlangıcı için geçerli Opacity özellik değerini alır ve ardından bu değerden ilk bağımsız değişkenine (1) kadar kaybolur.

Aşağıdaki ekran görüntüleri, her platformda devam eden azalmayı gösterir:

Soluk animasyon

Bileşik Animasyonlar

Bileşik animasyon, animasyonların sıralı bir birleşimidir ve aşağıdaki kod örneğinde gösterildiği gibi 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, Image 6 saniye (6000 milisaniye) üzerinden ç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, aşağıdaki kod örneğinde gösterildiği gibi, beklenen ve beklenilmeyen animasyonların karıştırılmasıyla oluşturulabilir:

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

Bu örnekte, 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öntem çağrısındaki işleç, ilk ScaleTo ScaleTo yöntem çağrısı tamamlanana kadar ikinci ScaleTo yöntem çağrısını geciktirir. Bu noktada RotateTo animasyon yarı yolda tamamlanır ve Image 180 derece döndürülür. Son 2 saniye boyunca (2000 milisaniye), ikinci ScaleTo animasyon ve animasyon tamamlanmıştır RotateTo .

Eşzamanlı Olarak Birden Çok Zaman Uyumsuz Yöntem Çalıştırma

static Task.WhenAny ve Task.WhenAll yöntemleri birden çok zaman uyumsuz yöntemi eşzamanlı olarak çalıştırmak için kullanılır ve bu nedenle bileşik animasyonlar oluşturmak için kullanılabilir. 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öntem Task.WhenAny çağrısı iki görev içerir. İlk görev görüntüyü 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, Task.WhenAll yöntem çağrısı üç görev içerir ve bunların her biri 10 dakikadan fazla yürütülür. 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.

Aşağıdaki ekran görüntüleri, her platformda devam eden birden çok döndürmeyi gösterir:

Bileşik Animasyon

Animasyonları İptal Etme

Bir uygulama, aşağıdaki kod örneğinde gösterildiği gibi uzantı yöntemi çağrısıyla CancelAnimations bir veya daha fazla animasyonu iptal edebilir:

image.CancelAnimations();

Bu işlem, örnekte çalışmakta Image olan tüm animasyonları hemen iptal eder.

Özet

Bu makalede, sınıfını kullanarak animasyon oluşturma ve iptal etme işlemleri gösterilmiştir ViewExtensions . Bu sınıf, örnekleri döndüren, ölçeklendiren, çeviren ve soluklayan VisualElement basit animasyonlar oluşturmak için kullanılabilecek uzantı yöntemleri sağlar.

  • Last updated on