Playground: Animasyonlar

Playground projelerinin olmazsa olmazı animasyonlardır. Playground ile animasyonlar oluşturmayı öğrenin.

Merhaba TurkishKit okuyucuları. 👋 Bu yazımızda sizlerle Playground üzerinde animasyonları nasıl kullanabileceğimizi aşağıda görmüş olduğunuz animasyonu yaparak öğreneceğiz:

Başlamadan önce, daha önce App Store animasyonlarını anlattığımız yazımızı okumanızı tavsiye ederim:

App Store Animasyonları

O zaman, hazırsanız başlayalım! 🤩

Playground Dosyasını Yaratmak

Her şeyden önce yeni bir Playground dosyası yaratmamız gerekiyor. Bunun için “Get started with a playground” tuşuna tıklayalım.

Sonrasında Xcode bizden Playground dosyamızın nasıl olması gerektiğini seçmemizi istiyor. Biz burada “Blank” seçeneğine tıklayacağız.

Playground dosyamızı yarattıktan sonra yazdığımız kodların sonucunu görmek için “PlaygroundSupport” yapısını “import” edelim.

import UIKit
import PlaygroundSupport

Bunu da yaptığımıza göre artık kodlamaya başlayabiliriz!

Elementleri Yaratmak

Öncelikle bütün elementleri içerisinde toplayacağımız bir View elementi yaratalım.

let view = UIView(frame: CGRect(x: 0, y: 0, width: 640, height: 480))

Burada elementimizin konum ve büyüklük değerlerini vererek yaratmış olabiliriz ama onun tam olarak gözükmesi için bir renge de ihtiyacı var. Bu yüzden elementimize bir arka plan rengi verelim.

view.backgroundColor = UIColor.init(cgColor: CGColor(srgbRed: 26/255, green: 25/255, blue: 39/255, alpha: 1.0))

Son olarak, elementimizin “Live View” üzerinde gözükmesi için elementimizi Playground sayfasının “Live View” elementi olarak tanımlayalım.

PlaygroundPage.current.liveView = view

Artık ana View elementimizi oluşturmuş durumdayız. Bunu görmek için kodumuzu çalıştıralım.

Artık diğer elementlerimizi de oluşturabiliriz! Öncelikle görselimizi yaratalım. Bunun için ilk olarak görselimizi Playground dosyamıza eklemeliyiz. Bir Playground dosyasında bu tarz dosyaları kullanmak için “Resources” adında bir klasör bulunmaktadır. Bu klasör, tıpkı bir Xcode projelerindeki “Assets” klasörü gibidir. İşte biz de görselimizi bu klasöre atacağız.

Görselimiz Playground dosyamızda olduğuna göre, onu kod üzerinde yaratabiliriz. Bunun için bir UIImageView elementi oluşturmamız gerekiyor.

let image = UIImageView(frame: CGRect(x: 230, y: 40, width: 180, height: 180))

Tıpkı View elementinde olduğu gibi UIImageView elementinin de gözükmesi için bir içeriğe ihtiyacı var. Bu içerik UIImageView elementinde tabii ki resim. Bu yüzden elementimize bir resim (daha doğrusu bir UIImage) eklemeliyiz.

image.image = UIImage(named: "TurkishKit")

Artık bu sayede UIImageView elementimizi görebileceğiz, ama tabii ki önce bu elementimizi ana View elementine eklememiz gerekiyor.

view.addSubview(image)

Artık dosyamızı çalıştırırsak UIImageView elementini “Live View” ekranı üzerinde görebiliriz.

Görselimizi oluşturduğumuza göre artık düğmemizi geliştirmeye başlayabiliriz! Düğmemizi oluşturmak için yine diğer elementler gibi ilk olarak düğmenin büyüklüğünü ve konumunu belirliyoruz.

let button = UIButton(frame: CGRect(x: 280, y: 200, width: 80, height: 80))

Sonrasında ise düğmemizin arka plan rengini belirleyelim.

button.backgroundColor = .red

Düğmenin üzerinde “Animate” yazısını yazdırmamız içinse “setTitle” fonksiyonunu kullanarak hem düğmenin üzerinde ne yazacağını hem de o yazının ne zaman gözükeceğini belirliyoruz.

button.setTitle("Animate", for: .normal)

Düğmenin yuvarlak bir şekilde gözükmesi içinse düğmenin“Corner Radius” (Köşe Yarıçapı) değerini belirliyoruz. (Şunu unutmayın; eğer bir kareyi yuvarlak hâline getirmek istiyorsanız, karenin “Corner Radius” değeri, karenin eninin [veya boyunun] yarısı kadar olmalıdır.)

button.layer.cornerRadius = 40

Son olaraksa UIImageView elementinde yaptığımız gibi butonumuzu da ana View elementine ekliyoruz.

view.addSubview(button)

Böylelikle artık düğmemizi görebiliriz.

Düğmemizi de geliştirdiğimize göre artık son elementimiz olan UILabel elementini geliştirmeye başlayabiliriz! Bunun için yine diğer elementlerle aynı şekilde bir UILabel elementi oluşturalım.

let label = UILabel(frame: CGRect(x: 170, y: 300, width: 300, height: 60))

Sonrasında UILabel elementimizin içerisinde ne yazacağını belirleyelim.

label.text = "TurkishKit"

Elementimizin ana View elementinin tam ortasında gözükmesi için yazının hizalanmasını da belirleyelim.

label.textAlignment = .center

Tabii ki yazının rengini de belirlememiz gerekiyor.

label.textColor = .white

Son olarak elementimizin fontunu ve büyüklüğünü belirleyelim.

label.font = UIFont(name: "AvenirNext-DemiBold", size: 60.0)

Tabii UILabel elementini “Live View” üzerinde görüntüleyebilmemiz için elementi ana View elementine eklemeliyiz.

view.addSubview(label)

Böylece UILabel elementimizi görebiliriz. Artık bütün elementlerimizi oluşturmuş durumdayız!

Animasyonları Hazırlamak

Bütün elementlerimiz var olduğuna göre artık animasyonları hazırlayabiliriz. Animasyonları hazırlamak için ilk yapacağımız iş elementlerimizin konumlarını ve şeffaflığını değiştirmek olacak, çünkü yapacağımız animasyonlar bu değerleri değiştirecekler.

O zaman, değiştirmeye ilk olarak görselimizden başlayalım. Yazının başında gördüğünüz üzere, görselimiz butona basıldıktan sonra View elementinin içine giriyor, yani ilk başta içeride değil. Bu yüzden, resimimizin konumunu View elementinin dışında verememiz gerekiyor.

let image = UIImageView(frame: CGRect(x: 230, y: -180, width: 180, height: 180))

Aynı zamanda resimimiz hareket ederken ekstra bir efekt vermek için resmin ilk şeffaflığını “0" yani resmi ilk başta tamamen görünmez yapabiliriz.

image.alpha = 0

Resim elementimizden sonra değiştirmemiz gereken bir diğer elementimiz ise UILabel elementidir. Bu elementte tıpkı öncekinde olduğu gibi başlangıç konumu ana View elementinin dışında olmalı.

let label = UILabel(frame: CGRect(x: 170, y: 480, width: 300, height: 60))

Resim ile aynı efekti vermek için bu elementin de başlangıç şeffaflığını “0” olarak belirleyebiliriz.

label.alpha = 0

Şu an Playground dosyamızı çalıştırırsak, “Live View” ekranı içerisinde UIImageView ve UILabel elementlerinin görünmediğini fark edebilirsiniz.

O zaman, şimdi sıra düğmemizi kodlamakta! Açıkçası, şimdi yapacaklarımız yazımızın geri kalanında yaptıklarımızdan biraz daha farklı olacak, çünkü şimdi düğmemize bir fonksiyon atayacağız. Bunun için yeni bir “NSObject” sınıfı oluşturmamız gerekiyor.

class Responder: NSObject {
    
}

Bu sınıfın içersinde düğmemize atayacağımız fonksiyonu yazacağız.

@objc func action() {
    UIView.animate(withDuration: 2) { () -> Void in
        image.frame = CGRect(x: 230, y: 100, width: 180, height: 180)
        label.frame = CGRect(x: 170, y: 260, width: 300, height: 60)
        
        image.alpha = 1
        label.alpha = 1
        button.alpha = 0
    }
}

Not: withDuration: Animasyonun süresini temsil eder.

Bu şekilde “Responder” sınıfımız hazır hale geliyor. Şimdi ise sıra düğmemize bu sınıfın içerisine yazmış olduğumuz fonksiyonu atamakta. Bunun için ilk başta yazmış olduğumuz sınıf ile bir değer oluşturuyoruz.

let responder = Responder()

Sonrasında ise düğmemizde “addTarget” fonksiyonunu çalıştırmak için fonksiyonun içerisinde istenilen değerleri giriyoruz.

button.addTarget(responder, action: #selector(responder.action), for: .touchUpInside)

Not: touchUpInside: Butona dokunulduğu zaman, atanan fonksiyonun çalışması gerektiğini tanımlar.

Projemiz tamamen hazır! Artık tek yapmamız gereken şey projemizi çalıştırmak. 😎

Böylece bir yazımızın daha sonuna geldik! Bu yazımızda Playground içerisinde animasyonları nasıl kullanabileceğimizi öğrendik. Artık animasyonlar ile birlikte projenizi daha etkileyici bir hâle getirebilirsiniz! Muhteşem animasyonlara sahip bir proje yapmanız dileğiyle. 💪

Bu yazımızda yapmış olduğumuz projemize buradan ulaşabilirsiniz:

TurkishKit/Playground-Animations

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz!

Twitter | Instagram | Facebook