ChatGPT ile SwiftUI animasyonlarını inceleyelim mi?
SwiftUI ‘ın güçlü yönlerinden biri olan animasyonlar hakkında ne kadar iyiyiz? UI da bir çok özelliği ve methodu ile işimizi kolaylaştırıyor fakat bunları tüm bir UI&UX içerisinde etkileşimli kullanmak için çok ince ayarlar yapmamız gerekiyor.
Gündemde olan ChatGPT den bir kaç animasyon kodu istedim. İlk denememde bana basit iki kod bloğu verdi. Başlangıç için çok iyi…
İlk önerisinde ekrana bir kare oluşturdu ve kullanıcı bu kareyi tutup gezdirdiğinde ekranda gezebiliyor. Gezen bir kare animasyonu olarak düşünebilirsiniz.
İkinci öneride ise bu karenin üzerine tıklandığında bir renk geçişi ekledi. Fakat bu renk geçişide çok tatlı bir yumuşaklık var.
Burada onTapGesture ile renk geçişini, gesture ile de mouse takibi yaptığını görüyorum.
Oluşturduğu animasyona ait ise şu metni verdi:
“Bu kod parçacığı bir dikdörtgen oluşturur ve kullanıcının dokunuşlarını takip eder. Kullanıcı dikdörtgeni dokunduğunda, withAnimation içinde isRed değişkeni değiştirilir ve dikdörtgenin rengi animasyonlu olarak değiştirilir.
Bu örnekler sadece SwiftUI animasyonlarının nasıl yapıldığını göstermek için basittir. SwiftUI’da daha fazla animasyon seçeneği mevcuttur, örneğin animation() ve transition() gibi. Ayrıca Apple'ın SwiftUI dokümantasyonunda daha fazla örnek ve ayrıntılı bilgiye ulaşabilirsiniz.”
Bir tane kalp iconu ve beğeni animasyonu kodlamasını istedim.
https://github.com/cmlcrn17/Animation/blob/main/Documents/kalpgif.gif
“Bu kod parçacığı HeartView struct oluşturur, bu struct içinde scale, isLiked ve heartColor state değişkenleri tanımlar. heartColor değişkeni Color.red olarak başlangıçta tanımlanır. tapGesture ile kullanıcının dokunuşunu alır ve isLiked değişkeni değiştirir. isLiked true ise heartColor değişkeni Color.red olarak değiştirilir, false ise Color.gray olarak değiştirilir. Image view içinde foregroundColor ile kalp iconunun rengi değiştirilir.
Bu örnekte sadece kalp iconunun rengi değiştirilmiştir. Kendi projenizde farklı renkler kullanabilirsiniz veya kullanıcının seçtiği renkleri kullanabilirsiniz.”
Bir tane giden araba animasyonu kodlamasını istedim.
https://github.com/cmlcrn17/Animation/blob/main/Documents/arabagif.gif
“Bu kod parçacığı CarView struct oluşturur, bu struct içinde isMoving ve offset state değişkenleri tanımlar. VStack içinde Image view kullanılarak araba resmi gösterilir. Button ile kullanıcıya arabanın hareket etmesini sağlar. offset değişkeni ile arabanın pozisyonu değiştirilir. isMoving değişkeni true olduğunda araba sağa doğru hareket eder ve offset değişkeni 300 olarak atanır.isMoving değişkeni false olduğunda araba sola doğru hareket eder ve offset değişkeni 0 olarak atanır. animation ile arabanın hareketi animasyonlu olarak gösterilir.
Bu örnekte araba sağa doğru hareket etmektedir. Kendi projenizde farklı yollar kullanabilirsiniz veya araba yukarı veya aşağı gidebilir. Ayrıca arabanın hızını değiştirebilirsiniz, örneğin duration parametresini değiştirerek.”
Şimdi başta istediğim beğeni animasyonunu buton olarak geliştirmesini istedim fakat burada Button nesnesini kullanmasını bekliyodum ama o yine bir TapGesture ve Image ile ilerledi.
struct LikeButton: View {
@State private var isLiked = false
@State private var scale: CGFloat = 1.0
var body: some View {
let tapGesture = TapGesture()
.onEnded {
withAnimation(.spring()) {
self.isLiked.toggle()
self.scale = self.isLiked ? 1.5 : 1.0
}
}
return Image(systemName: isLiked ? "heart.fill" : "heart")
.resizable()
.frame(width: 50, height: 50)
.scaleEffect(scale)
.gesture(tapGesture)
}
}Bence ChatGPT ile bir çok içerik üretebiliriz. Bu seviyede işimizi fazlasıyla kolaylaştırıyor. Geriye üzerine eklemek kalıyor.
