uygulamasındaki Özel Animasyonlar Xamarin.Forms

Animation sınıfı, ViewExtensions sınıfında bir veya daha fazla Animasyon nesnesi oluşturan uzantı yöntemleriyle tüm Xamarin.Forms animasyonların yapı taşıdır. Bu makalede Animasyon sınıfını kullanarak animasyon oluşturma ve iptal etme, birden çok animasyonu eşitleme ve var olan animasyon yöntemleri tarafından animasyonlendirilmeyen özelliklere animasyon eklemeye yönelik özel animasyonlar oluşturma işlemleri gösterilmektedir.

Animasyonlu özelliğin başlangıç ve bitiş değerleri ve özelliğin değerini değiştiren bir geri çağırma da dahil olmak üzere bir Animation nesne oluşturulurken bir dizi parametre belirtilmelidir. Bir Animation nesne, çalıştırılıp eşitlenebilen bir alt animasyon koleksiyonunu da koruyabilir. Daha fazla bilgi için bkz . Alt Animasyonlar.

Alt animasyonlar içerebilen veya içerebilen sınıfla Animation oluşturulan bir animasyon çalıştırılarak yöntemi çağrılır Commit . Bu yöntem, animasyonun süresini ve diğer öğeler arasında animasyonun yinelenip yinelenmeymeyeceğini denetleen bir geri çağırma belirtir.

Buna ek olarak, sınıfı, Animation animasyonların işletim sistemi tarafından devre dışı bırakılıp bırakılmadığını belirlemek için incelenebilir bir IsEnabled özelliğe sahiptir( örneğin, güç tasarrufu modu etkinleştirildiğinde).

Animasyon oluşturma

Nesne oluştururken Animation , genellikle aşağıdaki kod örneğinde gösterildiği gibi en az üç parametre gerekir:

var animation = new Animation (v => image.Scale = v, 1, 2);

Bu kod, bir örneğin 1 değerinden Image 2 değerine kadar olan özelliğinin animasyonunu Scale tanımlar. tarafından Xamarin.Formstüretilen animasyonlu değer, özelliğin değerini değiştirmek için kullanıldığı ilk bağımsız değişken olarak belirtilen geri çağırmaya Scale geçirilir.

Animasyon, aşağıdaki kod örneğinde gösterildiği gibi yöntemine Commit yapılan bir çağrıyla başlatılır:

animation.Commit (this, "SimpleAnimation", 16, 2000, Easing.Linear, (v, c) => image.Scale = 1, () => true);

yönteminin Commit bir Task nesne döndürmediğini unutmayın. Bunun yerine, bildirimler geri çağırma yöntemleri aracılığıyla sağlanır.

yönteminde Commit aşağıdaki bağımsız değişkenler belirtilir:

İlk bağımsız değişken (sahip), animasyonun sahibini tanımlar. Bu, animasyonunun uygulandığı görsel öğe veya sayfa gibi başka bir görsel öğe olabilir.
İkinci bağımsız değişken (ad), animasyonu bir adla tanımlar. Ad, animasyonu benzersiz bir şekilde tanımlamak için sahiple birleştirilir. Bu benzersiz kimlik daha sonra animasyonunun çalışıp çalışmadığınıAnimationIsRunning () belirlemek veya iptal etmek için kullanılabilir (AbortAnimation ).
Üçüncü bağımsız değişken (hız), oluşturucuda Animation tanımlanan geri çağırma yöntemine yapılan her çağrı arasındaki milisaniye sayısını gösterir.
Dördüncü bağımsız değişken (uzunluk), animasyonun süresini milisaniye cinsinden gösterir.
Beşinci bağımsız değişken (kolaylaştırma), animasyonda kullanılacak kolaylaştırma işlevini tanımlar. Alternatif olarak, kolaylaştırıcı işlevi oluşturucuya Animation bağımsız değişken olarak belirtilebilir. Kolaylaştırma işlevleri hakkında daha fazla bilgi için bkz . Kolaylaştırma İşlevleri.
Altıncı bağımsız değişken (tamamlandı), animasyon tamamlandığında yürütülecek bir geri çağırmadır. Bu geri çağırma iki bağımsız değişken alır ve ilk bağımsız değişken son değeri belirtir ve ikinci bağımsız değişken animasyon iptal edilirse olarak ayarlanmış true bir bool bağımsız değişkendir. Alternatif olarak, tamamlanmış geri çağırma oluşturucuya Animation bağımsız değişken olarak belirtilebilir. Ancak, tek bir animasyonla, hem oluşturucuda Commit hem de Animation yöntemde tamamlanmış geri çağırmalar belirtilirse, yalnızca yönteminde Commit belirtilen geri çağırma yürütülür.
Yedinci bağımsız değişken (yinele), animasyonu tekrarlamanızı sağlayan bir geri çağırmadır. Animasyonun sonunda çağrılır ve döndürülmesi true animasyonun yinelenmesi gerektiğini gösterir.

Genel etki, kolaylaştırıcı işlevini kullanarak Linear bir öğesinin özelliğini 1'den 2'ye, 2 saniyeden (2000 milisaniye) fazla artıran Scale bir Image animasyon oluşturmaktır. Animasyon her tamamlandığında, Scale özelliği 1'e sıfırlanır ve animasyon yineler.

Not

Birbirinden bağımsız olarak çalışan eşzamanlı animasyonlar, her animasyon için bir Animation nesne oluşturulup her animasyonda yöntemi çağrılarak Commit oluşturulabilir.

Alt animasyonlar

sınıfıAnimation, diğer Animation nesnelerin eklendiği bir Animation nesne oluşturmayı içeren alt animasyonları da destekler. Bu, bir dizi animasyonun çalıştırılmasını ve eşitlenmesini sağlar. Aşağıdaki kod örneğinde alt animasyon oluşturma ve çalıştırma işlemleri gösterilmektedir:

var parentAnimation = new Animation ();
var scaleUpAnimation = new Animation (v => image.Scale = v, 1, 2, Easing.SpringIn);
var rotateAnimation = new Animation (v => image.Rotation = v, 0, 360);
var scaleDownAnimation = new Animation (v => image.Scale = v, 2, 1, Easing.SpringOut);

parentAnimation.Add (0, 0.5, scaleUpAnimation);
parentAnimation.Add (0, 1, rotateAnimation);
parentAnimation.Add (0.5, 1, scaleDownAnimation);

parentAnimation.Commit (this, "ChildAnimations", 16, 4000, null, (v, c) => SetIsEnabledButtonState (true, false));

Alternatif olarak, kod örneği aşağıdaki kod örneğinde gösterildiği gibi daha kısa yazılabilir:

new Animation {
    { 0, 0.5, new Animation (v => image.Scale = v, 1, 2) },
    { 0, 1, new Animation (v => image.Rotation = v, 0, 360) },
    { 0.5, 1, new Animation (v => image.Scale = v, 2, 1) }
    }.Commit (this, "ChildAnimations", 16, 4000, null, (v, c) => SetIsEnabledButtonState (true, false));

Her iki kod örneğinde de ek nesnelerin eklendiği bir üst Animation nesne oluşturulur Animation . yöntemindeki ilk iki bağımsız değişken, alt animasyona Add ne zaman başlanacağını ve bitirileceğini belirtir. Bağımsız değişken değerleri 0 ile 1 arasında olmalı ve üst animasyonda belirtilen alt animasyonunun etkin olacağı göreli süreyi temsil etmelidir. Bu nedenle, bu örnekte scaleUpAnimation , animasyonun ilk yarısında etkin olacak, scaleDownAnimation animasyonun ikinci yarısı için etkin olacak ve rotateAnimation tüm süre boyunca etkin olacaktır.

Genel etki, animasyonun 4 saniye (4000 milisaniye) üzerinde gerçekleşmesidir. özelliğine scaleUpAnimation Scale 1 ile 2 saniye boyunca animasyon ekler. ardından scaleDownAnimation özelliğine 2 saniyeden Scale 1'e kadar animasyon ekler. Her iki ölçek animasyonu da gerçekleşirken, rotateAnimation özelliğine 4 saniyeden Rotation fazla 0 ile 360 arasındaki animasyonlar eklenir. Ölçeklendirme animasyonlarının da kolaylaştırma işlevlerini kullandığını unutmayın. Kolaylaştırma SpringIn işlevi, daha büyük hale gelmeden önce öğesinin Image başlangıçta küçülmesini ve kolaylaştırma işlevinin SpringOut Image , animasyonun tamamının sonuna doğru gerçek boyutundan daha küçük olmasına neden olur.

Alt animasyonları kullanan bir Animation nesne ile aşağıdakiler arasında birkaç fark vardır:

Alt animasyonlar kullanılırken, alt animasyonda tamamlanan geri çağırma, çocuğun ne zaman tamamlandığını gösterir ve yönteme Commit geçirilen tamamlanmış geri çağırma, animasyonların tamamının ne zaman tamamlandığını gösterir.
Alt animasyonları kullanırken, yöntemindeki Commit yineleme geri çağırmasından geri dönmek true animasyonu yinelemeye neden olmaz, ancak animasyon yeni değerler olmadan çalışmaya devam eder.
Yöntemine Commit bir kolaylaştırma işlevi eklerken ve kolaylaştırma işlevi 1'den büyük bir değer döndürürse animasyon sonlandırılır. Kolaylaştırma işlevi 0'dan küçük bir değer döndürürse, değer 0'a sıkıştırılır. 0'dan küçük veya 1'den büyük bir değer döndüren bir kolaylaştırma işlevi kullanmak için yöntemi yerine Commit alt animasyonlardan birinde belirtilmesi gerekir.

sınıfı, Animation bir üst Animation nesneye alt animasyon eklemek için kullanılabilecek yöntemler de içerirWithConcurrent. Ancak, başlangıç ve bitiş bağımsız değişken değerleri 0 ile 1 arasında değildir, ancak alt animasyonun yalnızca 0 ile 1 arasında bir aralığa karşılık gelen bölümü etkin olur. Örneğin, yöntem WithConcurrent çağrısı 1 ile 6 arasında bir Scale özelliği hedefleyen bir alt animasyon tanımlarsa, ancak -2 ve 3 başlangıç ve bitiş değerleriyle, -2'nin Scale başlangıç değeri 1 değerine, 3'ün bitiş değeri ise 6 değerine karşılık gelirScale. 0 ve 1 aralığının dışındaki değerler animasyonda yer almadığından, Scale özellik yalnızca 3 ile 6 arasında animasyonlu olur.

Animasyonu iptal etme

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

this.AbortAnimation ("SimpleAnimation");

Animasyonların, animasyon sahibi ve animasyon adı birleşimiyle benzersiz olarak tanımlandığını unutmayın. Bu nedenle, animasyonu çalıştırırken belirtilen sahip ve ad, animasyonu iptal etmek için belirtilmelidir. Bu nedenle, kod örneği sayfaya ait olan adlı SimpleAnimation animasyonu hemen iptal eder.

Özel animasyon oluşturma

Şu ana kadar burada gösterilen örneklerde, sınıfındaki ViewExtensions yöntemlerle eşit şekilde elde edilebilecek animasyonlar gösterilmiştir. Ancak sınıfının avantajı Animation , animasyonlu değer değiştiğinde yürütülen geri çağırma yöntemine erişimi olmasıdır. Bu, geri çağırmanın istenen animasyonu uygulamasına olanak tanır. Örneğin, aşağıdaki kod örneği, sayfayı yöntemi tarafından Color.FromHsla oluşturulan değerlere Color ayarlayarak ve 0 ile 1 arasında ton değerleriyle birlikte sayfanın özelliğine animasyon BackgroundColor uygular:

new Animation (callback: v => BackgroundColor = Color.FromHsla (v, 1, 0.5),
  start: 0,
  end: 1).Commit (this, "Animation", 16, 4000, Easing.Linear, (v, c) => BackgroundColor = Color.Default);

Sonuçta elde edilen animasyon, sayfa arka planını gökkuşağının renkleriyle ilerletme görünümünü sağlar.

Bezier eğrisi animasyonu da dahil olmak üzere karmaşık animasyonlar oluşturma hakkında daha fazla örnek için bkz. ile Xamarin.FormsMobil Uygulama Oluşturmanın 22. Bölümü.

Özel animasyon uzantısı yöntemi oluşturma

sınıfındaki ViewExtensions uzantı yöntemleri, bir özelliğe geçerli değerinden belirtilen değere animasyon ekler. Bu, örneğin bir değerden diğerine renk animasyonu eklemek için kullanılabilecek bir ColorTo animasyon yöntemi oluşturmayı zorlaştırır, çünkü:

sınıfı tarafından tanımlanan tek Color özellik, animasyon eklemek için her zaman istenen Color özellik olmayan özelliğidirBackgroundColor.VisualElement
Genellikle bir Color özelliğin geçerli değeri, gerçek bir renk olmayan ve ilişkilendirme hesaplamalarında kullanılamayan değeridir Color.Default.

Bu sorunun çözümü, yöntemin ColorTo belirli Color bir özelliği hedeflememesidir. Bunun yerine, ilişkilendirilmiş Color değeri çağırana geri geçiren bir geri çağırma yöntemiyle yazılabilir. Buna ek olarak, yöntemi başlangıç ve bitiş Color bağımsız değişkenlerini alır.

ColorTo yöntemi, işlevselliğini sağlamak için sınıfında yöntemini kullanan Animate bir uzantı yöntemi AnimationExtensions olarak uygulanabilir. Bunun nedeni, yönteminin Animate aşağıdaki kod örneğinde gösterildiği gibi türünde doubleolmayan özellikleri hedeflemek için kullanılabilmesidir:

public static class ViewExtensions
{
  public static Task<bool> ColorTo(this VisualElement self, Color fromColor, Color toColor, Action<Color> callback, uint length = 250, Easing easing = null)
  {
    Func<double, Color> transform = (t) =>
      Color.FromRgba(fromColor.R + t * (toColor.R - fromColor.R),
                     fromColor.G + t * (toColor.G - fromColor.G),
                     fromColor.B + t * (toColor.B - fromColor.B),
                     fromColor.A + t * (toColor.A - fromColor.A));
    return ColorAnimation(self, "ColorTo", transform, callback, length, easing);
  }

  public static void CancelAnimation(this VisualElement self)
  {
    self.AbortAnimation("ColorTo");
  }

  static Task<bool> ColorAnimation(VisualElement element, string name, Func<double, Color> transform, Action<Color> callback, uint length, Easing easing)
  {
    easing = easing ?? Easing.Linear;
    var taskCompletionSource = new TaskCompletionSource<bool>();

    element.Animate<Color>(name, transform, callback, 16, length, easing, (v, c) => taskCompletionSource.SetResult(c));
    return taskCompletionSource.Task;
  }
}

Animate yöntemi, geri çağırma yöntemi olan bir dönüştürme bağımsız değişkeni gerektirir. Bu geri çağırmaya giriş her zaman 0 ile 1 arasında bir double giriştir. Bu nedenle yöntemi, ColorTo 0 ile 1 arasında bir double değeri kabul eden ve bu değere karşılık gelen bir Color değer döndüren kendi dönüşümünü Func tanımlar. DeğerColor, sağlanan Color iki bağımsız değişkenin R, G, Bve A değerleri ilişkilendirilerek hesaplanır. Daha Color sonra değer belirli bir özelliğe uygulamanın geri çağırma yöntemine geçirilir.

Bu yaklaşım, aşağıdaki kod örneğinde ColorTo gösterildiği gibi yönteminin herhangi bir Color özelliğe animasyon eklemesine olanak tanır:

await Task.WhenAll(
  label.ColorTo(Color.Red, Color.Blue, c => label.TextColor = c, 5000),
  label.ColorTo(Color.Blue, Color.Red, c => label.BackgroundColor = c, 5000));
await this.ColorTo(Color.FromRgb(0, 0, 0), Color.FromRgb(255, 255, 255), c => BackgroundColor = c, 5000);
await boxView.ColorTo(Color.Blue, Color.Red, c => boxView.Color = c, 4000);

Bu kod örneğinde yöntemi, bir öğesinin ve özelliklerine, bir Labelsayfanın özelliğine BackgroundColor ve özelliğine Color animasyon eklerBoxView.BackgroundColor ColorTo TextColor

Last updated on 2019-02-10

Aracılığıyla paylaş