iOS 26からのあのニュルっとする画面遷移を私もしたい
はじめに
スターバックス デジタルテクノロジー部のリルオッサです。
Xcode 26やiOS 26がリリースされて色々と試せる環境が整ってきたので興奮気味です。
iOS 26でApple標準のメールアプリでメールの新規作成ボタンを押すと、ボタンから繋がっているような感じでニュルっと画面遷移していました。
「なんだこれは！かっこいい！！」
とても自然で滑らかな画面遷移で感動したので、実際に試してみたいと思い記事にすることにしました。
環境
- Xcode 26.0
- iOS 26.0
試したデモ
コード
import SwiftUI
struct ContentView: View {
@Namespace private var plusTransitionNamespace
@State private var presentingPlusView = false
private let plusTransitionSourceID = "plus"
var body: some View {
NavigationStack {
Image(.wallpaper)
.resizable()
.scaledToFill()
.ignoresSafeArea()
.toolbar {
ToolbarSpacer(placement: .bottomBar)
ToolbarItem(placement: .bottomBar) {
Button("Plus", systemImage: "plus") {
presentingPlusView = true
}
}
.matchedTransitionSource(
id: plusTransitionSourceID,
in: plusTransitionNamespace
)
}
}
.sheet(isPresented: $presentingPlusView) {
PlusView()
.navigationTransition(.zoom(
sourceID: plusTransitionSourceID,
in: plusTransitionNamespace
))
}
}
}
struct PlusView: View {
var body: some View {
Text("PlusView")
.font(.largeTitle)
}
}
解説
matchedTransitionSource
iOS 18からmatchedTransitionSourceはあったのですが、iOS 26からはCustomizableToolbarContentにも追加されており、ToolbarItemでも使えるようになっています。
これを使用すると、ツールバーコンテンツをズーム遷移などの遷移元として識別させることができます。idとnamespaceの組み合わせで要素の関連付けをおこないます。
表示される側のPlusView()にnavigationTransition(.zoom(sourceID:,in:))をつけて要素の関連付けをした遷移元からズームしながら遷移できるようにしています。
navigationTransitionってシートの遷移でも使えるのですね。
ToolbarSpacer
ToolbarSpacerはツールバーコンテンツにスペースを設定できるiOS 26からの構造体です。
今回、ツールバーコンテンツを左寄せするためだけに使用していますが、画面遷移とは関係ないため、こちらを削除してButtonがツールバーの中央にある状態でもニュルっとした画面遷移は機能します。
注意点
以下のようにNavigationStackの中でmatchedTransitionSourceを記述していますが、このNavigationStackがない状態では期待した結果にならなかったです。
NavigationStack {
/// ...
.toolbar {
/// ...
.matchedTransitionSource
そのため、この画面遷移をする場合はNavigationStackやNavigationSplitViewなどの中に記述することが必要そうでした。
おわりに
思ったより簡単にニュルっとした画面遷移を実現することができました。
Appleが用意してくれる滑らかな画面遷移アニメーションを駆使しながら、使う人が心地の良い体験ができるように改善していきたいですね。
