SwiftUIでの高度なグラフィックエフェクトの組み合わせ

SwiftUIのレイアウトとグラフィックスに関するAPIをクリエイティブな方法で組み合わせて、充実したカスタム体験を生み出しましょう。複雑なデザインを分解し、クリエイティブパイプラインを使ってシンプルな構成要素をつなぎ合わせる方法を紹介します。レイヤーシェーダによる描画、タイムラインに沿ったアニメーション、アライメントガイドによるビューのアンカーについても解説します。

リソース

関連ビデオ

WWDC24

SwiftUIによるカスタムビジュアルエフェクトの作成

こんにちは！ UI Frameworksチームのエンジニア、Haotianです SwiftUIの誕生以来 SwiftUIはグラフィックスとレイアウト機能を着実に拡張しリッチでカスタムな体験を提供したい方々に選ばれています Appleデバイス上で AppleもSwiftUIを使って自社アプリ全体に高度なエフェクトを構築しています「高度な」という言葉は難しく聞こえるかもしれませんしかし高度なエフェクトであっても SwiftUIアプリは同じ基本要素を共有していますパイプラインのようなものです

データは一連の標準的なパイプを流れていきます入力を受け取り変換して次へと渡していきます SwiftUIの段階的な開示設計により各パイプは単独でも機能しますしかしそれらを繋げたり分岐を作ることもできますフローを合流させることもできますそこで創造性が発揮されます「高度さ」は複雑さではなく構造の組み合わせにありますロードマップをご紹介しますまずデザインを分解していきます次に高度なエフェクトを構築します最後にこれらのテクニックをアプリに活用する方法を紹介しますクリエイティブなパイプラインを使って制作中のデザインがこちらです

私は自分のポッドキャストアプリを制作してきました現在の画面がこちらです最小限のトランスクリプト表示ですこれをもっと凝ったものにします Apple Musicのライブ歌詞表示のようにアニメーションするカバーアートと時刻に同期してスクロールするテキストですどこから始めればいいのでしょうか

すでにあるものから始めます既存のユーザーインターフェースには必要なデータがすべて含まれていますカバーアートや再生情報やトランスクリプトのテキストがあります問題は必要なデータではなくパイプラインを使ってどう変換するかということですいくつかの例をご紹介します

カバーアートから始めます画像をビジュアライザに変換するパイプが必要ですシェーダーパイプが適しています

ビジュアライザは再生状態を反映するために動く必要があります動的なビジュアルのためにタイムパイプをパイプラインに接続しますこれで2つのパイプが1つに統合されます

タイムパイプはそれ以上のことができますトランスクリプトパイプにはタイムスタンプのオーバーレイが追加されていますしかし現在時刻を把握していませんそのため正しくスクロールできません

同じタイムパイプを接続することで時刻同期スクロールが実現できますこれで背景に動的なビジュアルが得られます前景にはスクロールするトランスクリプトが配置されますこの2つの並列パイプを接続する時が来ました全体を見渡すとすべてのモディファイアがあらゆるAPIがパイプラインの別のステージですただ流れていくだけです

今示されたようにポッドキャストアプリには高度な視覚効果とレイアウトがありますフルスクリーンのカバーアートやシェーダーエフェクトと時間駆動のアニメーションを適用しています時刻同期スクロールのトランスクリプト表示もありますフローティングビューのアタッチメントで洗練されていますそれぞれについて達成方法を説明していきますカバーアートから始めます

素材はこちらですカバーアートの画像です

カバーアートは美しいですがトランスクリプトの背後に配置します .blurモディファイアで背景と競合しないよう柔らかくします

カバーアートをぼかしたので次はシェーダーの魔法を適用しますシェーダーとは何でしょうか SwiftUIのコード記述とどう違うのでしょうか説明しましょう

このアイコンはベクターから始まります GPUによりピクセルへとラスタライズされます

この段階でGPU上で実行するシェーダーというプログラムを使えますピクセルに塗る色を決定するためのものです

シェーダー関数は並列で実行されます各ピクセルは独立して実行され隣接するピクセルを認識しませんそれを踏まえれば Metalシェーダーの仕組みが明確になります SwiftUIのシェーダーエフェクトAPIから呼び出せることがわかりますシェーダーエフェクトには 3つの種類がありますそれぞれ異なるメソッドシグネチャを持ち特定のパラメータが必要です追加のパラメータを付け加えることもできます SwiftUIからシェーダーに転送したい情報のためです

colorEffectは各ピクセルの色を新しい色に変換することで機能します各ピクセルにはピクセル位置が提供されますその位置における元のビューのピクセルカラーとともにその情報に基づいて新しい色を返しますこれはシンプルなエフェクトに役立ちますカラー画像を白黒に変換するようなものです

distortionEffectの動作は異なります特定の位置に色を期待する代わりに distortionEffectFunctionは既存の位置を新しい位置として受け取ります SwiftUIが元の画像からサンプリングする位置ですピクセルカラーは関係しません SwiftUIに「この位置の色はあの位置の色に従う」と伝えますここに示すシアーエフェクトのような幾何学的効果に役立ちます

layerEffectが最も柔軟です layerEffectFunctionは依然ピクセル単位で動作しますがビュー全体のレイヤが提供されます隣接するピクセルや領域全体をサンプリングできますブラーのようなエフェクトに役立ちます出力ピクセルカラーが複数の入力ピクセルに依存する場合です

私のユースケースでは distortionEffectも使えますが layerEffectの方が最も柔軟性があります layerEffectモディファイアを追加し次にbackgroundWarpというシェーダー関数を追加します

今のところ指定された位置で元のレイヤをサンプリングするだけです元の画像がそのまま返ってきますしかしこれで構築できるシェーダー関数ができました

layerEffectを使えば元のビュー全体からサンプリングできます例えばfloat2ベクトルをシェーダー関数に渡せますサンプル位置をオフセットするためにシェーダーで使用します

関数パラメータに合わせるため SwiftUI側からfloat2ベクトルを渡すようにします

オフセットを増やすと各ピクセルがこのオフセット値でシェーダーを実行しますすべてが均一に距離を増しながらサンプリングするようになります

オフセットを0に減らすと画像が元に戻ります

ただし均一なオフセットのため固定パターンでシフトしたピクセルしか得られませんもっとオーガニックなものピクセルごとに変化するものが必要です

オーガニックな変化のために NoiseTextureを使いますなめらかなランダム値を事前計算した画像です

今度はSwiftUI側でビューのサイズをNoiseTextureと一緒に画像パラメータとして渡します

Metal側では画像はtexture2dとして届きます

これからかなり本格的な Metalのコードをご紹介します

まず現在のピクセル位置とサイズを使って uv値を取得しますこの画像内の相対位置を表します絶対位置なしでテクスチャをサンプリングできます

NoiseTextureの中身を見ていきます

RGBチャンネルがあります赤と緑のチャンネルが興味深いですそれぞれが異なるノイズパターンを含んでいるからです

uvを動かすと赤と緑の値が変わりますこの常に変化する2つの値は都合よく適しています XとYのオーガニックなオフセットにピクセルごとに異なるためです

Metalシェーダーに戻りましょう

タイル状にするためrepeatモードでサンプラーを作成します各ピクセルのUV位置でノイズをサンプリングします赤と緑のチャンネルが 2次元オフセットを提供しますそれをスケールして位置に加算し元のビューからサンプリングしますシェーダーが画像をわずかにねじります

それはピクセルごとの変化ですがもっとリッチなものが欲しいです

そこで試してみます 1回のノイズサンプルの代わりに 2回行ったらどうでしょうか 1回目で初期オフセットを取得します次にノイズを再びサンプリングしますしかし今度は初期オフセットでシフトした位置からですするとこのようにオーガニックに流れるようなかたまりができます

この重ねたノイズのアプローチはドメインワーピングと呼ばれる手法です実装方法を確認するにはサンプルアプリをダウンロードしてくださいプレビューも付いているのでパラメータを自由に試せます

シェーダーエフェクトができましたがまだ静止しています動かす必要がありますそこで時間の出番です

SwiftUIのトランザクションベースのアニメーションとは異なりシェーダーはステートレスです前フレームの記憶を持たず出力はパラメータのみに依存しますアニメーションには時間とともに変化する値を渡す必要があります

TimelineViewこそ接続が必要なパイプですアニメーションスケジュールによりタイムスタンプで毎フレーム起動しますそのタイムスタンプをシェーダーに渡します位置に加えてノイズからサンプリングしますパターンが流れ始めます

これが時間駆動のシェーダーアニメーションですトランスクリプト表示でも時間を組み合わせる必要があります現在実行中のトランスクリプト行がハイライトされスクロールビューの中央に表示されます

トランスクリプトはこちらです ScrollView内のLazyVStackにテキストビューが並んでいます各行は独立したビューです見慣れたSwiftUIです再生状態に追従させる必要があります

再生タイムスタンプを使って現在の行を特定します現在の行は太字でクリアに表示され他はフェードバックします onChangeモディファイアで現在行の変化を監視します現在行を中央に保つようにスクロールします

時刻同期スクロールビューが動くようになりました次に現在行の小さなタイムスタンプに注目しますすべての行のオーバーレイにタイムスタンプがありますしかし現在行のタイムスタンプだけが表示されますこうすることでレイアウトに干渉しません常に存在し表示されるのを待っています

この1行に注目しましょうコンテナの端に付いたサブビューですどうすればそこに配置できますか offsetモディファイアは両ビューのサイズを知らないとできません

まずアライメントについて説明しますすべてのビューにはアライメントがありますレイアウトシステムがビューを配置するために使う点だと考えてください両軸で定義されます

サブビューをオーバーレイコンテナに配置するとレイアウトシステムはデフォルトの中央アライメントで整列します

両ビューを貫通するピンのようなものです各ビューのアライメント点で両者を固定します

オーバーレイのアライメントを .bottomLeadingに変更します

ピンは各ビューの bottom leading点を貫通しますそこで互いに固定されます

現在レイアウトシステムは bottom leadingアライメントを要求しますサブビューはbottom leading点を返してピンを通します

これを明示的にコードで表現するならばアライメントガイドを記述して bottomはbottomを意味するようにします

目標を思い出してくださいサブビューの上端がコンテナの下端に接する必要があります

サブビューにこう伝えたらどうでしょうレイアウトシステムが bottomアライメントを尋ねたときデフォルトを使わないでください代わりにカスタムのオーバーライドがあります bottomアライメントを上端に移動させます

ピンが貫通しようとするとそのポイントに従います

純粋にセマンティックなオーバーライドを書くだけでビューを手動でオフセットせずに結果が得られますこのAPIにはさらに機能がありますカスタムのアライメントを独自に定義できますクロージャーから ViewDimensionsが得られますビューの実際のサイズから点を計算できます詳細については「SwiftUI Alignment」をご覧ください

これが完成形です最初のシンプルなトランスクリプト表示からシェーダーと時間で動くアニメーション背景に再生に同期してスクロールするトランスクリプトそしてアライメントガイドで配置されたフローティングタイムスタンプ

すべてシンプルなパイプから組み合わさって Appleデバイス全体で動作します

一歩引いて考えてみましょうデザインを取り上げレイヤに分解しました各レイヤに合った APIで生データをビューに変換しました各ステージの出力が次のステージの入力になります

このようにステージを繋げることをクリエイティブパイプラインと呼びますそれはこのポッドキャストアプリで私が選んだ選択肢ですあなたのアプリではもっとクリエイティブになれます入力はオーディオの代わりにジャイロスコープデータでもよかったシェーダーはねじりの代わりに波紋でもよかった前景はスクロールビューの代わりにフリーフォームキャンバスでもよかった組み合わせによって異なるものが生まれますそれがクリエイティブな部分で APIは同じです何を入力してどう繋げるかそれはあなた次第です

あなただけのものを作りましょうサンプルプロジェクトをダウンロードしてシェーダーを試してみてくださいノイズを変えたりスピードを調整したり違う画像を試したりしてみてください自分のアプリで機会を探してください小さな視覚効果が大きな違いをもたらす場所をそれらのパイプを繋げ始めるとシンプルなものがいかに素早く高度なものになるか驚くでしょう

ご視聴ありがとうございますそれではまた！

4:18 - Cover art image
```
Image("CoverArt")
```
4:24 - Blurred cover art image
```
Image("CoverArt")
    .blur(radius: 30)
```

7:09 - Applying layer effect in SwiftUI

GeometryReader { proxy in
    CoverArtView()
        .layerEffect(
            ShaderLibrary.backgroundWarp(),
            maxSampleOffset: .zero
        )
}
.ignoresSafeArea()

7:21 - Writing layer effect shader in Metal

[[stitchable]] half4 backgroundWarp(
    float2 position, SwiftUI::Layer layer
) {
    return layer.sample(position);
}

7:39 - Metal shader with offset parameter

[[stitchable]] half4 backgroundWarp(
    float2 position, SwiftUI::Layer layer,
    float2 offset
) {
    return layer.sample(position + offset);
}

7:55 - SwiftUI layer effect with offset parameter

GeometryReader { proxy in
    CoverArtView()
        .layerEffect(
            ShaderLibrary.backgroundWarp(
               .float2(.init(x: 0, y: 0))
            ),
            maxSampleOffset: .zero
        )
}
.ignoresSafeArea()

8:04 - SwiftUI layer effect with full-width offset

GeometryReader { proxy in
    CoverArtView()
        .layerEffect(
            ShaderLibrary.backgroundWarp(
               .float2(.init(x: proxy.size.width, y: 0))
            ),
            maxSampleOffset: .zero
        )
}
.ignoresSafeArea()

8:37 - SwiftUI layer effect with noise sampling

GeometryReader { proxy in
    CoverArtView()
        .layerEffect(
            ShaderLibrary.backgroundWarp(
                .float2(proxy.size),
                .image(Image("NoiseTexture"))
            ),
            maxSampleOffset: .zero
        )
}
.ignoresSafeArea()

8:55 - Metal shader with noise sampling

[[stitchable]] half4 backgroundWarp(
    float2 position, SwiftUI::Layer layer,
    float2 size, texture2d<half> noiseTex
) {
    constexpr sampler s(address::repeat, filter::linear);
    float2 uv = position / size;

    half4 n = noiseTex.sample(s, uv);
    float2 offset = (float2(n.r, n.g) - 0.5) * 200.0;

    return layer.sample(position + offset);
}

10:22 - Metal shader with domain warping

[[stitchable]] half4 backgroundWarp(
    float2 position, SwiftUI::Layer layer,
    float2 size, texture2d<half> noiseTex
) {
    constexpr sampler s(address::repeat, filter::linear);
    float2 uv = position / size;

    half4 n = noiseTex.sample(s, uv);

    float2 q = float2(n.r, n.g);
    n = noiseTex.sample(s, uv + q);

    float2 offset = (float2(n.r, n.g) - 0.5) * 200.0;

    return layer.sample(position + offset);
}

11:16 - SwiftUI layer effect with static visual

GeometryReader { proxy in
    CoverArtView()
        .layerEffect(
            ShaderLibrary.backgroundWarp(
                .float2(proxy.size),
                .image(Image("NoiseTexture"))
            ),
            maxSampleOffset: .zero
        )
}
.ignoresSafeArea()

11:37 - SwiftUI layer effect with animated visual

@State private var startDate = Date.now

TimelineView(.animation) { timeline in
    let elapsed = timeline.date.timeIntervalSince(
        startDate
    )
    CoverArtView()
        .layerEffect(
            ShaderLibrary.backgroundWarp(
                .float2(proxy.size),
                .image(Image("NoiseTexture")),
                .float(elapsed)
            ),
            maxSampleOffset: .zero
        )
}

12:15 - Basic transcript view

ScrollView {
    LazyVStack(alignment: .leading, spacing: 12) {
        ForEach(sampleTranscript) { line in
                .font(.title)
                .fontWeight(.bold)
        }
    }
}

12:33 - Time-synced transcript view

@State private var playback = PlaybackState()

ScrollViewReader { scrollProxy in
    ScrollView {
        LazyVStack(alignment: .leading, spacing: 12) {
            ForEach(sampleTranscript) { line in
                Text(line.text)
                    .transcriptLineStyle(isCurrent: 
                        line.id == playback.currentLineIndex
                    )
            }
        }
    }
    .onChange(of: playback.currentLineIndex, { _, i in
        scrollProxy.scrollTo(i, anchor: .center)
    })
}

13:53 - Overlay with center alignment

Text(line.text)
     .overlay {
          Text(line.formattedTimestamp)
     }

14:06 - Overlay with bottom leading alignment

Text(line.text)
     .overlay(alignment: .bottomLeading) {
          Text(line.formattedTimestamp)
     }

14:32 - Overlay with alignment guide override

Text(line.text)
     .overlay(alignment: .bottomLeading) {
          Text(line.formattedTimestamp)
              .alignmentGuide(.bottom) { $0[.top] }
     }

0:00 - Introduction
A way of thinking about advanced graphics and layout in SwiftUI as a creative pipeline — a series of stages that take data in, transform it, and pass it along.
1:40 - Design breakdown
Take a finished design and decompose it into pipeline stages. Working from a podcast app's existing UI — cover art, playback info, transcript text — see how each piece can be transformed and connected: a shader pipe converts cover art into a visualizer, a time pipe drives motion, and another time pipe syncs transcript scrolling.
4:11 - Cover art and shader effects
Soften the cover art with a blur, then layer on shader effects. Learn how shaders run per pixel on the GPU and how SwiftUI exposes them through three modifiers — color, distortion, and layer effects — each with different inputs and trade-offs. Build a layer-effect 'background warp' shader that samples a noise texture for organic, per-pixel offsets.
11:07 - Driving animation with time
Shaders are stateless — for animation, time has to come from outside. Use TimelineView to fire every frame with a timestamp, pass it into the shader, and watch the warp pattern flow as time advances.
12:00 - Time-synced transcript view
Build the foreground transcript using Text views in a LazyVStack inside a ScrollView. Use the playback timestamp to highlight the current line and fade the rest, then use onChange to scroll the current line to center as playback progresses.
13:18 - Floating timestamps with alignment guides
Position a small timestamp on the edge of the current line without resorting to manual offsets. Walk through how SwiftUI's alignment system pins views together at their alignment points, then use alignmentGuide to override an alignment semantically — moving the subview's bottom guide to its top edge so it floats neatly outside its container.
16:16 - Creative pipelines
Step back and see the pattern: each stage's output becomes the next stage's input. The same approach extends beyond this podcast app — swap audio for gyroscope data, a twist shader for a ripple, or a scroll view for a freeform canvas — to compose your own advanced effects.
17:13 - Next steps
Download the sample project, experiment with the shader, and look for opportunities in your own app where a small visual effect could make a big difference.

「今すぐ始める」を詳しく見る

最新情報

プラットフォームを詳しく見る

特集

テクノロジーを詳しく見る

特集

コミュニティを詳しく見る

特集

ドキュメントを詳しく見る

リリースノート

ダウンロードを詳しく見る

特集

サポートを詳しく見る

特集

クイックリンク

SwiftUIでの高度なグラフィックエフェクトの組み合わせ

関連する章

リソース

関連ビデオ

WWDC24