UIView Animasyonları

iOS platformu geliştiricilere, uygulamalarında animasyon kullanmaları için birden fazla olanak sağlar. Ekran üzerinde yer alan görsel öğeleri büyütme, hareket ettirme, belirli bir eksen etrafında döndürme gibi animasyonları yapabilmek için aşağıdaki teknolojiler bulunur:

• UIView animasyonları
• Quartz
• OpenGL
• Sprite Kit (iOS 7 sonrası)

Bu kütüphaneler ihtiyacınıza göre -özellikle oyunlarda- her türlü animasyonu gerçekleştirmenize yardımcı olur. Biz bu bölümde sık sık ihtiyaç duyabileceğiniz büyütme, hareket ettirme, yok etme gibi animasyonları birkaç satır kodla hayata geçirebileceğiniz UIView animasyonlarından bahsedeceğiz.

 

Statik animasyon metodları

UIView animasyonları UIView sınıfı içerisinde yer alan statik animasyon metodları sayesinde gerçekleştirilir;

+animateWithDuration:delay:options:animations:completion:

+animateWithDuration:animations:completion:

+animateWithDuration:animations:

+transitionWithView:duration:options:animations:completion:

+transitionFromView:toView:duration:options:completion:

+animateKeyframesWithDuration:delay:options:animations:completion:

+addKeyframeWithRelativeStartTime:relativeDuration:animations:

+performSystemAnimation:onViews:options:animations:completion:

+animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:

+performWithoutAnimation:

Bir animasyona başlamak için bize gerekli kod parçacığı aşağıdaki  gibidir;

[UIView animateWithDuration:2.0f animations:^{

// animasyonlar

}];

Yukarıdaki animasyon epey basit bir blok animasyon örneğidir. Burada 2.0f ile belirtilen değer, animasyonun kaç saniyede gerçekleşeceğini belirtir. UIView öğelerinde yapılması istenilen değişiklikler ise animations bloğu içerisinde yazılır. Şimdi bir proje üzerinde örnek bir resmin ebatlarını değiştirme ve resmi hareket ettirme ile ilgili bir animasyon projesi yapalım.

 

Not: İnternet'te aşağıdaki şekilde tanımlanan UIView animasyonları görebilirsiniz. Bunlar blok animasyonlar gelmeden önce yapılan tanımlama şekilleriydi. Prensipte aşağıdaki kod bu bölümdeki blok animasyon kodlarıyla aynı işlevi görmektedir.

[UIView commitAnimations];
[UIView beginAnimations:@"ViewAdi" context:nil];

Öncelikle yeni bir proje oluşturarak ViewController için bir Interface Builder dosyası yaratalım. Ardından ekrana bir görsel (UIImageView) ve üç adet düğme (UIButton) yerleştirelim. Bu düğmelerden ilkini görseli belli bir noktadan başka bir noktaya taşımak için kullanacağız. İkinci düğmeyse görselin boyutlarını iki katına çıkarma görevini üstlenir. Son düğmeyse her iki aksiyonu aynı anda gerçekleştirmeyi hedefler.

Düğmeleri koyduktan sonra aşağıdaki IBAction metodlarını ilgili düğmelerle eşleştirelim;

// ViewController.h
// Animation
// Created by Ozan Uysal on 3/10/13.
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
@property (nonatomic, retain) IBOutlet UIImageView *logoView;

- (IBAction) move:(id)sender;
- (IBAction) scale:(id)sender;
- (IBAction) scaleAndMove:(id)sender;
@end

Öncelikle move: metodunu inceleyelim. Bu metod görseli (logoView) ekranda bulunduğu noktadan başka bir noktaya taşıyacaktır:

- (IBAction) move:(id)sender {
[UIView animateWithDuration:2.0f
delay:1.0f
options:UIViewAnimationOptionAllowUserInteraction
animations:^{
logoView.frame = CGRectMake(0, 200, 60, 60);
} completion:^(BOOL finished) {
}];
} 

Buradaki değişkenleri inceleyecek olursak;

• animateWithDuration - Animasyonun süresi (2 sn.)
• delay - Animasyonun başlaması için gereken gecikme süresi (1 sn. gecikmeli başlar)
• options - Animasyonla ilgili seçenekler burada yer alır. Bunlar aşağıda detaylı olarak verilmiştir.
• animations - Bir blok içerisinde gerçekleştirilecek animasyon anlatılır. Burada ilgili UIView öğesinin son halini vermeniz gerekir. Animasyon başladığında başlangıç durumundan blok içerisinde tasvir edilen duruma geçiş yapılacaktır ve bu da örneğimizde 2 saniye sürecektir. Biz sadece yer değişimi yapacağımızdan frame özelliğinde x ve y koordinatlarının son halini verdik.
• completion - Bu blokta animasyon bittikten sonra yapılması istenen özellikler yer alır. finished özelliği animasyonun başarıyla tamamlandığını ve kesilmediğini gösterir.
• scale: Metodunda ise resmin boyutlarını değiştirmeye çalışacağız;

- (IBAction) scale:(id)sender {

[UIView animateWithDuration:2.0f
delay:1.0f
options:UIViewAnimationOptionAllowUserInteraction
animations:^{
logoView.frame = CGRectMake(130, 30, 120, 120);
} completion:^(BOOL finished) {
}];
}

Yukarıdakine benzer şekilde yapmak istediğimiz animasyon resmin boyutunu değiştirmek olduğundan sadece frame özelliğinde yükseklik ve genişlik değerini ilk durum olan 60x60'tan 120x120 haline getiriyoruz. Bunu yaptığımızda resmin 2 saniye içerisinde 2 katına çıktığını göreceğiz.

scaleAndMove: metodunda yukarıda yaptığımız yer değiştirme ve büyütme işlemini tek seferde gerçekleştireceğiz.

- (IBAction) scaleAndMove:(id)sender {
[UIView animateWithDuration:2.0f
delay:1.0f
options:UIViewAnimationOptionAllowUserInteraction
animations:^{
logoView.frame = CGRectMake(0, 200, 120, 120);
} completion:^(BOOL finished) {
}];
}

Gördüğünüz gibi UIView animasyonlarında asıl önemli olan animations bloğu içerisinde görsel öğeler ile ilgili son durumu yazmanızdır. Burada istediğiniz kadar özellik değiştirebildiğiniz gibi birden çok UIView öğesine de müdahale edebilirsiniz.

Animasyon sırasında kullanabileceğiniz seçeneklerse aşağıdaki şekildedir:

UIViewAnimationOptionLayoutSubviews	Alt görsel öğeler de animasyona katılır.
UIViewAnimationOptionAllowUserInteraction	Animasyon sırasında kullanıcı aksiyonlarına izin verilir.
UIViewAnimationOptionBeginFromCurrentState	Eğer mevcut devam eden bir animasyon varsa anında bitirilir ve yeni tanımlanan animasyon başlar.
UIViewAnimationOptionRepeat	Animasyon sonsuza kadar tekrar edilir.
UIViewAnimationOptionAutoreverse	Animasyon başlar ve sonrasında görsel ilk haline döner.
UIViewAnimationOptionCurveEaseInOut	Animasyon yavaş bir şekilde başlar, sürenin ortalarına doğru hızlanır ve yavaşça biter.
UIViewAnimationOptionCurveEaseIn	Animasyon yavaşça başlar ve giderek hızlanır.
UIViewAnimationOptionCurveEaseOut	Animasyon hızlıca başlar ve sürenin sonuna doğru yavaşlar.
UIViewAnimationOptionTransitionFlipFromLeft	Görsel y ekseni üzerinde solda sağa bir dönüş yapar.
UIViewAnimationOptionTransitionFlipFromRight	Görsel y ekseni üzerinde sağdan sola bir dönüş yapar.
UIViewAnimationOptionTransitionCurlUp	Görsel sayfa açılış efekti gerçekleştirir.
UIViewAnimationOptionTransitionCurlDown	Görsel sayfa kapanış efekti gerçekleştirir.