UIのアニメーションとトランジションの向上

UIのアニメーションとトランジションの向上

ナビゲーションやプレゼンテーションにズームトランジションを取り入れると、アプリ画面が滑らかに切り替わる印象を生み出すことができます。また、SwiftUIアニメーションを使用してUIKitのビューに動きを与えることで、切れ目を感じさせないアニメーションを簡単に作成できます。このセッションで詳しい方法を確認しましょう。

関連する章
- 0:00 - Introduction
- 1:34 - New transitions!
- 2:07 - Zoom transitions in SwiftUI
- 3:02 - Zoom transitions in UIKit
- 4:15 - UIKit view controller life cycle and callbacks
- 7:02 - Additional tips for UIKit
- 8:10 - SwiftUI animation
- 9:46 - Animating representables
- 11:20 - Gesture-driven animations
リソース
関連ビデオ

WWDC23
- Springsでアニメーション生成
- SwiftUIアニメーションの詳細
ダウンロード

「UIのアニメーションとトランジションの向上」にようこそここでは SwiftUI UIKit AppKit アニメーションの連携がこれまで以上に容易なりましたこのフレンドリーな連携機能を祝して友情ブレスレットを作ってみました今日はこのフレンドリーな連携機能を活かした素晴らしい新機能や APIをご紹介します優れた新機能を使ってたとえばタップしたセルが拡大されて画面いっぱいに表示されるような滑らかなズームトランジションをアプリに追加したい方またはSwiftUI Animationを使って UIKitやAppKitビューとの滑らかなインタラクションを実現したい方はぜひご覧くださいなおこのビデオのアニメーションはすべて速度を半分に低下させています APIの紹介のために友情ブレスレットをデザインを作るアプリを作りましたそれぞれが私の好きなAPIを表していて APIの単語の最初の文字を使っています SwiftUI.Animation.spring .repeatForever()を意味してますそれでは友情のように強いつながりを持つ連携機能について確認していきましょうまずナビゲーションやプレゼンテーションに使用できる新しい高度なトランジションを取り上げます次に SwiftUI Animationと UIKit AppKitとの間の新しい連携機能について掘り下げますこれが新しいトランジションの実現に役立ちますさらに混在する階層で Representable型を使用して SwiftUI Animationの橋渡しをする方法を説明します最後に連続型ジェスチャが含まれる場合には特にUIViewと NSViewのアニメーション化が効果を発揮することを紹介しますそれでは新しいトランジションを見ていきましょう iOS 18では新しいズームトランジションがありますこの新しいトランジションではタップしたセルが変化してビューとして表示されます見た目が新しいだけではありません常にインタラクティブな操作が可能でトランジションが始まって実行されている間もドラッグして動かすことができますアプリの中で大きなセルからのトランジションを行う場合ズームトランジションを使うことでトランジションの間も同じUI要素が継続して画面上に表示されるので継続性をより強く表現できますコードに組み込んでみましょうこれは NavigationLinkの既存のコードですブレスレットのプレビューを表示しタップされるとブレスレットのエディタを表示しますこのコードではデフォルトのスライドトランジションが実行されスライドさせた方向と反対側から新しいビューが表示されますしかしこのような場合にはズームトランジションが最適です
ズームトランジションを使用するには 2つのことが必要になります 1つ目は使用したいと明示することですそれには表示されるビューに navigationTransitionStyle モディファイアを追加してズームトランジションを指定します 2つ目はこのモディファイアをソースビューに接続することですこれによりシステムでズーム元のビューが認識されますどちらでも同じ識別子と名前空間を指定しますこれにより SwiftUIでどのプレビューからどのビューを表示するかが認識されますこれでズームができます
UIKitでズームトランジションを導入する場合も流れは同じですこちらのコードではブレスレットのプレビューがタップされるとそのブレスレット用のエディタを作成し現在のナビゲーションコントローラにプッシュします
ここにズームを導入するにはまずプッシュされたビューコントローラでズームの使用を指定します次にズームトランジションのソースとして使用するビューを指定しますできました
ズームトランジションに渡されたクロージャがズームイン時に実行されズームアウトで再度実行されますそのため安定した識別子が必要になりますこの場合ブレスレットのモデルオブジェクトは直接ビューをキャプチャするのではなくビューをフェッチするのに使用できますこれが重要となるのはコレクションビューなどでソースビューが再利用される可能性がある場合です
またエディタを離れずにスワイプでブレスレットを切り替えることもできますつまりエディタ上のブレスレットを変更できますこの処理を行いズームから適切なブレスレットのプレビューに戻るにはクロージャに渡されたコンテキストを使ってエディタから現在のブレスレットを取得します
ところでこれらのAPIは SwiftUIとUIKitの両方の fullScreenCoverおよびシートプレゼンテーションAPIと連携できますそれでは UIKitアプリについて少し詳しく見ていきましょうこの新しい滑らかなトランジションとビューコントローラのライフサイクルおよび外観に関するコールバックの連携について説明します SwiftUIを使用する方にも UIKitでのコールバックの方法が参考になります
この例を通じてプッシュされるブレスレットエディタのビューコントローラの状態について考えますまず現在のシステムの動作がわかるようにすべてのケースを確認します
赤い点がエディタの現在の状態を表しますコールバックによって状態が遷移しメソッドが呼び出されます通常のケースでは pushが最後まで実行されユーザーインタラクションがない場合エディタはDisappeared状態で開始され
Appearingを通って状態が遷移しその遷移中にviewWillAppear isAppearing didAppearが呼び出され遷移が終了すると最後はAppeared状態になります同様に popが最後まで実行されるとエディタはDisappearing状態を通って状態遷移し最終的にDisappeared状態に戻ります「戻る」ボタンのタップとインタラクティブなスワイプのどちらでpopが実行された場合でもこのようになります
一旦元に戻して popがキャンセルされた場合の動作についても確認します少しだけドラッグしてそのままにした場合 popの遷移が開始されエディタはDisappearing状態に移りますユーザーが指を持ち上げて popがキャンセルされるとアニメーションは最後まで実行されますが最後にビューコントローラはそのままAppearing状態に移り最終的にAppeared状態になり実行ループを一周しますこれが既存の遷移のシナリオにおけるコールバックのタイミングです
新しい遷移の滑らかな動作をテストするとどうなるかお見せします最初に戻ってエディタを Disappeared状態にします pushを開始するとエディタが Appearing状態になりますそれでは pushの最中に「戻る」ボタンを押すか後方スワイプして popを開始するとどうなるかを考えてみましょうこの場合 pushはキャンセルされず pushが即座に完了してエディタはそのまま Appeared状態に移行し実行ループは止まらずにそのままpopの遷移が開始され Disappearing状態に移行しますそしてここからは通常のpopの遷移となり完了まで進むかキャンセルになります
pushのキャンセルは popのキャンセルとは流れが異なりますがこれは意図的なものです理論上 pushに割り込みがあってもシステムによってキャンセルされることはなく pushは必ず popに変換されます pushされたビューコントローラ側から見ると必ずAppeared状態になりますつまりシステムが必ず通常どおりコールバックのサイクルを完全に実行するということですふう外観に関するコールバックは頼れる友人だということを忘れないように友情ブレスレットがもう1つ必要なようです
この新機能には既存のコードと最大限の互換性がありますほかにも UIKitアプリに関して pushとpopの遷移をいつでも開始できるようにしこの新しい環境でコードの正常な動作を確保するためのヒントがいくつかありますいつ遷移が始まっても対応できるようにしておきましょう遷移中の処理と遷移中でないときの処理を分けないようにしますここでは遷移が進行中の場合タップハンドラによる pushの呼び出しが失敗します遷移が実行中であるかどうかに関係なく pushを呼び出すようにします
一時的な遷移状態は最小限に抑えます
状態が少ないほど遷移の状態に依存するコードを増やさずに済みます対処が必要なことを減らすことになります
しかし遷移中の状態を追跡することが本当に必要な場合は viewDidAppearまたは viewDidDisappearでリセットしますこれらは遷移の終了時に必ず呼び出されますナビゲーションコントローラのデリゲートメソッドを使用する場合 willShowViewControllerと didShowViewControllerで同様に処理できます最後に SwiftUIをアプリに組み込みます SwiftUIは命令型というより関数型であり一般に変化し続ける環境に対処するのに適していますこのような新しい遷移への対応に有効なのが優れた機能を持つ新しい低レベルAPIです SwiftUI Animationによる UIKitおよびAppKitのビューのアニメーション化に役立ちますこれらを使ってカスタムUIを作成する方法を確認しましょうこちらはブレスレットエディタです下部のボックス内のビーズをタップするとブレスレットの最後尾にビーズが追加されます
このUIの実装にUIKitまたは AppKitを使用していた場合既存のアニメーションAPIを使って呼び出しのパラメータで springの記述を行いクロージャでビューのプロパティを更新します SwiftUIの場合も同様の構文があり SwiftUI Animationの種類を指定してアニメーションの記述を行いクロージャで状態を更新しますここで両者の良いところ取りができたら素晴らしいと思いませんか iOS 18ではそれが可能になっています SwiftUI Animationの種類を使用して UIKitとAppKitのビューのアニメーション化ができます SwiftUI Animationの種類をすべて使用することができます UIKitビューのアニメーション化に SwiftUIのCustomAnimationを使うこともできます
CALayerで動作するコードの場合はこの新しいAPIを使用する際に考慮すべきことがいくつかあります既存のUIKit APIでは CAAnimationが生成されそれがビューのレイヤに追加されますこれに対してSwiftUIのアニメーションでは CAAnimationは作成されずビューのレイヤーの表示値がそのままアニメーション化されますこれらの表示値はプレゼンテーションレイヤにも反映されます
UIKitとAppKitのビューのアニメーション化について説明しましたそれでは UIViewRepresentableなどの Representable型のコンテキストにおけるアニメーション化の方法を見てみましょうビーズの入るボックス用の既存のUIViewがあり BeadBoxという名前ですこれをこのRepresentableラッパーで SwiftUIアプリに埋め込んでいますボックスにはフタ（lid）があり "isOpen"のバインディングで開け閉めできます現在はボックスを開け閉めするとフタの表示／非表示が切り替わるだけですこれをアニメーション化したいと思います
BeadBoxWrapperの実装に UIKitが使用されていたかどうかが分からない場合 animatedモディファイアをバインディングに追加するのが自然な方法です BeadBoxWrapperが SwiftUIで実装されていた場合はこれでうまくいきますしかし lidでUIKitを使用して BeadBoxWrapperが実装されているためアニメーションの橋渡しが必要です
ここでは contextで新しいanimateメソッドを使用しましたこれによりこのアップデートに関連付けられたトランザクションのアニメーションを updateUIViewメソッドで行う UIViewの変更に適用できますトランザクション上に存在する SwiftUI Animationを取得し UIView.animateメソッドへの橋渡しをしてフタを上下にスライドさせます
できました
現在のトランザクションがアニメーション化されていない場合 animationとcompletionがただちにインラインで呼び出されるためアップデートがアニメーション化されているかどうかにかかわらずこのコードは機能します特に 1つのアニメーションが SwiftUIビューとUIViewをまたいで実行される場合でも完全に同期されて動作します
ここまで単発型のアクションに対するアニメーションの実行方法を説明しましたこれらの同じAPIが連続型のジェスチャに対して実行される場合にさらにパワフルになることを確かめましょう先ほどのビーズのボックスに戻ってボックスからビーズをドラッグして取り出すときにパンのジェスチャを実行しブレスレットの最後尾に向かってふわっと投げたいと思います
こちらはパンのジェスチャに対してビーズボックスからビーズをドラッグする処理を行う UIKitのコードですパンジェスチャに変化があるとジェスチャの変換に基づいてビーズの中心が更新されますジェスチャが終了するとビーズが最終的な位置に送られますこれをアニメーション化するにはビーズの現在の速度をもとに springの初速度を計算しますまたビーズの現在位置から最終位置までの移動距離で除算をすることにより単位速度に変換する必要がありますしかしこの必要性がなくなればもっと簡単になるでしょうそうです SwiftUI Animationにはすでにジェスチャの実行中にマージしてジェスチャの終了時の速度を保持する機能がありますここに示したのは対応するSwiftUIコードでこれにより同じ効果が得られますジェスチャ終了時の初速度の計算は必要ありません
この手法はUIViewのアニメーション化にも適用することができ同じSwiftUI Animationを新しいUIViewの animateメソッドに渡すことができます
画面上をドラッグすると指の動きに応じてジェスチャにより継続的にchangeイベントが発生しそれらのイベントごとに新しい.interactiveSpring アニメーションが作成されそれぞれで直前のものへのリターゲティングが行われますジェスチャの終了時には最後の非インタラクティブの springアニメーションが作成されますこのspringではinteractiveSpringの速度が使用され連続速度でアニメーションが進みます連続速度を使えたら最高ですねアニメーションとトランジションについて説明してきましたが後はあなた次第です大きなセルからズームする場合はズームトランジションを取り入れましょうアプリ全体の視覚的な連続性を演出できますズームトランジションは常にインタラクティブな操作が可能であるためいつ遷移が開始されても対応できるコードにしておきましょう UIKitとAppKitのビューのアニメ化に SwiftUI Animationを使用しましょう特に連続速度の維持が重要なUIに効果を発揮しますコードを大幅に単純化することができアニメーションの効果も向上します SwiftUI Animation全体の詳細については友人のKyleによるビデオ「Explore SwiftUI animation」をご覧ください Springのさらに詳しい情報については Jacobのビデオ「Animate with springs」をご覧くださいこの情報を友人にも伝えましょうこの知識を活かして素敵なブレスレットを作って広めるのもいいでしょう

NavigationLink {
    BraceletEditor(bracelet)
        .navigationTransitionStyle(
            .zoom(
                sourceID: bracelet.id,
                in: braceletList
            )
        )
} label: {
    BraceletPreview(bracelet)
}
.matchedTransitionSource(
    id: bracelet.id,
    in: braceletList
)

3:02 - Zoom transition in UIKit

func showEditor(for bracelet: Bracelet) {
    let braceletEditor = BraceletEditor(bracelet)
    braceletEditor.preferredTransition = .zoom { context in
        let editor = context.zoomedViewController
            as! BraceletEditor
        return cell(for: editor.bracelet)
    }
    navigationController?.pushViewController(braceletEditor, animated: true)
}

8:39 - Animate UIView with SwiftUI animation

UIView.animate(.spring(duration: 0.5)) {
    bead.center = endOfBracelet
}

9:56 - Animating representables

struct BeadBoxWrapper: UIViewRepresentable {
    @Binding var isOpen: Bool

    func updateUIView(_ box: BeadBox, context: Context) {
        context.animate {
            box.lid.center.y = isOpen ? -100 : 100
		    }
    }
}

struct BraceletEditor: View {
    @State private var isBeadBoxOpen = false
    var body: some View {
        BeadBoxWrapper($isBeadBoxOpen.animated())
            .onTapGesture {
                isBeadBoxOpen.toggle()
            }
    }
}

11:39 - Gesture-driven animations

switch gesture.state {
case .changed:
    UIView.animate(.interactiveSpring) {
        bead.center = gesture.translation
    }

case .ended:
    UIView.animate(.spring) {
        bead.center = endOfBracelet
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

関連する章

リソース

関連ビデオ

WWDC23