SwiftUIの高度なアニメーションの世界

SwiftUIの高度なアニメーションの世界

SwiftUIの最新アップデートでアニメーションを進化させましょう。複数のステップを構築し、構成されたマルチトラックアニメーション効果をキーフレームを使用して追加し、ユニークな方法でAPIを組み合わせて、あなたのアプリに命を吹き込みましょう。

関連する章
- 0:00 - Introduction
- 2:23 - Animation phases
- 8:12 - Keyframes
- 15:07 - Tips and tricks
リソース
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
- SwiftUIの新機能
- SwiftUIアニメーションの詳細
ダウンロード

♪ ♪
こんにちは SwiftUIの高度なアニメーションの世界にようこそ私はSwiftUIチームのTimです SwiftUIにはあなたのアプリを輝かせる強力なアニメーションツールがありますインタラプトが可能で物理ベースで信憑性のある動きのアニメーションがフレームワーク全体に深く統合されています今日はアプリのアニメーションを更に改善させるエキサイティングな新ツールを紹介します始める前にSwiftUIの既存のアニメーションツールを復習しましょう他の動画で好きなペットに投票できるこのアプリを見たことがあるかもしれませんこのデモを簡単にするためにベストな選択肢である猫以外を削除しておきましたアニメーションの追加は簡単で withAnimation か animation modifierを追加するだけですアプリのステート変更後に SwiftUIは前のステートから現状へ補間するアニメーションを適用しますしかしアニメーションでは人生と同じように思いがけないときに素晴らしい経験が見つかることがあります時にはありきたりな道から外れて特別なものを作るために旅そのものに集中するのですアニメーションは単純に前のステートから次へ進むだけではないこともあります今日は複雑なマルチステップアニメーションのための強力な新しいツールを紹介します 2つのステート間でアニメーションするのではなくこれらのアニメーションは順番に起こる複数のステップを定義できますこれらは2つの状況で特に便利ですビューが表示されている間ずっとループする連続アニメーション… イベント発生時にパルスするビューのようなイベント駆動型アニメーションです本動画ではこういったアニメーションの構築をより簡単にする新しいAPIファミリーを紹介しますまずanimation phasesを紹介しますこれによりSwiftUIはアニメーションを構成する計画済みの一連の状態を自動で進められます次にkeyframeを使ってアニメーションをさらに進化させる方法を紹介します最後にこのAPIを最大限に活用するための高度なヒントとコツを紹介します準備は整いましたねさっそく飛び込みましょう私はSwiftを書いていないときはトレイルランニングをするのが好きですトレイルレースはとても長いですウルトラマラソンは完走するのに丸一日あるいは数日かかるので私は今後のイベントの計画を立てたりランニング中の情報管理に役立つアプリを作ってきましたトレイルでは栄養補給が超重要です残念なことにレース後半疲れが溜まると食べるのを忘れてしまいがちですそこで適切なタイミングで食事のリマインドをする機能を追加しました画面下のリマインダーが食事の時間が過ぎていると知らせていますしかし問題がありますレース後半になって疲れてくると控えめな指標は見逃してしまうことがあるのですうっかり食事を抜くのは避けたいのでリマインダーを目立たせる動きを加えますこのビューを見てみましょうアニメーションのハイライト効果をつけてより目立たせますアニメーションさせるには .phaseAnimator modifierを適用します .phaseAnimator modifierはマルチパートアニメーションの各ステップを定義するステートシーケンスを提供します SwiftUIはこれらのステートの間で自動的にアニメーションを行いますこの場合 2つの状態の間をアニメーションさせるだけですハイライト付きとハイライト無しですですので単純にブール値を使います次に現在のphaseに応じてビューの外観を変更するためにいくつかのmodifierを適用しますまずopacity modifierから始めますハイライトされているときはビューを完全に不透明にしそうでないときは50%透明にしますビューはすぐにアニメーションを開始します SwiftUIがあなたの代わりに何をしているか説明しましょうビューではphase animator modifierに 2つのphaseを与えました falseとtrueですビューの最初の表示では最初のphaseがアクティブになりビューが50%透明になります SwiftUIはすぐにビューが完全に不透明になる次の段階へのアニメーション遷移を開始しますそしてそのアニメーションが終わると SwiftUIは再び進みます 2つのフェーズしかないので最初にループしますこれによってアニメーションは 2つの状態の間を循環しますもちろん 2つ以上のフェーズを含むアニメーションを定義することもビューmodifierを追加することもできます後ほどお見せしますさてビューがアニメーションしている間その効果は実に控えめです不透明度ではなく前景のスタイルを変えてみましょうハイライトされているときは赤を使いそれ以外は初期のスタイルに戻しますアニメーションは少し唐突ですがより見やすくなりましたデフォルトでは SwiftUIは springアニメーションを使用します springは動的なステート変化の扱いに最適ですがここではよりスムーズで一貫性のあるアニメーションが必要です末尾にanimationクロージャを追加することで変更できます各phaseで異なるアニメーションを使う場合に備えてアニメーションの対象となる phaseが渡されますしかし私はいつも同じイーズインアウトアニメーションを速度を落としたカスタムのdurationで使いたいのです通常インタラクティブなステート変更に 1秒間のアニメーションを使わないでしょうアニメーションが終わるのを待たせたくないからですしかし今回はアンビエント効果を構築しているので少しゆっくりした動きでも構いません食事が遅れたときの私のペースのようにね栄養補給という緊急の問題を解決できたので AnimationPhaseの使い方をもうひとつ見てみましょうイベントによってトリガーされるアニメーションです私はしばらくの間このアプリに取り組んできて友人がどのレースを走ったかを見る機能を追加しました絵文字は他の人が残したリアクションですランナーは誰でも自問することがあります：なぜ走るのか？なぜこんな長距離を？とそれに対してこのアプリができることは誰かがレースを高評価したときに楽しい効果を追加して承認欲求を満たすことです誰かがリアクションするたびに再生されるアニメーションを追加しますまずはアニメーションのphaseを定義します単純に2つの状態を交互に繰り返す前の例とは異なりより複雑なアニメーションが欲しいですね enumはアニメーションのステップのリストを定義するのに最適ですここでは 3つのcaseを追加しました：最初の出現のcase ビューを上に移動するcase ビューを拡大するcaseですビュー本体を単純化するため計算プロパティをenumに追加して適用する効果を定義しますビューを上にジャンプさせたいので計算された垂直オフセットプロパティを追加しました enumを切り替えて各caseに適したオフセットを返します同様にビューのスケールと前景スタイルを決定するため 2つの計算プロパティを追加しましたここでは実装をお見せしませんがこれらも垂直オフセットプロパティと同様に switch文を使用していますビューに戻ってアニメーションを追加しましょう phaseAnimator modifierを追加しますが今回はtrigger値を指定します trigger値を得たphaseAnimator modifierは指定した値の変化を観察します変化が発生すると指定したphaseアニメーションを開始します phaseタイプで定義した計算プロパティを用いてビューにmodifierを適用しますこのアニメーションは技術的には正しいですが出来がよくありません少しもたつきます springアニメーションなどを使ってトランジションごとにアニメーションをカスタマイズしましょうずっと良くなりました！さらに進化させたいならどうすれば良いでしょう？誰かがトレイルで50マイルや 100マイルを走り終えたときその人を褒め称えるアニメーションを作って走った甲斐があったと思ってもらいましょう更なるコントロールが必要な場合は keyframeという強力なツールがあります次は keyframeを使ってタイミングと動きを完全にコントロールして複雑で協調的なアニメーションを定義する方法を紹介しますまず keyframeと phaseの違いについて説明します phaseはビューに一個づつ与えられる個別のstateを定義しますそして SwiftUIは既にご存知のアニメーションタイプを使用してこれらのstate間でアニメーションを行います個別stateとしてモデル化できるアニメーションのときに効果的で state遷移が起きるときすべてのプロパティは同時にアニメーションされますアニメーションが終了すると SwiftUIは次のstateをアニメーションしますこれはアニメーションの全phaseで継続しますプロパティを別々にアニメートさせる場合はどうすれば？そこでkeyframeが登場します keyframeを使えば特定のタイミングで値を定義することができます例として回転エフェクトでこのビューをアニメートしてみましょうこのドットはkeyframeを表し各ポイントで使用する角度を示していますアニメーション再生時に SwiftUIはこれらkeyframe間の値を補間しビューにmodifierを適用するために使えますまたkeyframeは個々のタイミングで別々のトラックを定義することで同時に複数のエフェクトを個別にアニメートできます SwiftUIのどんなmodifierも keyframeを使って動かせるのでこれは本当に強力ですこの例ではkeyframeを使って垂直ストレッチやスケール平行移動などのトラックを動かしていますビューに戻ってコードでどのように見えるか見てみましょう作りたいアニメーションのアイデアはすでにあるのでまずはアニメーションを動かすプロパティを定義しますそのために独立してアニメートされるさまざまなプロパティをすべて含む新しい構造体を作成します keyframeはAnimatableプロトコルに準拠した任意の値をアニメーション化できます Doubleを使用しているプロパティは今はAnimatableに準拠しています phaseは別々の個別のstateをモデル化しますが keyframeは指定した型の補間値を生成しますアニメーションの進行中 SwiftUIはビューの更新用に全フレームでこのタイプの値を提供します次にkeyframeAnimator modifierを追加しますこのmodifierは以前に使用した phaseAnimatorに似ていますが keyframeを受け入れます構造体のインスタンスを初期値として指定しています定義したkeyframeはこの値にアニメーションを適用します次に構造体の各プロパティに対してビューにmodifierを適用しますそして最後にkeyframeを定義します前述のように keyframeを使うとプロパティごとに異なるkeyframeを使った高度なアニメーションを作成できますこれを可能にするために keyframeはトラックで構成されます各トラックはアニメートするタイプの異なるプロパティを制御しますこのプロパティはトラックの作成時に指定するKeyPathによって指定されますここではscaleプロパティの keyframeを追加します最初にlinearKeyframeを追加しスケールの初期値を繰り返し 0.36秒間保持しますどうやって0.36に決めたかというとアニメーションの感触を変えるためにいろいろな値を試してその持続時間を見つけました keyframeではこれが大切ですアプリに合ったアニメーションを作るには検証が大切です Xcodeのプレビューはアニメーションの微調整に最適です次はSpringKeyframeを追加しますターゲットに向かって値を引っ張るために spring関数が使われますそしてdurationも指定します durationが設定された SpringKeyframeでは spring関数がそのdurationの間だけ値をアニメートしますその後次のkeyframeへの補間が始まります最後にスケールを1.0に戻す別のSpringKeyframeを追加します keyframeの種類によって値の補間方法が変わりますここまでLinearKeyframeと SpringKeyframeを見てきました実はkeyframeには4つの種類があります違いを説明します LinearKeyframeは直前のkeyframeからベクトル空間で直線的に補間します SpringKeyframeはその名の通りバネ関数を使用して前のkeyframeからターゲット値に補間します CubicKeyframeは3次ベジエ曲線を使って keyframe間を補間します複数の3次keyframeを順番に組み合わせると Catmull-Romスプラインと同じ曲線になります最後にMoveKeyframeは補間なしで即座に値にジャンプしますそれぞれのkeyframeは完全なカスタマイズに対応しアニメーション内で異なる種類の keyframeを混合することができます SwiftUIはアニメーションの連続性を保つために keyframe間の速度を維持しますビューでは次のトラックを追加する準備ができましたここでは垂直方向の移動をアニメーション化するために linearとspringのkeyframeを使用しましたジャンプアップ直前にビューは予期して引き戻されますこれをspringKeyframeでモデリングしビューが上に移動する前に短く引き下げますいい感じですがアニメートするプロパティがまだ2つあります垂直ストレッチと回転です立方体のkeyframeを使った垂直方向のストレッチから始めます繰り返しますが試行錯誤が大切です keyframeを使ったさまざまなアニメーション方法を試してみてください squashとstretchはアニメーションに大きなエネルギーを与えます回転もアニメーション化しましょう素晴らしい先ほど見た曲線は？あれは今作ったアニメーションを視覚化したものです SwiftUI modifierの適用にトラックの追加もできますいろいろな組み合わせを試すのはとても楽しいです keyframeモデルについて少し復習しましょう keyframeは定義済みのアニメーションですつまり UIが流動的でインタラクティブであるべき状況では keyframeは通常のSwiftUIのアニメーションの代わりにはなりません keyframeは再生可能なビデオクリップのように考えてください多くの操作性を与えますがトレードオフがありますアニメーションの進行方法を正確に指定するため keyframeアニメーションはspringのように優雅にリターゲットできませんそのためアニメーション途中の keyframe変更は避けましょう keyframeは定義したタイプの値をアニメートするのでそれを使うことでビューに各種modifierを適用します 1つのkeyframeトラックを使って 1つや組み合わさったmodifierを動かすこともできますあなた次第ですアニメーションは定義した値で行われるためすべてのフレームで更新されますつまり keyframeアニメーションをビューに適用している間は高価な操作は避けるべきです最後にkeyframeで他に何ができるか説明します私のアプリにはルートを示すレースマップが含まれています自動的にズームインしてコースをたどるアニメーションを追加しましょうありがたいことにMapKitではkeyframeでカメラを動かせるようになりましたここではMapビューでコースを表示していますこのビューにはすでにルートがありあるレースのルートのすべての座標を含むモデルですツアーを構築するために stateプロパティと変更用ボタンを追加します最後に使うのは新しい mapCameraKeyframeAnimator modifierですトリガー値を与えKeyframeを追加します先ほどのハートアイコンと同様ですトリガー値が変わるたびにマップはこれらのKeyframeを使ってアニメーションします Keyframeの最終値はアニメーションの最後に使われるカメラの値を決定します最後にボタンを押すとツアーが始まりますアニメーション中にユーザーがジェスチャーを行うとアニメーションは解除されユーザーはカメラを完全にコントロールできます中心座標方位距離を個別にアニメーションさせることでコースをスムーズにアニメーションさせズームアウトして鳥瞰図に戻すことができます最後に keyframeを手動で評価することであらゆるエフェクトを使う方法を紹介しますここまでkeyframeAnimator modifierを見てきました modifierの外では KeyframeTimelineタイプを使って keyframeとトラックのセットを捉えることができます初期値のこの型とアニメーションを定義する keyframeトラックを初期化しますビューmodifierと同じようにです KeyframeTimelineが提供するAPIは最長トラックのdurationと同等のdurationを与えますまたアニメーション範囲内の任意の時間の値の計算ができますこれは先ほどお見せした曲線図のような keyframeを使用するSwift Chartsの視覚化を容易にします keyframeで定義された曲線を好きなように使ったり keyframeを他のAPIと創造的に組み合わせることも可能です例えば GeometryProxyと組み合わせてスクロール位置を使ってkeyframe駆動のエフェクトをスクラブしたり TimelineViewを使って時間に基づいて更新もできます使い方がわからなくても大丈夫これは高度なツールでありほとんどのデベロッパはビューmodifierにとどまるでしょう材料としてはあると覚えておいてくださいあなたがどのようなクリエイティブな方法で使うか楽しみです以上でこの旅は終わりです新しいAPI機能を楽しんでもらえることを楽しみにしてますぜひ次のことを覚えてください連鎖するアニメーションにはphaseを使う既存のアニメーションタイプをすべて使うのですぐに使い始めることができます完全制御が必要な複雑なアニメーションには keyframeを使いましょうそして最後にいろいろな試行錯誤を楽しんでくださいアニメーションはエキサイティングですこれらのツールがあなたやあなたのアプリを新しい世界へと導びきますようにありがとう！ ♪ ♪

struct Avatar: View {
    var petImage: Image
    @State private var selected: Bool = false

    var body: some View {
        petImage
            .scaleEffect(selected ? 1.5 : 1.0)
            .onTapGesture {
                withAnimation {
                    selected.toggle()
                }
            }
    }
}

3:13 - Boolean Phases

OverdueReminderView()
            .phaseAnimator([false, true]) { content, value in
                content
                    .foregroundStyle(value ? .red : .primary)
            } animation: { _ in
                .easeInOut(duration: 1.0)
            }

6:20 - Custom Phases

ReactionView()
    .phaseAnimator(
        Phase.allCases, 
        trigger: reactionCount
    ) { content, phase in
        content
            .scaleEffect(phase.scale)
            .offset(y: phase.verticalOffset)
    } animation: { phase in
        switch phase {
        case .initial: .smooth
        case .move: .easeInOut(duration: 0.3)
        case .scale: .spring(
            duration: 0.3, bounce: 0.7)
        } 
    }

enum Phase: CaseIterable {
    case initial
    case move
    case scale

    var verticalOffset: Double {
        switch self {
        case .initial: 0
        case .move, .scale: -64
        }
    }

    var scale: Double {
        switch self {
        case .initial: 1.0
        case .move: 1.1
        case .scale: 1.8
        }
    }
}

9:48 - Keyframes

ReactionView()
    .keyframeAnimator(initialValue: AnimationValues()) { content, value in
        content
            .foregroundStyle(.red)
            .rotationEffect(value.angle)
            .scaleEffect(value.scale)
            .scaleEffect(y: value.verticalStretch)
            .offset(y: value.verticalTranslation)
        } keyframes: { _ in
            KeyframeTrack(\.angle) {
                CubicKeyframe(.zero, duration: 0.58)
                CubicKeyframe(.degrees(16), duration: 0.125)
                CubicKeyframe(.degrees(-16), duration: 0.125)
                CubicKeyframe(.degrees(16), duration: 0.125)
                CubicKeyframe(.zero, duration: 0.125)
            }

            KeyframeTrack(\.verticalStretch) {
                CubicKeyframe(1.0, duration: 0.1)
                CubicKeyframe(0.6, duration: 0.15)
                CubicKeyframe(1.5, duration: 0.1)
                CubicKeyframe(1.05, duration: 0.15)
                CubicKeyframe(1.0, duration: 0.88)
                CubicKeyframe(0.8, duration: 0.1)
                CubicKeyframe(1.04, duration: 0.4)
                CubicKeyframe(1.0, duration: 0.22)
            }
            
            KeyframeTrack(\.scale) {
                LinearKeyframe(1.0, duration: 0.36)
                SpringKeyframe(1.5, duration: 0.8, spring: .bouncy)
                SpringKeyframe(1.0, spring: .bouncy)
            }

            KeyframeTrack(\.verticalTranslation) {
                LinearKeyframe(0.0, duration: 0.1)
                SpringKeyframe(20.0, duration: 0.15, spring: .bouncy)
                SpringKeyframe(-60.0, duration: 1.0, spring: .bouncy)
                SpringKeyframe(0.0, spring: .bouncy)
            }
        }

struct AnimationValues {
    var scale = 1.0
    var verticalStretch = 1.0
    var verticalTranslation = 0.0
    var angle = Angle.zero
}

15:22 - Map Keyframes

struct RaceMap: View {
    let route: Route

    @State private var trigger = false

    var body: some View {
        Map(initialPosition: .rect(route.rect)) {
            MapPolyline(coordinates: route.coordinates)
                .stroke(.orange, lineWidth: 4.0)
            Marker("Start", coordinate: route.start)
                .tint(.green)
            Marker("End", coordinate: route.end)
                .tint(.red)
        }
        .toolbar {
            Button("Tour") { trigger.toggle() }
        }
        .mapCameraKeyframeAnimation(trigger: playTrigger) { initialCamera in
            KeyframeTrack(\MapCamera.centerCoordinate) {
                let points = route.points
                for point in points {
                    CubicKeyframe(point.coordinate, duration: 16.0 / Double(points.count))
                }
                CubicKeyframe(initialCamera.centerCoordinate, duration: 4.0)
            }
            KeyframeTrack(\.heading) {
                CubicKeyframe(heading(from: route.start.coordinate, to: route.end.coordinate), duration: 6.0)
                CubicKeyframe(heading(from: route.end.coordinate, to: route.end.coordinate), duration: 8.0)
                CubicKeyframe(initialCamera.heading, duration: 6.0)
            }
            KeyframeTrack(\.distance) {
                CubicKeyframe(24000, duration: 4)
                CubicKeyframe(18000, duration: 12)
                CubicKeyframe(initialCamera.distance, duration: 4)
            }
        }
    }
}

16:26 - KeyframeTimeline

// Keyframes
let myKeyframes = KeyframeTimeline(initialValue: CGPoint.zero) {
    KeyframeTrack(\.x) {...}
    KeyframeTrack(\.y) {...}
}

// Duration in seconds
let duration: TimeInterval = myKeyframes.duration

// Value for time
let value = myKeyframes.value(time: 1.2)

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

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

関連する章

リソース

関連ビデオ

WWDC23