iOS’de Animasyon Kullanımı

Merhabalar Arkadaşlar,

Bugünkü yazımda sizlere projelerinizde kullanabileceğiniz Animasyonlardan bahsedeceğim. Haydi zaman kaybetmeden başlayalım 🙂

Animasyon kısaca “Nesnelere değişik karelerin birbirleri ardına oynatılmaları suretiyle hareket verilmesidir.”

Örneğimizde 1 adet gif türünde bir dosya bulup onu tek tek karelere dönüştürüp uygulamamıza ekleyip eğlenceli işler yapacağız.

Öncelikle gif dosyası bulmak için https://giphy.com sitesine gidip istediğiniz gif dosyasını seçebilirsiniz. Ben linkte bulunan gif dosyasını aldım: https://giphy.com/gifs/friends-joey-how-you-doin-3og0IQCfsZXScpvKhi

Beğendiğiniz Gif’in linkini kopyalıyoruz. Bu gif dosyasını tek tek resimlere ayırması için bu siteden yararlanıyoruz : https://ezgif.com/split/ezgif-2-6c1c5a76db0d.gif

Convert işlemleri tamamlandıktan sonra .zip halindeki dosyayı indirip, içerisinde bulunan resimleri projemize ekliyoruz.

Benim seçtiğim gif dosyasında çok kare olduğu için bir dosyanın içinde toparlama yaptım. Daha derli toplu gözüküyor sizlerede öneririm 🙂


Bu işlemleri tamamladıktan sonra tasarım kısmına geçebiliriz.

Tasarım ekranımızda gifleri gösterebilmek için 1 adet image, 4 adet ise button koyduk. Bu elemanları ViewController.swift dosyasında IBOutlet ve IBAction türlerinde tanımlamaları yapıldı.

    var counter = 1 // sayaç tanımlandı.
    
    @IBOutlet weak var image: UIImageView! // resim tanımı
    
    @IBOutlet weak var button: UIButton! // button tanımı
    
    var timer = Timer() // timer nesnesi tanımlandı.
    
    var isAnimating = false // bool tipinde değişken

Resimler için bir sayaç oluşturduk. Sayaç verilen zaman diliminde artmaktadır. image ve button adında IBOutlet değişkenleri tanımlandı. Timer sınıfından bir nesne tanımlandı. Animasyonun çalışıp çalışmadığını kontrol edebilmek için bool türünde bir değişken tanımlandı.

// buttona tıklanınca resimleri değiştir
    @IBAction func nextImage(_ sender: UIButton) {
        
        if isAnimating{ // false ise
            
            timer.invalidate() // timer'ı geçirsiz yap.
            button.setTitle("Start Animation", for: []) // button başlığı
            isAnimating = false // bool değerini false yap.
            
        }else{ // true ise
            
            // her 0.07 saniye resimleri değiştir
            timer = Timer.scheduledTimer(timeInterval: 0.07, target: self, selector: #selector(ViewController.animate), userInfo: nil, repeats: true)
            button.setTitle("Stop Animation", for: []) // button başlığı
            isAnimating = true // bool değeri true yap.
        }
        
    }

Butona tıklanınca resimler anlık değişmesi için bir fonksiyon oluşturuldu. Eğer bool değeri false ise : timer’ı geçersiz yap, durdur. Butonun başlığını değiştir ve bool değerini false olarak bırakıyoruz.

Bool değeri true ise :  timer her 0.07 saniyede kendi kendine resimleri ekranda gösterecek. Bu işleri yönetebilmek için bir fonksiyon yazdık. Butonun başlığını ve bool değerini değiştirdik.

// animate adında bir fonksiyon
    @objc func animate(){
        
        // resimlerini adlarına göre
        image.image = UIImage(named: "frame_\(counter)_delay-0.07s.gif")
        counter += 1 // counter değerini arttır.
        
        if counter == 41{ // counter değeri 41 olunca
            counter = 0 // counter değerini sıfırla
        }
    }

animate adındaki bu fonksiyon resimlerin adlarına göre artarda resimleri değiştirme işlemi yapıyor. Son resime ulaşılınca counter sıfırlanıp tekrardan aynı işlemler yapılmaya başlanır. Bu işlemlerden sonra artık projemizi kusursuz bir şekilde oynatabiliriz.


Bonuslar

Birçok resim uygulamasında kullanılan üç tip özelliğide aşağıdaki kodlardan inceleyebilirsiniz.

  • fadeIn : Anlık gözüküp kaybolması
// resmin bir anda gözüküp-gözükmemesi
    @IBAction func fadeIn(_ sender: Any) {
        
        image.alpha = 0 // alpha değeri sıfıra eşitlendi.
        
        UIView.animate(withDuration: 1, animations: { // 1 saniye olunca
            
            self.image.alpha = 1 // alpha değerini update et
        })
    }
  • slideIn : Dışarıdan içeriğe doğru gelen resim
// dışarıdan içeriğe doğru gelen resim
    @IBAction func slideIn(_ sender: Any) {
        
        // resmin hangi koordinatlarda gözükücek
        image.center = CGPoint(x: image.center.x - 500, y: image.center.y)
        
        // duration değeri 2 olunca
        UIView.animate(withDuration: 2){
            
            // resmin hangi koordinatlarda gözükücek

            self.image.center = CGPoint(x: self.image.center.x + 500, y: self.image.center.y)

        }
    }
  • Grow : Sıfırdan verilen değere kadar resmin büyütülmesi
 // sıfırdan verilen değerine kadar resmin büyümesi
    @IBAction func grow(_ sender: Any) {
        
        image.frame = CGRect(x: 0, y: 0, width: 0, height: 0)

        UIView.animate(withDuration: 1) { // duration 1 ise
            
            // resim ekranda nasıl gözükücek
            self.image.frame = CGRect(x: self.image.center.x, y: self.image.center.y, width: 300, height: 300)

            
        }
    }

Evet Arkadaşlar Animasyonların kısaca ne olduğundan bahsedip, Animasyonlarla ilgili bir örnek yaptık. Bir sonraki blog yazımda görüşmek üzere kendinize dikkat edin 🙂 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir