Pop Up Animasyonu
Uygulamalarınıza pop up şeklinde animasyonlar eklemeyi öğrenin.
Nedir bu Pop Up ?
Şöyle ki görebileceğimiz gibi hoş görünen bir animasyon aslında. ‘Merhaba’ yazılı bir view salınım hareketiyle ekranın altından ortaya birden zıplıyor. Bu animasyonu uygulamanızın her alanında kullanmak mümkün. Burada uygulamanızın neresinde kullanacağınız size kalmış.
TEK SINIR HAYAL GÜCÜNÜZ!
İşte Başlıyoruz!
İlk olarak yeni bir View Controller’a ihtiyacımız var. View Controller’ımızı interface builder’da yerleştirdikten sonra bu ekrana bir Visual Effect View ekleyelim ve constraint’leri ekleyelim.
Ayrıca Visual Effect View özelliklerinden Blur Style kısmından benim gibi koyu seçeneği seçebilirsiniz.
Ardından Visual Effect’imizin üstüne bir UIView ekleyelim. Bu view bizim pop up ekranımızın alanını oluşturacak.
Şimdi geldik bu beyaz Pop Up View’a constraint’lerin verilmesine.
Geri kalan sadece pop up view’ı kendinizce süslemek veya gerekli elementleri yerleştirmek.
Sıra Kodlamada
Beyaz Pop Up View’a eklediğimiz yatay constraint’i View Controller’ın sınıfına gidip ViewDidLoad fonksiyonu içerisinde aşağıdaki sayıya eşitliyoruz.
override func viewDidLoad() {
super.viewDidLoad()// Değerini büyük bir sayıya eşitlememizin sebebi:
// Başlangıçta ortaya gelecek olan beyaz kartın ekranın dışında başlamasıdır.popUpViewCenyerYConstraint.constant = 750.0}
Bir de ekran geldikten sonra animasyonumuzu oluşturacak kod dizinizi yazalım.
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(true)// Beyaz 'popup' ortalama değerini 0'a eşitler. (Henüz bir animasyon yok)popUpViewCenyerYConstraint.constant = 0.0// Beyaz popup'ın ekranda ortalanması sürecini anime eder.UIView.animate(withDuration: 0.5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: [], animations: {
self.view.layoutIfNeeded()
}, completion: nil)}
Deneyimleme Zamanı
Pop Up animasyonumuz tamamlandı! İsteğinize göre animasyon hızlarını düzenleyebilmeniz mümkün. Ayrıca Pop Up’ın nerede duracağını da düzenleyebilirsiniz.
Sadece rakamlarla oynayın ve görün! Bu şekilde görsel hafızanızı kullanarak kodları öğrenmenizi keyifli bir hale getirebilir ve kolaylaştırabilirsiniz.( En azından benim için öyle 😅)
Bir sonraki yazımda görüşmek üzere 👋 İyi kodlamalar 👨🏻💻
Yardımcı olması için proje dosyasınıda buraya bıraktımmm 😉https://github.com/TurkishKit/TurkishKit-PopUp
