visionOSにおけるカスタムホバーエフェクトの作成

visionOSにおけるカスタムホバーエフェクトの作成

ユーザーが表示中のビューを更新する、カスタムホバーエフェクトの作成方法について説明します。透明度、スケール、クリップのエフェクトを組み合わせて拡張ボタンエフェクトを構築する方法を確認しましょう。使いやすく、アクセシビリティに対するユーザーのニーズを考慮したエフェクトを作成するためのベストプラクティスもご紹介します。

関連する章
- 0:00 - Introduction
- 2:35 - Content effects
- 7:46 - Effect groups
- 9:40 - Delayed effects
- 12:09 - Accessibility
リソース
関連ビデオ

WWDC24
- iOS、macOS、visionOS向けRealityKit APIの紹介
WWDC23
- 空間コンピューティングのためのウインドウ表示型アプリの向上
ダウンロード

「Create custom hover effects in visionOS」へようこそ私はSwiftUIチームのエンジニア Christianですこのセッションでは SwiftUIのビューをユーザーの視線に反応させる方法を学びます使用するのは新しいCustom Hover Effect APIです
visionOSのインタラクティブなエリアは視線を向けるとハイライトされますこのようなハイライトの適用にはホバーエフェクトを使用しますホバーエフェクトを使うとアプリの応答性が高まるとともにまたユーザーが指をタップした時にどの要素がトリガーされるかフィードバックを提供します
ホバーエフェクトは標準のコントロールに自動的に追加されます hoverEffectビューモディファイアを使えばカスタムコントロールにも追加できますハイライトなどの標準エフェクトの詳細については「Elevate your windowed app for spatial computing」をご覧ください
標準のハイライトエフェクトは多くの場合うまく機能しますがカスタムエフェクトを使った方がいい場合もあります
スライダに可能な操作を示すノブを表示できます戻るボタンを展開して前のページの名前を表示できますタブバーを開いてラベルを表示できます
Safariのナビゲーションバーを拡張してブラウザタブを表示できます
visionOS 2の新しいCustom Hover Effect APIを使えばこのようなカスタムホバーエフェクトを作成できます
カスタムホバーエフェクトはアプリのあらゆる場所のSwiftUIビュー例えばオーナメントや Reality Viewのアタッチメントに適用できますエフェクト適用のタイミングはユーザーがビューに視線を向けたり指を伸ばしたりマウスカーソルをその上に移動させたりした時です
カスタムホバーエフェクトはプライバシーを尊重するため一から設計していますこれらはシステムによってアプリプロセスの外で適用されます追加のエンタイトルメントや拡張は不要です
RealityKitにはホバーエフェクトを3Dのコンテンツに適用する新しいAPIもあります詳しくは「What's New in RealityKit」をご覧くださいこのAPIをさっそくご紹介しましょうまずコンテンツエフェクトを使ってビューの外観を変える方法を説明します次にエフェクトグループでエフェクトを複数まとめて適用する方法を解説しますまた遅延エフェクトを使用してエフェクトのタイミングを制御する方法を説明します
最後に新しい CustomHoverEffectプロトコルを使用してアクセシビリティ設定を反映する再利用可能なエフェクトを作成しますコンテンツエフェクトから見ていきましょう
コンテンツエフェクトはビューの外観を変える基本的なエフェクトですビューの不透明度を変更したりジオメトリを変形したりクリップ図形の適用が可能ですこれらのエフェクトはビューの外観を変えるだけです近くにあるビューのレイアウトには影響しませんエフェクトは2つの状態間で遷移しますビューに視線が向いていない時エフェクトは非アクティブ状態を適用し
ユーザーがビューに視線を向けるとエフェクトはアクティブ状態に遷移しビューが更新されますジオメトリのエフェクトはこの拡大エフェクトと同様にビューのジオメトリを変更します
クリップのエフェクトはビューの隠れた部分を表示します不透明度のエフェクトはコンテンツをフェードイン／フェードアウトさせますビューから視線がそれるとエフェクトは非アクティブの状態に戻ります複数のエフェクトを組み合わせると緻密なトランジションを作成できますこの拡張エフェクトがその例です私は開発中のビデオ再生アプリ用にこのエフェクトを作成しています本セッションの以降のパートではこのエフェクトの作成を段階ごとに進めていき完成させます
これはDestination Videoアプリですシミュレータで実行しています左上隅にプロファイルを切り替えるボタンを追加しましたボタンに視線を向けるとハイライトされます拡張エフェクトを完成させるための最初のステップとして視線を向けるとボタンが拡大するようにしますコードを見てみましょう
カスタムボタンにはすでにアイコンと詳細テキストを配置していますまたカスタムボタンスタイルでボタンの外観を制御していますこのコードに拡大エフェクトを追加します
ButtonStyle内で hoverEffectモディファイアを使って標準のハイライトを追加しました
拡大エフェクト用にブロックベースの新しい hoverEffectモディファイアを追加します
ブロック内で scaleEffectなどのモディファイアを使ってビューの外観を変更できますこれをアクティブ／非アクティブ状態間の遷移に対応させます
ブロック呼び出し時に isActiveがtrueならエフェクトのアクティブ状態を取得します isActiveがfalseなら非アクティブの状態を取得しますエフェクトはシステムにより適用されるのでこれらの呼び出しはホバーの実際の実行時よりも前に行われます
視線を向けた時にボタンを拡大させたいのでアクティブの時は5%の拡大を適用し非アクティブの時は拡大を適用しませんシミュレータでチェックしましょう
ボタンを見た時にハイライトと拡大の両方のエフェクトが適用されています
次はボタンの詳細テキストの表示と非表示をクリップエフェクトで切り替えますクリップエフェクトはビューの表示領域を変更します非アクティブ時に付加的なコンテンツを隠すのにも使えますエフェクトがアクティブになるとクリップエフェクトによる拡張を利用して隠れていたコンテンツを表示できます
カスタムボタンスタイルに戻りましょう既存のclipShapeモディファイアを hoverEffectブロックに移動しますエフェクトがアクティブかどうかによって clipShapeを変更できるようになります
クリップ図形のサイズを変更するために sizeモディファイアを図形に追加しますさらに hoverEffectブロックに渡されるジオメトリプロキシを使用しますこれはアクティブ／非アクティブ時のクリップ図形のサイズ計算に使用されます
このエフェクトがアクティブの時 clipShapeはボタンの幅を拡張しますこれによりボタン全体が表示されますエフェクトが非アクティブの時はボタンを円形にしてアイコンのみ表示されるようにしますこれを実現するために clipShapeのwidthとheightを同じにしてクリップ図形を円形にします
最後に新しいanchorパラメータを使用してクリップ図形をボタンの前縁に揃えることでエフェクトが非アクティブの時にアイコンが表示されるようになりますシミュレータで実行してみましょう
成功ですボタンを視線を向けると拡張され視線をそらすと折りたたまれますエフェクトをもう少し洗練させましょうボタンを拡張する時に詳細テキストをフェードインさせます
テキストのみフェードイン／アウトするので詳細テキストにhoverEffectを追加しますさらに 0~1でテキストをフェードさせる不透明度エフェクトを適用します
ほぼ完成ですがまだ完全ではありませんもう一度見てみましょう
ボタンが拡張する時に詳細テキストがフェードインするはずが詳細テキストが現れるはずのスペースに視線を向けるまでフェードインしませんなぜでしょうか
ホバーエフェクトがアクティブになるのはアタッチされたビューに視線が向いた時です私は拡大とクリップ図形のエフェクトをボタン全体に適用しましたそのためボタン内であればどこを見てもアクティブになります一方不透明度エフェクトは詳細テキストに追加しましたそのためテキストに視線が向かないとアクティブになりませんそうではなく複数のエフェクトを同時にアクティブする方法が必要ですここで役立つのがエフェクトグループですグループ化されたエフェクトはグループ内のいずれかのエフェクトがアクティブになると一緒に適用されます異なるビューのエフェクトを 1つのグループにまとめることもできいずれかのビューに視線を向けるとグループ全体がアクティブになりますこれによりアプリの特定の領域を使ってエフェクトをアクティブにできます
エフェクトをグループ化する方法は明示的と暗黙的の2種類ですまず明示的な方法でエフェクトをグループ化します
このためのグループとして HoverEffectGroupを作成します名前空間を使用してグループに一意のIDを渡します
これでグループを識別できるので明示的に各エフェクトをグループに追加しますまずは不透明度エフェクトですグループをButtonStyleに渡し残りのエフェクトをグループに追加しますすべてのエフェクトが同じグループなのでこれらは1つのエフェクトとして同時にアクティブになるはずです
これでうまくいきましたすべてのエフェクトが同時にアクティブになりましたボタンの拡張時にテキストがフェードインし折りたたみ時にフェードアウトします
エフェクトの明示的なグループ化はグループ化の際の柔軟性が非常に高くエフェクトの制御も容易ですそこまで細かい制御が必要でない場合は暗黙的なグループ化も使用できます
各エフェクトに hoverEffectGroupを渡すのではなく hoverEffectGroupモディファイアをシンプルにビューに追加しますこれによりこのビューとサブビューのすべてのエフェクトが暗黙的にグループに追加されるので各エフェクトをグループに追加する必要がなくなりますモディファイアにグループを渡さなかった場合も同様にグループが暗黙的に作成されます非常に便利ですねプロファイルボタンの完成に近づいてきましたここまでコンテンツエフェクトとエフェクトグループを使って必要な外観の変更をすべて適用しましたしかし見た瞬間にボタンが拡張されると気が散る可能性があります少し間を置いてから拡張されるようにしましょうボタンを拡張するタイミングの制御には遅延エフェクトを使用できますデフォルトではホバーエフェクトはただちに適用されますこれは操作を促すさりげないエフェクトには効果的ですしかしほとんどのエフェクトでは少しであっても遅延させる方が適切ですアプリ全体を見渡している時にエフェクトがあちこちでアクティブになるのを防げます
人間は静止状態を長くは保てません遅延によりエフェクトをしばらくアクティブにしておけばユーザーの視線が離れても表示が維持されちらつきが生じません
最後に付加的なコンテンツを表示するエフェクトには長めの遅延が必要ですこの種のエフェクトは注意をそらすのでユーザーがアプリの特定の要素を注視している時は少し間を置いてからアクティブになるようにしましょう適切な遅延の長さはエフェクトごとに異なるため必ずApple Vision Proを装着して実際の感覚を確かめてください
プロファイルボタンはコンテンツを表示するので遅延を長めにします
遅延を適用するにはエフェクトを animationモディファイアでラップして遅延アニメーションを渡します
デフォルトアニメーションを使用しエフェクトをアクティブにする際の遅延は長めにしました一方エフェクトを非アクティブにする際の遅延は短くしました
拡大エフェクトには遅延を適用しませんこれは即座に反応することが望ましいエフェクトなので遅延なしにすべきです
テキストはボタンが拡張される時にフェードインするので不透明度エフェクトにも同じアニメーションを適用しますこれでエフェクトが常に同時になります遅延を適用したので再度エフェクトを見てみましょう
いいですねボタンはすぐに反応していますこれは拡大とハイライトのエフェクトですが拡張のタイミングは少し後です
次に進む前にアニメーションのエフェクトについて補足します
指定がない場合エフェクトはSwiftUIのデフォルトアニメーションを使用します
ホバーエフェクトがサポートするアニメーションはlinear easeOut springなどの一般的なものとカスタムのタイミングカーブを使用するものです
ただし CustomAnimationの型はサポート対象外ですアプリのプロセス外では適用できないためです
拡張するボタンは私個人的にはとても素晴らしいと思いますが動きに敏感な方は不快に感じるかもしれませんエフェクトを開発する時は常にアクセシビリティへの配慮が必要です場合によっては代替エフェクトの提供も必要でしょう本セッションの残りの部分では「視差効果を減らす」設定が有効になっている場合にクロスフェードエフェクトを使用するようにプロファイルボタンを更新します
視線に応じてボタンが拡張または折りたたむのは同じですが今回はフェードエフェクトを使用します詳細テキストのフェードインのために先ほどフェードエフェクトを記述したので同じエフェクトの作成は不要です新しい CustomHoverEffectプロトコルを使用して両方の場所で使えるエフェクトを作成します
エフェクトを再利用するために記述済みの hoverEffectモディファイアをコピーして CustomHoverEffectに準拠した新しいFadeEffect型に配置します
このエフェクトのbodyメソッド内ではビューで使用したものと同じ hoverEffectモディファイアにアクセスできるのでシンプルに開始し必要に応じてリファクタリングできますこのエフェクトは独自の型なのでさらに実用的にしたい場合は非アクティブとアクティブの不透明度の値をカスタマイズ可能にします
作成した再利用可能なフェードエフェクトをボタンビューに戻って試してみましょうここで必要なのは hoverEffectブロックを削除して新しいFadeEffect()で置き換えることだけです
コードが再利用可能になると同時にクリーンになるのがメリットです拡張エフェクトも CustomHoverEffect型に移動しましょう先ほどと同様にビューからhoverEffectブロックを移動し新しいCustomHoverEffect型に配置しますこの部分は ExpandEffectという名前にします
ButtonStyleに戻ってブロックベースのhoverEffectを削除し
新しいExpandEffect()で置き換えます完璧です
これですべてのエフェクトが再利用可能になったので「視差効果を減らす」設定時クロスフェードするようにプロファイルボタンを更新します
まず @Environmentプロパティを追加して reduceMotion設定にアクセスできるようにします
reduceMotionがオンの場合は ExpandEffect()が適用されないように代わりにemptyエフェクトを適用します emptyエフェクトは何もしないというエフェクトです様々なエフェクトを動的に切り替えるには各エフェクトをHoverEffect型でラップして各自の型を消去する必要がありますまだ完成ではありませんがシミュレータで進捗を確認しましょう
背景の図形はまだ不完全ですがボタンは拡張されなくなりました詳細テキストは想定通りフェードインしています次に背景を更新してテキストと同時にクロスフェードさせますこれを実現するには既存の背景を 2種類の背景ビューで置き換えます 1つ目はCapsule()で幅はボタンと同じですボタンに視線が向けられた時に表示されるように reduceMotionがオンの場合は FadeEffectを適用します
2つ目はCircle()でこれを表示するのはボタンに視線が向いていない時ですこの背景にもFadeEffectを適用しますがカスタムの不透明度の値を追加したので他方のビューがフェードインする時にフェードアウトします
うまくいきましたボタンを見た時に背景と詳細テキストが一緒にフェードインするようになりましたこれで拡張ボタンは完成です細部にこだわったエフェクトをいくつかの簡単なエフェクトと組み合わせて作成しました適切な遅延を選択しユーザーのアクセシビリティ設定に配慮したことであらゆる人にとって快適なエフェクトになりましたみなさんもぜひ独自のクリエイティブなカスタムホバーエフェクトを作成しましょうまずはシンプルに開始して段階的にエフェクト構築を進めるとよいでしょうプロファイルボタンのアイコンのようにビューの一部は静的にしてくださいこれらのアンカー要素によってエフェクトの遷移がスムーズに見えますそしてもちろんエフェクトは徹底的にテストしてくださいシミュレータは迅速に反復できる点で優れていますがエフェクトの実際の使用感を知るには Apple Vision Proを装着してテストするしかありません
優れたホバーエフェクトの作成に役立つヒントの詳細はヒューマンインターフェイスガイドラインをご確認ください

struct ProfileButtonView: View {
    var action: () -> Void = { }
    var body: some View {
        Button(action: action) {
            HStack(spacing: 2) {
                ProfileIconView()
                ProfileDetailView()
            }
        }
        .buttonStyle(ProfileButtonStyle())
    }

    struct ProfileButtonStyle: ButtonStyle {
        func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .background(.thinMaterial)
                .hoverEffect(.highlight)
                .clipShape(.capsule)
                .hoverEffect { effect, isActive, _ in
                    effect.scaleEffect(isActive ? 1.05 : 1.0)
                }
        }
    }

    struct ProfileIconView: View {
        var body: some View {
            Image(systemName: "person.crop.circle")
                .resizable()
                .scaledToFit()
                .frame(width: 44, height: 44)
                .padding(6)
        }
    }

    struct ProfileDetailView: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Peter McCullough")
                    .font(.body)
                    .foregroundStyle(.primary)
                Text("Switch profiles")
                    .font(.footnote)
                    .foregroundStyle(.tertiary)
            }
            .padding(.trailing, 24)
        }
    }
}

5:37 - Button with Clip and Scale Effects

struct ProfileButtonView: View {
    var action: () -> Void = { }
    var body: some View {
        Button(action: action) {
            HStack(spacing: 2) {
                ProfileIconView()
                ProfileDetailView()
            }
        }
        .buttonStyle(ProfileButtonStyle())
    }

    struct ProfileButtonStyle: ButtonStyle {
        func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .background(.thinMaterial)
                .hoverEffect(.highlight)
                .hoverEffect { effect, isActive, proxy in
                    effect.clipShape(.capsule.size(
                        width: isActive ? proxy.size.width : proxy.size.height,
                        height: proxy.size.height,
                        anchor: .leading
                    ))
                    .scaleEffect(isActive ? 1.05 : 1.0)
                }
        }
    }

    struct ProfileIconView: View {
        var body: some View {
            Image(systemName: "person.crop.circle")
                .resizable()
                .scaledToFit()
                .frame(
                    width: 44,
                    height: 44
                )
                .padding(6)
        }
    }

    struct ProfileDetailView: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Peter McCullough")
                    .font(.body)
                    .foregroundStyle(.primary)
                Text("Switch profiles")
                    .font(.footnote)
                    .foregroundStyle(.tertiary)
            }
            .padding(.trailing, 24)
        }
    }
}

6:50 - Expanding Button with Ungrouped Fade

struct ProfileButtonView: View {
    var action: () -> Void = { }
    var body: some View {
        Button(action: action) {
            HStack(spacing: 2) {
                ProfileIconView()
                ProfileDetailView()
                    .hoverEffect { effect, isActive, _ in
                        effect.opacity(isActive ? 1 : 0)
                    }
            }
        }
        .buttonStyle(ProfileButtonStyle())
    }

    struct ProfileButtonStyle: ButtonStyle {
        func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .background(.thinMaterial)
                .hoverEffect(.highlight)
                .hoverEffect { effect, isActive, proxy in
                    effect.clipShape(.capsule.size(
                        width: isActive ? proxy.size.width : proxy.size.height,
                        height: proxy.size.height,
                        anchor: .leading
                    ))
                    .scaleEffect(isActive ? 1.05 : 1.0)
                }
        }
    }

    struct ProfileIconView: View {
        var body: some View {
            Image(systemName: "person.crop.circle")
                .resizable()
                .scaledToFit()
                .frame(width: 44, height: 44)
                .padding(6)
        }
    }

    struct ProfileDetailView: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Peter McCullough")
                    .font(.body)
                    .foregroundStyle(.primary)
                Text("Switch profiles")
                    .font(.footnote)
                    .foregroundStyle(.tertiary)
            }
            .padding(.trailing, 24)
        }
    }
}

8:19 - Expanding Button with Explicit Group

struct ProfileButtonView: View {
    var action: () -> Void = { }
    @Namespace var hoverNamespace
    var hoverGroup: HoverEffectGroup {
        HoverEffectGroup(hoverNamespace)
    }
    var body: some View {
        Button(action: action) {
            HStack(spacing: 2) {
                ProfileIconView()
                ProfileDetailView()
                    .hoverEffect(in: hoverGroup) { effect, isActive, _ in
                        effect.opacity(isActive ? 1 : 0)
                    }
            }
        }
        .buttonStyle(ProfileButtonStyle(hoverGroup: hoverGroup))
    }

    struct ProfileIconView: View {
        var body: some View {
            Image(systemName: "person.crop.circle")
                .resizable()
                .scaledToFit()
                .frame(width: 44, height: 44)
                .padding(6)
        }
    }

    struct ProfileDetailView: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Peter McCullough")
                    .font(.body)
                    .foregroundStyle(.primary)
                Text("Switch profiles")
                    .font(.footnote)
                    .foregroundStyle(.tertiary)
            }
            .padding(.trailing, 24)
        }
    }
}

struct ProfileButtonStyle: ButtonStyle {
    var hoverGroup: HoverEffectGroup?
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .background(.thinMaterial)
            .hoverEffect(.highlight, in: hoverGroup)
            .hoverEffect(in: hoverGroup) { effect, isActive, proxy in
                effect.clipShape(.capsule.size(
                    width: isActive ? proxy.size.width : proxy.size.height,
                    height: proxy.size.height,
                    anchor: .leading
                ))
                .scaleEffect(isActive ? 1.05 : 1.0)
            }
    }
}

9:13 - Expanding Button with Implicit Group

struct ProfileButtonView: View {
    var action: () -> Void = { }
    var body: some View {
        Button(action: action) {
            HStack(spacing: 2) {
                ProfileIconView()
                ProfileDetailView()
                    .hoverEffect { effect, isActive, _ in
                        effect.opacity(isActive ? 1 : 0)
                    }
            }
        }
        .buttonStyle(ProfileButtonStyle())
        .hoverEffectGroup()
    }

    struct ProfileButtonStyle: ButtonStyle {
        func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .background(.thinMaterial)
                .hoverEffect(.highlight)
                .hoverEffect { effect, isActive, proxy in
                    effect.clipShape(.capsule.size(
                        width: isActive ? proxy.size.width : proxy.size.height,
                        height: proxy.size.height,
                        anchor: .leading
                    ))
                    .scaleEffect(isActive ? 1.05 : 1.0)
                }
        }
    }

    struct ProfileIconView: View {
        var body: some View {
            Image(systemName: "person.crop.circle")
                .resizable()
                .scaledToFit()
                .frame(
                    width: 44,
                    height: 44
                )
                .padding(6)
        }
    }

    struct ProfileDetailView: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Peter McCullough")
                    .font(.body)
                    .foregroundStyle(.primary)
                Text("Switch profiles")
                    .font(.footnote)
                    .foregroundStyle(.tertiary)
            }
            .padding(.trailing, 24)
        }
    }
}

10:51 - Expanding Button with Delayed Effect

struct ProfileButtonView: View {
    var action: () -> Void = { }
    var body: some View {
        Button(action: action) {
            HStack(spacing: 2) {
                ProfileIconView()
                ProfileDetailView()
                    .hoverEffect { effect, isActive, _ in
                        effect.animation(.default.delay(isActive ? 0.8 : 0.2)) {
                            $0.opacity(isActive ? 1 : 0)
                        }
                    }
            }
        }
        .buttonStyle(ProfileButtonStyle())
        .hoverEffectGroup()
    }

    struct ProfileButtonStyle: ButtonStyle {
        func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .background(.thinMaterial)
                .hoverEffect(.highlight)
                .hoverEffect { effect, isActive, proxy in
                    effect.animation(.default.delay(isActive ? 0.8 : 0.2)) {
                        $0.clipShape(.capsule.size(
                            width: isActive ? proxy.size.width : proxy.size.height,
                            height: proxy.size.height,
                            anchor: .leading
                        ))
                    }.scaleEffect(isActive ? 1.05 : 1.0)
                }
        }
    }

    struct ProfileIconView: View {
        var body: some View {
            Image(systemName: "person.crop.circle")
                .resizable()
                .scaledToFit()
                .frame(
                    width: 44,
                    height: 44
                )
                .padding(6)
        }
    }

    struct ProfileDetailView: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Peter McCullough")
                    .font(.body)
                    .foregroundStyle(.primary)
                Text("Switch profiles")
                    .font(.footnote)
                    .foregroundStyle(.tertiary)
            }
            .padding(.trailing, 24)
        }
    }
}

12:50 - Expanding Button with Reusable Effects

struct ProfileButtonView: View {
    var action: () -> Void = { }
    var body: some View {
        Button(action: action) {
            HStack(spacing: 2) {
                ProfileIconView()
                ProfileDetailView()
                    .hoverEffect(FadeEffect())
            }
        }
        .buttonStyle(ProfileButtonStyle())
        .hoverEffectGroup()
    }

    struct ProfileButtonStyle: ButtonStyle {
        func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .background(.thinMaterial)
                .hoverEffect(.highlight)
                .hoverEffect(ExpandEffect())
        }
    }

    struct ExpandEffect: CustomHoverEffect {
        func body(content: Content) -> some CustomHoverEffect {
            content.hoverEffect { effect, isActive, proxy in
                effect.animation(.default.delay(isActive ? 0.8 : 0.2)) {
                    $0.clipShape(.capsule.size(
                        width: isActive ? proxy.size.width : proxy.size.height,
                        height: proxy.size.height,
                        anchor: .leading
                    ))
                }.scaleEffect(isActive ? 1.05 : 1.0)
            }
        }
    }

    struct FadeEffect: CustomHoverEffect {
        var from: Double = 0
        var to: Double = 1

        func body(content: Content) -> some CustomHoverEffect {
            content.hoverEffect { effect, isActive, _ in
                effect.animation(.default.delay(isActive ? 0.8 : 0.2)) {
                    $0.opacity(isActive ? to : from)
                }
            }
        }
    }

    struct ProfileIconView: View {
        var body: some View {
            Image(systemName: "person.crop.circle")
                .resizable()
                .scaledToFit()
                .frame(
                    width: 44,
                    height: 44
                )
                .padding(6)
        }
    }

    struct ProfileDetailView: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Peter McCullough")
                    .font(.body)
                    .foregroundStyle(.primary)
                Text("Switch profiles")
                    .font(.footnote)
                    .foregroundStyle(.tertiary)
            }
            .padding(.trailing, 24)
        }
    }
}

14:14 - Final Expanding Button with Accessibility Support

struct ProfileButtonView: View {
    var action: () -> Void = { }
    var body: some View {
        Button(action: action) {
            HStack(spacing: 2) {
                ProfileIconView()
                ProfileDetailView()
                    .hoverEffect(FadeEffect())
            }
        }
        .buttonStyle(ProfileButtonStyle())
        .hoverEffectGroup()
    }

    struct ProfileButtonStyle: ButtonStyle {
        @Environment(\.accessibilityReduceMotion) var reduceMotion
        func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .background {
                    ZStack(alignment: .leading) {
                        Capsule()
                            .fill(.thinMaterial)
                            .hoverEffect(.highlight)
                            .hoverEffect(
                                reduceMotion ? HoverEffect(FadeEffect()) : HoverEffect(.empty))
                        if reduceMotion {
                            Circle()
                                .fill(.thinMaterial)
                                .hoverEffect(.highlight)
                                .hoverEffect(FadeEffect(from: 1, to: 0))
                        }
                    }
                }
                .hoverEffect(
                    reduceMotion
                    ? HoverEffect(.empty)
                    : HoverEffect(ExpandEffect())
                )
        }
    }

    struct ExpandEffect: CustomHoverEffect {
        func body(content: Content) -> some CustomHoverEffect {
            content.hoverEffect { effect, isActive, proxy in
                effect.animation(.default.delay(isActive ? 0.8 : 0.2)) {
                    $0.clipShape(.capsule.size(
                        width: isActive ? proxy.size.width : proxy.size.height,
                        height: proxy.size.height,
                        anchor: .leading
                    ))
                }.scaleEffect(isActive ? 1.05 : 1.0)
            }
        }
    }

    struct FadeEffect: CustomHoverEffect {
        var from: Double = 0
        var to: Double = 1

        func body(content: Content) -> some CustomHoverEffect {
            content.hoverEffect { effect, isActive, _ in
                effect.animation(.default.delay(isActive ? 0.8 : 0.2)) {
                    $0.opacity(isActive ? to : from)
                }
            }
        }
    }

    struct ProfileIconView: View {
        var body: some View {
            Image(systemName: "person.crop.circle")
                .resizable()
                .scaledToFit()
                .frame(
                    width: 44,
                    height: 44
                )
                .padding(6)
        }
    }

    struct ProfileDetailView: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Peter McCullough")
                    .font(.body)
                    .foregroundStyle(.primary)
                Text("Switch profiles")
                    .font(.footnote)
                    .foregroundStyle(.tertiary)
            }
            .padding(.trailing, 24)
        }
    }
}

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

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

関連する章

リソース

関連ビデオ

WWDC24

WWDC23