Scroll Animation iOS 17
Bu yazımda WWDC23 de duyurulan ScrollView animasyonlarını ve yenilikleri inceleyeceğiz.
Kullanması çok basit olan ScrollView animasyonlarını örnek proje üzerinden anlatmaya çalışacağım.
Öncelikle kartlarımızı oluşturmak için ihtiyacımız olan Colors adındaki yapımızı oluşturalım.
//
// Colors.swift
// ScrollViewAnimations
//
// Created by Mesut Aygün on 16.06.2023.
//
import Foundation
import SwiftData
import SwiftUI
struct Colors : Identifiable {
var id = UUID()
var color : Color
var name : String
static let preview : [Colors] = [
Colors(color: .black, name: "Black"),
Colors(color: .red, name: "Red"),
Colors(color: .blue, name: "Blue"),
Colors(color: .pink, name: "Pink"),
Colors(color: .yellow, name: "Yellow"),
Colors(color: .green, name: "Green"),
Colors(color: .black, name: "Black")
]
}Oluşturduğumuz 7 adet kartı ScrollView api sini kullanarak ForEach içerisinde yazıyoruz yemek tarifi gibi oldu :)
struct ContentView: View {
@State private var scrollPosition : Int? = 0
var body: some View {
NavigationStack{
ScrollView{
ForEach(Colors.preview) { color in
color.color
}
}
}
}
}
color parametresi ile kart görünümünü için frame ve cornerRadius verdikten sonra artık animasyonlara geçebiliriz.
ScrollView{
ForEach(Colors.preview) { color in
color.color
.frame(width : 350 , height: 300)
.overlay(
Text(color.name)
.foregroundColor(.white)
)
.cornerRadius(23)
}
}
ScrollView içerisinde animasyon geçişleri için scrollTransition methodunu birlikte deneyelim ;
ScrollView{
ForEach(Colors.preview) { color in
color.color
.frame(width : 350 , height: 300)
.overlay(
Text(color.name)
.font(.title)
.foregroundColor(.white)
.scrollTransition(transition: { visualEffect, phase in
visualEffect
.scaleEffect(phase.isIdentity ? 1 : 0)
})
)
.cornerRadius(23)
}
}Burada visualEffect işlem yapacağımız view ve phase ise view için appear dissappear konumlarında neler kullanacağımızı belirlediğimiz parametredir.
scrollTransition içerisinde ilk önce scaleEffektini kullanıyoruz.
phase parametresi için kullandığımız isIdentity ölçeklendirmede kullanılır, value ise iki değerin eşit olup olmadığını gösteren bir Boolen değeri döndürür.
Şimdi ise kodumuza rotationEffect ekleyelim.
ForEach(Colors.preview) { color in
color.color
.frame(width : 350 , height: 300)
.overlay(
Text(color.name)
.font(.title)
.foregroundColor(.white)
)
.cornerRadius(23)
.scrollTransition(transition: { visualEffect, phase in
visualEffect
.scaleEffect(phase.isIdentity ? 1 : 0)
.rotationEffect(.degrees(phase.value > 0 ? 45 : 0))
})
}
}
Son olarak opacity ve blur ekleyelim
ScrollView{
ForEach(Colors.preview) { color in
color.color
.frame(width : 350 , height: 300)
.overlay(
Text(color.name)
.font(.title)
.foregroundColor(.white)
)
.cornerRadius(23)
.scrollTransition(transition: { visualEffect, phase in
visualEffect
.scaleEffect(phase.isIdentity ? 1 : 0)
.rotationEffect(.degrees(phase.value > 0 ? 45 : 0))
.opacity(phase.value > 0 ? 0 : 1)
.blur(radius: phase.value > 0 ? 25 : 0)
})
}
}
İstenirse burada offset verilerek kartları yatayda kaydırabilir ve ya axis i horizantal vererek aynı animasyonları yatay da kullanabiliriz.
