SwiftUI: Animasyonlar
Animasyonlar uygulamanızın daha kaliteli görünmesini sağlar. SwiftUI ile uygulamanıza basit bir şekilde animasyonlar ekleyebilirsiniz.
Merhaba sevgili TurkishKit okurları! 👋🏼 Uygulamınızı daha eğlenceli ve yaratıcı hale getirmek istiyor ama nereden başlayacağınızı bilmiyor musunuz? Bugün sizlerle uygulamanızı kişileştirminize yardımcı olacak animasyonlar oluşturmayı öğreneceğiz! Hazırsanız haydi başlayalım! 🤗
Tabii ki yeni bir SwiftUI projesi oluşturarak kodlamaya başlıyoruz. “Create a new project” ve ardından “Single View App” seçeneklerine tıklıyoruz. Artık kodlamaya geçebiliriz! 🤩
Kodlayalım
SwiftUI ile birçok eleman üzerinden animasyon oluşturabilirsiniz ancak bu yazımızda bir “Button” elemanına animasyon ekleyeceğiz. Bunun için ilk olarak body değerinin içinde bir “Button” elemanı tanımlıyoruz ve action değerini şimdilik boş bırakıyoruz. Merak etmeyin, bu değeri animasyonları oluşturmadan önce dolduracağız!
Şimdi de “Text” değerini tanımlayalım.
“Button” elemanımızı kişileştirmenin zamanı geldi!🙃 Bunun için ilk olarak “Text” elemanını rengini foreground() metodunu kullanarak beyaz olarak değiştiriyoruz (tabii ki siz istediğiniz herhangi bir rengi kullanabilirsiniz). “Button” elemanımızın boyutlarını da frame() metoduyla ayarlıyoruz.
“Button” elemanın rengini değiştirebilmek için ise background() metodunu kullanabiliriz. Son olarak da “Button” elemanının daha güzel gözükmesi için elemanımızın köşe yarıçaplarını değiştirebiliriz. Bunun için cornerRadius() metodunu kullanıyoruz. Siz bunlarla kısıtlı kalmayıp elemanınızı daha özgün hale getirebilirsiniz. Unutmayın, SwiftUI ile yaratıcılığınızın sınırı yoktur!😋
Şimdi ise heyecanla beklediğimiz ana geldik: animasyonları oluşturma zamanı! SwiftUI ile çeşitli animasyonlar oluşturmak mümkün ancak bugün sizlerle yukarıda oluşturduğumuz “Button” elemanımızın rengini ve şeklini değiştiren bir animasyon oluşturacağız. Unutmayın, ne kadar basit gözükse de buna benzer bir animasyon uygulamanızı daha özgün hale getirmek için ihtiyacınız olan şey olabilir!🤩
İlk olarak “Button” elemanına basıldığında elemanın rengini nasıl değiştirebileceğimizi öğrenelim! Bunun için body değerimizin dışında bgColor adında bir değişken oluşturup değişkeni istediğimiz bir renge eşitliyoruz. Bir diğer önemli nokta ise background() metodu içine yazdığımız renk değerini bgColor ile değiştirmek. Örneğin kodlamamızın ilk aşamasında yazdığımız background(Color.blue) değerini şimdi background(bgColor) olarak değiştiriyoruz. Böylece “Button” elemanımız sabit bir renge değil de değişken bir renge sahip olacak.
Şimdi ise “Button” elemanına basılması halinde elemanın renginin değişmesi için action değerini tamamlayalım. Bunun için tek yapmamız gereken action değerinin içinde bgColor değişkenini “self.bgColor == Color.gray ? Color.blue : Color.gray” olarak tanımlamak. Böylece “Button” elemanına basılması durumunda bgColor değişkeni mordan maviye değişecek ve bununla birlikte “Button” elemanının rengi de değişmiş olacak. 🙌🏼
Şimdi ise “Button” elemanımızın şeklini nasıl bir animasyonla değiştirebiliriz öğrenelim! Bunun için de “Button” elemanının rengini değiştirirken yaptığımız gibi bir değişken oluşturmalıyız. cRadius adını verdiğimiz bu değişkeni cornerRadius() metodunun içine önceden yazdığımız rakamla değiştiriyoruz ve değişkeni istediğimiz bir “int” değişkenine eşitliyoruz.
Şimdi ise tek yapmamız gereken “Button” elemanına basılması halinde cRadius değişkenini değiştirmek ve böylece “Button” elemanının şeklinin değişmesini sağlamak. Bunun için de action değerinin içinde cRadius değişkenini “self.cRadius == 12 ? 100 : 12” olarak tanımlıyoruz. Böylece “Button” elemanına basılması halinde elemanımızın köşe yarıçapları artıyor.
Ancak fark edeceğiniz üzere yaptığımız değişiklikler animasyon olarak karşımıza çıkmıyor. 🧐 Ama merak etmeyin, şimdi birkaç satır kod ile bu sorunu hemen çözeceğiz! Bunun için animation() metodunu kullanacağız. Metodun adından da anlaşılacağı üzere bu metod “Button” elemanının renginin değişmesi gibi aksiyonların belirli bir süre içinde gerçekleşmesini sağlayarak animasyonlar oluşturuyor. Metodun parametrelerini “.easeInOut(duration: 2)” olarak yazıyoruz.
easeInOut bir animasyon türüdür ve aksiyonun yavaş başlayıp hızlanmasını sağlar. easeInOut dışında spring animasyonlarını da uygulamalarınızda kullanabilirsiniz.
Böylece “Button” üzerinden yapılan değişikler iki saniye içinde gerçekleşiyor ve bu da bir animasyon oluşturmamızı sağlıyor. Şimdi göreceğiniz üzere “Button” elemanına bastığımızda elemanın rengi ve şekli yavaş ve etkileyici bir şekilde değişiyor. 🥳
Peki, animasyonlar sadece renk ve şekil değişiklikleriyle mi sınırlı? Tabii ki hayır! animation() metodunu kullanarak eleman büyütme veya geçiş gibi aksiyonları da animasyonlar şeklinde uygulamanızda kolaylıkla kullanabilirsiniz.
Animasyon ile Eleman Büyütme
Şimdi ise haydi gelin SwiftUI animasyonlarını kullanmanın bir diğer çılgın yolunu keşfedelim!🤓 Örneğin uygulamanızda bir elemana basılması halinde o elemanın etkileyici bir şekilde büyümesini istiyorsunuz. Bunu yapmak animasyonlarla çok kolay! İlk olarak yeni ve basit bir eleman yaratıp animationAmount adında bir değişken belirliyoruz. Bu değişkeni bire eşitliyoruz.
View değerinin içinde scaleEffect() metoduna “animationAmount” parametresini veriyoruz. Böylece “animationAmount” değerinin değişmesi üzerine “Button” elemanımızın boyutu da değişmiş oluyor. Ancak nasıl “Button” elemanına her basıldığında “animationAmount” değerini değiştiriyoruz? 🤔Tek yapmamız gereken action değerinin içinde “animationAmount” değişkenini birer birer arttırmak.
Projeyi çalıştırdığınızda “Button” elemanına her basılışta elemanın boyutunun büyüdüğünü ancak bunun bir animasyon şeklinde olmadığını fark edeceksiniz. Bu aksiyonu animasyona dönüştürmek için son yapmamız gereken şey “animation(.default)” fonksiyonunu kullanarak SwiftUI kütüphanesinin default animasyon seçeneğinden faydalanmak.
Şimdi “Button” elemanınıza tıkladığınızda elemanın etkileyici bir şekilde büyüdüğünü göreceksiniz. 🤗
SwiftUI ile Animasyonlar makalemizin sonuna geldik! Birlikte bir elemanın şeklini, rengini ve boyutunu animasyonlar ile değiştirmeyi öğrendik. Şimdi siz de özgün animasyonlar oluşturup uygulamalarınızı daha dinamik hale getirebilirsiniz!🤩 Keyifli kodlamalar dilerim!😊
