Aracılığıyla paylaş

Xamarin.iOS'ta Çekirdek Animasyonu

  • Makale

Bu makalede, UIKit'te yüksek performanslı, akıcı animasyonları nasıl etkinleştirdiği ve bunu doğrudan alt düzey animasyon denetimi için nasıl kullanabileceğini gösteren Çekirdek Animasyon çerçevesi incelenmektedir.

iOS, uygulamanızdaki görünümler için animasyon desteği sağlayan Çekirdek Animasyon içerir. iOS'ta tabloları kaydırma ve farklı görünümler arasında çekme gibi ultra yumuşak animasyonların tümü, çekirdek animasyonu dahili olarak kullandıkları için aynı şekilde performans gösterir.

Çekirdek Animasyon ve Çekirdek Grafik çerçeveleri birlikte çalışarak güzel, animasyonlu 2B grafikler oluşturabilir. Aslında Çekirdek Animasyon, 3B alanda 2B grafikleri bile dönüştürerek şaşırtıcı, sinematik deneyimler oluşturabilir. Ancak, gerçek 3B grafikler oluşturmak için OpenGL ES gibi bir şey kullanmanız veya oyunların MonoGame gibi bir API'ye dönmesi gerekir, ancak 3B bu makalenin kapsamı dışındadır.

Temel Animasyon

iOS, görünümler arasında geçiş yapma, kayan menüler ve kaydırma efektleri gibi animasyon efektleri oluşturmak için Çekirdek Animasyon çerçevesini kullanır. Animasyonla çalışmanın iki yolu vardır:

UIKit Animasyonu Kullanma

UIKit, bir uygulamaya animasyon eklemeyi kolaylaştıran çeşitli özellikler sağlar. Çekirdek Animasyonu dahili olarak kullansa da, yalnızca görünümler ve denetleyicilerle çalışmanız için soyutlar.

Bu bölümde aşağıdakiler dahil olmak üzere UIKit animasyon özellikleri ele alınmaktadır:

  • Denetleyiciler arasındaki geçişler
  • Görünümler arasındaki geçişler
  • Özellik animasyonu görüntüleme

Görünüm Geçişlerini Görüntüleme

UIViewController yöntemi aracılığıyla PresentViewController görünüm denetleyicileri arasında geçiş için yerleşik destek sağlar. kullanırken PresentViewController, ikinci denetleyiciye geçiş isteğe bağlı olarak animasyonlu olabilir.

Örneğin, ilk denetleyicideki bir düğmeye dokunulduğunda ikinci denetleyicinin görüntülenmesi için çağrı PresentViewController yapılan iki denetleyicili bir uygulama düşünün. İkinci denetleyiciyi göstermek için hangi geçiş animasyonunun kullanıldığını denetlemek için aşağıda gösterildiği gibi özelliğini ayarlamanız ModalTransitionStyle yeterlidir:

SecondViewController vc2 = new SecondViewController {
  ModalTransitionStyle = UIModalTransitionStyle.PartialCurl
};

Bu durumda bir PartialCurl animasyon kullanılır, ancak aşağıdakiler de dahil olmak üzere birkaç animasyon daha kullanılabilir:

  • CoverVertical – Ekranın alt kısmından yukarı doğru slaytlar
  • CrossDissolve – Eski görünüm kaybolur ve yeni görünüm soluk görünür
  • FlipHorizontal - Yatay sağdan sola çevirme. Kapatmada geçiş soldan sağa çevrilir.

Geçişe animasyon eklemek için, öğesine ikinci bağımsız değişken PresentViewControllerolarak geçirintrue:

PresentViewController (vc2, true, null);

Aşağıdaki ekran görüntüsünde, geçişin durum için nasıl göründüğü gösterilmektedir PartialCurl :

Bu ekran görüntüsünde PartialCurl geçişi gösterilmektedir

Geçişleri Görüntüle

Denetleyiciler arasındaki geçişlere ek olarak, UIKit bir görünümü başka bir görünümle değiştirmek için görünümler arasındaki geçişlerin animasyonlarını da destekler.

Örneğin, ile UIImageViewbir denetleyiciniz olduğunu varsayalım; burada görüntüye dokunduğunuzda ikinci UIImageViewbir görüntü görüntülenmelidir. görüntü görünümünün süper görünümüne animasyon uygulayarak ikinci görüntü görünümüne geçiş yapmak, öğesini çağırmak UIView.TransitiontoView kadar basittir ve fromView öğesini geçirmek aşağıda gösterildiği gibi:

UIView.Transition (
  fromView: view1,
  toView: view2,
  duration: 2,
  options: UIViewAnimationOptions.TransitionFlipFromTop |
    UIViewAnimationOptions.CurveEaseInOut,
  completion: () => { Console.WriteLine ("transition complete"); });

UIView.Transitionayrıca animasyonların ne kadar süreyle çalışacağını denetlediği gibioptions, kullanılacak animasyon ve kolaylaştırma işlevi gibi öğeleri de belirten bir duration parametre alır. Ayrıca, animasyon tamamlandığında çağrılacak bir tamamlama işleyicisi belirtebilirsiniz.

Aşağıdaki ekran görüntüsü, kullanıldığında görüntü görünümleri TransitionFlipFromTop arasındaki animasyonlu geçişi gösterir:

Bu ekran görüntüsü, TransitionFlipFromTop kullanıldığında görüntü görünümleri arasındaki animasyonlu geçişi gösterir

Özellik Animasyonlarını Görüntüle

UIKit, aşağıdakiler dahil olmak üzere sınıftaki çeşitli özelliklerin UIView ücretsiz olarak animasyonunu destekler:

  • Çerçeve
  • Sınır -ları
  • Orta
  • Alfa
  • Dönüşüm
  • Color

Bu animasyonlar, statik UIView.Animate yönteme geçirilen bir NSAction temsilcide özellik değişiklikleri belirterek örtük olarak gerçekleşir. Örneğin, aşağıdaki kod bir öğesinin orta noktasına animasyon oluşturur UIImageView:

pt = imgView.Center;

UIView.Animate (
  duration: 2,
  delay: 0,
  options: UIViewAnimationOptions.CurveEaseInOut |
    UIViewAnimationOptions.Autoreverse,
  animation: () => {
    imgView.Center = new CGPoint (View.Bounds.GetMaxX ()
      - imgView.Frame.Width / 2, pt.Y);},
  completion: () => {
    imgView.Center = pt; }
);

Bu, aşağıda gösterildiği gibi ekranın üst kısmında ileri geri hareket eden bir görüntüyle sonuçlanıyor:

Ekranın üst kısmında çıkış olarak ileri geri hareket eden bir görüntü

yönteminde Transition olduğu gibi, Animate easing işleviyle birlikte sürenin ayarlanmasına izin verir. Bu örnekte, animasyona UIViewAnimationOptions.Autoreverse değerden ilk değere animasyon eklemeye neden olan seçeneği de kullanılmıştır. Ancak kod, bir tamamlama işleyicisindeki ilk değerine de geri döner Center . Animasyon, zaman içinde özellik değerlerini ilişkilendirirken, özelliğin gerçek model değeri her zaman ayarlanan son değerdir. Bu örnekte değer, süper görünümün sağ tarafına yakın bir noktadır. ayarlanma nedeniyle animasyonu tamamlayan Autoreverse başlangıç noktasına ayarlanmadanCenter, aşağıda gösterildiği gibi, animasyon tamamlandıktan sonra görüntü sağ tarafa geri yaslanacak:

Ortala'yı başlangıç noktasına ayarlamadan, animasyon tamamlandıktan sonra resim sağ tarafa geri yaslanacak

Çekirdek Animasyonu Kullanma

UIView animasyonlar çok fazla yetenek sağlar ve uygulama kolaylığı nedeniyle mümkünse kullanılmalıdır. Daha önce belirtildiği gibi, UIView animasyonları Çekirdek Animasyon çerçevesini kullanır. Ancak, bir görünümle animasyon uygulanamayan ek özelliklerin animasyonlarını oluşturma veya doğrusal olmayan bir yol boyunca ilişkilendirme gibi bazı işlemler animasyonlarla UIView yapılamaz. Daha ince denetime ihtiyaç duyduğunuz durumlarda, Çekirdek Animasyon da doğrudan kullanılabilir.

Katmanlar

Çekirdek Animasyon ile çalışırken, animasyon türü olan CALayerkatmanlar aracılığıyla gerçekleşir. Katman, görünüm hiyerarşisi gibi katman hiyerarşisi olan bir görünüme kavramsal olarak benzerdir. Aslında, görünüm kullanıcı etkileşimi için destek ekleyerek görünümleri geri katmanlar. Görünümün özelliği aracılığıyla herhangi bir görünümün Layer katmanına erişebilirsiniz. Aslında yönteminde DrawUIView kullanılan bağlam aslında katmandan oluşturulur. Dahili olarak, bir'i UIView destekleyen katmanın temsilcisi görünümün kendisine ayarlanmıştır ve bu da öğesini çağıran Drawdeğerdir. Bu nedenle, bir UIViewöğesine çizim yaparken aslında katmanına çizersiniz.

Katman animasyonları örtük veya açık olabilir. Örtük animasyonlar bildirim temellidir. Yalnızca hangi katman özelliklerinin değişmesi gerektiğini bildirirsiniz ve animasyon çalışır. Öte yandan açık animasyonlar, katmana eklenen bir animasyon sınıfı aracılığıyla oluşturulur. Açık animasyonlar, animasyonun nasıl oluşturulduğu üzerinde ek denetime olanak sağlar. Aşağıdaki bölümlerde daha ayrıntılı örtük ve açık animasyonlar yer almaktadır.

Örtük Animasyonlar

Katmanın özelliklerine animasyon eklemenin bir yolu örtük animasyon kullanmaktır. UIView animasyonlar örtük animasyonlar oluşturur. Ancak, doğrudan bir katman üzerinde örtük animasyonlar da oluşturabilirsiniz.

Örneğin, aşağıdaki kod bir görüntüden bir katmanı Contents ayarlar, kenarlık genişliğini ve rengini ayarlar ve katmanı görünümün katmanının alt katmanı olarak ekler:

public override void ViewDidLoad ()
{
  base.ViewDidLoad ();

  layer = new CALayer ();
  layer.Bounds = new CGRect (0, 0, 50, 50);
  layer.Position = new CGPoint (50, 50);
  layer.Contents = UIImage.FromFile ("monkey2.png").CGImage;
  layer.ContentsGravity = CALayer.GravityResize;
  layer.BorderWidth = 1.5f;
  layer.BorderColor = UIColor.Green.CGColor;

  View.Layer.AddSublayer (layer);
}

Katmana örtük bir animasyon eklemek için içindeki özellik değişikliklerini CATransactionsarmalamanız yeterlidir. Bu, aşağıda gösterildiği gibi ve BorderColor gibi bir görünüm animasyonuyla tahmin edilemeyen özelliklerin animasyonunu BorderWidth oluşturmanızı sağlar:

public override void ViewDidAppear (bool animated)
{
  base.ViewDidAppear (animated);

  CATransaction.Begin ();
  CATransaction.AnimationDuration = 10;
  layer.Position = new CGPoint (50, 400);
  layer.BorderWidth = 5.0f;
  layer.BorderColor = UIColor.Red.CGColor;
  CATransaction.Commit ();
}

Bu kod, katmanın Positionüst katman koordinatlarının sol üst kısmından ölçülen bağlantı noktasının konumu olan katmanın konumuna da animasyon ekler. Bir katmanın bağlantı noktası, katmanın koordinat sistemi içinde normalleştirilmiş bir noktadır.

Aşağıdaki şekilde konum ve bağlantı noktası gösterilmektedir:

Bu şekilde konum ve bağlantı noktası gösterilir

Örnek çalıştırıldığında, Positionaşağıdaki ekran görüntülerinde gösterildiği gibi ve BorderWidthBorderColor animasyonu:

Örnek çalıştırıldığında, Position, BorderWidth ve BorderColor animasyonu gösterildiği gibi

Açık Animasyonlar

Temel Animasyon, örtük animasyonlara ek olarak, katmana açıkça eklenen animasyonları kapsüllemenize olanak sağlayan, öğesinden CAAnimation devralan çeşitli sınıflar içerir. Bunlar, animasyonların başlangıç değerini değiştirme, animasyonları gruplandırma ve doğrusal olmayan yollara izin verecek ana kareler belirtme gibi animasyonlar üzerinde daha ayrıntılı denetime olanak sağlar.

Aşağıdaki kod, daha önce gösterilen katman için (Örtük Animasyon bölümünde) bir CAKeyframeAnimation kullanan açık animasyonun bir örneğini gösterir:

public override void ViewDidAppear (bool animated)
{
  base.ViewDidAppear (animated);

  // get the initial value to start the animation from
  CGPoint fromPt = layer.Position;

  /* set the position to coincide with the final animation value
  to prevent it from snapping back to the starting position
  after the animation completes*/
  layer.Position = new CGPoint (200, 300);

  // create a path for the animation to follow
  CGPath path = new CGPath ();
  path.AddLines (new CGPoint[] { fromPt, new CGPoint (50, 300), new CGPoint (200, 50), new CGPoint (200, 300) });

  // create a keyframe animation for the position using the path
  CAKeyFrameAnimation animPosition = (CAKeyFrameAnimation)CAKeyFrameAnimation.FromKeyPath ("position");
  animPosition.Path = path;
  animPosition.Duration = 2;

  // add the animation to the layer.
  /* the "position" key is used to overwrite the implicit animation created
  when the layer positino is set above*/
  layer.AddAnimation (animPosition, "position");
}

Bu kod, daha sonra bir ana kare animasyonu tanımlamak için kullanılan bir yol oluşturarak katmanın değerini değiştirir Position . Katmanın Position animasyondan son değerine Position ayarlandığına dikkat edin. Bu olmadan, animasyon gerçek model değerini değil yalnızca sunu değerini değiştirdiğinden, katman aniden animasyondan öncekine döner Position . Model değerini animasyondaki son değere ayarlayarak, katman animasyonun sonunda yerinde kalır.

Aşağıdaki ekran görüntüleri, belirtilen yolda hareket eden görüntüyü içeren katmanı gösterir:

Bu ekran görüntüsünde, belirtilen yolda animasyon gösteren görüntü içeren katman gösterilmektedir

Özet

Bu makalede Çekirdek Animasyon çerçeveleri aracılığıyla sağlanan animasyon özelliklerini inceledik. Hem UIKit'teki animasyonları nasıl güçledirebileceğini hem de doğrudan alt düzey animasyon denetimi için nasıl kullanılabileceğini gösteren Çekirdek Animasyon'un incelendi.