Scroll Animation iOS 17

Mesut Aygun
3 min readJun 16, 2023

--

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.

--

--