アプリでシンボルをアニメーションする

アニメーションするシンボルでアプリを楽しくしましょう。シンボルエフェクトを作成し、統一された API を特徴とする、新しいSymbolsフレームワークを探索しましょう。SwiftUI、AppKit、UIKitにおいて、ユーザーインターフェイスでシンボルを簡単にアニメーションさせる方法、また、他のアプリのコンテンツと一緒に新しいアニメーションをシームレスに統合するためのヒントやトリックを学びます。このセッションを最大限に活用するには、まず"SF Symbols 5の新機能"をご覧になることをお勧めします。

リソース

- HDビデオ
- SDビデオ

関連ビデオ

WWDC23

ダウンロード

「アプリでシンボルをアニメーション化する」へようこそ Anantと申します UIKitのエンジニアです SF SymbolsはApple インターフェイスの象徴的な部分

メニューやツールバーにサイドバーなどで良い見栄えにできますまたシンボルに慣れている人が多いためアプリをより直感的に使用できるようになります iOS 17とmacOS Sonomaではシンボルをアニメーションで強化アプリにこれまで以上の活気をもたらしますまずは「シンボルエフェクト」という新しいシンボルの紹介続いてSwiftUIの新しいAPIについてまたUIKitとAppKitによるアプリへのシンボル効果を交えて説明します最後にシンボル効果を有効活用するためのヒントをいくつか紹介します

では始めることにしましょう

iOS 17とmacOS Sonomaにユニバーサルアニメのコレクションが導入されましたこれはカスタムシンボルを含むシンボルイメージに適用できますこれらのアニメーションはバウンスパルスや可変カラー拡大縮小表示消滅や置換などです

「What's new in SF Symbols 5」をご覧くださいアニメーション自体をさらに深く掘り下げるためインターフェイスを設計するためのベストプラクティスも含まれます

APIではこれらのアニメーションは「シンボルエフェクト」と呼ばれ新しいシンボルフレームワークにはそれらすべてが含まれます SwiftUIやAppKitまたはUIKitに無料で付属しますのでアプリのビルドにすぐ使えますシンボルフレームワークの非常に優れた機能は各エフェクトにドット区切りの名称が付与されていることですしたがってバウンス効果を作成するのもコードに「.bounce」を記述するだけです

これらのドット区切りの名称はエフェクトの設定方法にも適用されますたとえばシンボルが上または下にバウンスするように指定できますがほとんどの場合何も指定する必要はありませんフレームワークは自動的に最も適切な方向を使用します一部のエフェクトには多くの設定オプションが備わっていますたとえば可変カラーには３つの異なる設定がありますオプションを連鎖させることで特殊なエフェクトを簡単に設定できますエフェクト名は実際のSwiftコードと同じです制約はありません Xcodeは名称の各部分を自動補完するのでエフェクトが正しく設定されていない場合コンパイル時にエラーが発生します新しいアニメーションを探索する最良の方法は SF Symbols Appです新しいアニメーションタブでは各エフェクトで使用可能なすべての構成オプションについて学べますドット区切りのエフェクト名をコピーしてコード内で直接使用することもできますすべてのエフェクトタイプと構成オプションを使用して非常に多様なアニメーションを使用できますしかしこれらすべての影響には小さな一連の動作が含まれます

たとえばバウンスはシンボル上で１回のみアニメーションを再生これはディスクリートという動作です一方スケール効果を追加するとシンボルのスケールレベルが変更それは無期限に保持されますスケールは不定の動作をサポートしますディスクリートのエフェクトとは異なりインデフィニトの効果は明示的に削除された場合のみ終了

出現と消滅は遷移動作をサポートしますシンボルをビューの内外に移動させることが可能です

そして最後の置換はコンテンツの遷移ですあるシンボルから別のシンボルへとアニメーション化されます

これが４つの動作ですディスクリートインデフィニト遷移にコンテンツ遷移ですシンボルフレームワークではそれぞれの動作がプロトコルに対応エフェクトはこれらプロトコルに準拠することでサポートされる動作を宣言

ここでは利用可能なすべてのエフェクトとサポートされる動作の内訳を解説しますこのセッションではこれについてさらに詳しく説明しますエフェクトの動作によってどのUIフレームワークAPIが連携できるかが決まることになります UIフレームワークAPIでクールなエフェクトをすべて SwiftUIやUIKitにAppKitに追加する方法についてお話します

SwiftUIには新しいビュー modifier symbolEffectがあります

modifierを追加して目的のエフェクトを渡すだけですここでvariableColorを渡すとシンボルはデフォルトの可変カラーアニメーションを再生します

AppKitやUIKitでもこれを簡単に行えますイメージビューで新しい addSymbolEffectメソッドを使用するだけで可変カラー効果を追加ドット構文を使用して可変カラー効果の構成も可能ですここでは効果変更するのは variableColor.iterative.reversing 異なる可変色カラーのアニメーションが生成されますこれはアプリがネットワークに接続中を示す優れた方法ですさまざまなエフェクトを組み合わせることも可能ですここではスケールアップ効果を追加しますこれでシンボルが可変カラーをアニメーション化しながら拡大

これらAPIはシンボルイメージに無期限の効果を追加する簡単な方法を提供しますインデフィニトの効果はその効果が除去されるまでシンボルの一部を無期限に変更します

したがってsymbolEffect modifierを使用するとアニメーションを継続的に再生する可変カラー効果を適用できますただしエフェクトがアクティブになるタイミング制御も必要ですアプリがネットワークに正常に接続した後このアニメーションが再生され続けることは望ましくありません

そのためブール値のisActive パラメータを追加しますここではインターネット接続時のみエフェクトを適用しますアプリの接続が完了するとシンボルのアニメーションがシームレスに終了します

AppKitとUIKitでは removeSymbolEffectメソッドでインデフィニトエフェクトを終了させます１回のみのアニメーションを実行するディスクリートのエフェクトについてはどうでしょう？先ほどこの例としてバウンスについて触れましたアプリでは特定のイベントに応答してバウンス効果をトリガーするがあります

SwiftUIでは同じsymbolEffect modifierを使用してディスクリートの効果を追加できますただしSwiftUIに値を設定する必要があります値が変更されるたびにSwiftUIはディスクリートのエフェクトをトリガーします

押すとシンボルが跳ね返るボタンを追加しましょうボタンのハンドラはbounceValueをインクリメントする必要があります SwiftUIはbounceValueの変更を確認しバウンスをトリガーします AppKitとUIKitでこれを行うには画像ビューにバウンス効果を追加します Bounceはディスクリートの動作のみをサポートするため次にエフェクトを追加するとシングルバウンスが実行されます後でエフェクトを削除する必要はありません

シンボルを１回だけバウンスさせるのではない場合２回跳ねさせてみるのはどうでしょうか？ SwiftUIとAppKitにUIKitもオプションパラメーターをサポートしてます希望の繰り返し回数をここで指定できますこれでエフェクトがトリガーされるとシンボルが２回バウンスしますディスクリートの動作が可能なエフェクトはバウンスだけではありません以前に説明した２つのエフェクト PulseとVariable Colorはディスクリート動作もサポートします１回のみのアニメーションをバウンス同様再生できるわけです先ほどのバウンスの例を取り上げてみましょうそれをvariableColorに変更可変カラースイッチはそのディスクリートの動作を使用し反復しない方法で適用されるためです

ここでボタンを押すと２つの可変色サイクルが実行されます

次にコンテンツ遷移効果について説明します２つの異なるシンボルイメージ間をアニメーション化する置換エフェクトはこの主な例ですここでは一時停止記号と再生記号を切り替える画像を見てみます

SwiftUIには置換で使用できる symbolEffectという新しいcontentTransition タイプがあります表示されるシンボルを切り替えるボタンに画像を配置するとその変化がアニメーション化されます AppKitとUIKitでは新しい setSymbolImageメソッドを使用シンボルコンテンツの遷移を使用して画像を変更します

最後に独自のアニメーションでシンボルを表示または非表示にする「出現と消滅」がありますこれらの効果は遷移効果として独自に分類されますその話に入る前にパラレルワールドについて話す必要がありますご心配なく見た目ほど複雑ではありません１つのユニバースではイメージは消えますがイメージビューは階層内に残りますレイアウトに変更はありません正方形と円は互いに同じ距離のままですパラレルワールドではイメージビューが階層に追加と削除されますその結果周囲のビューのレイアウトが変更される場合があります

「出現と消滅」は両方の動作をサポートしています

最初の動作は出現と消滅がインデフィニト効果であるため可能です

インデフィニト効果の使い方はご存知かと思います SwiftUIでは.symbolEffect modifierを使用し disappear.を渡します isMoonHiddenの値が更新されると消滅効果が適用されます

AppKitおよびUIKitでは addSymbolEffectを使用し .disappearまたは .appearを渡します

ここで重要なのはインデフィニト効果がレイアウトをまったく変更しないということですこれらはイメージビュー内のシンボルのレンダリングのみを変更します

以上が最初の動作についてでした周囲のレイアウトが変わるパラレルワールドにジャンプするにはどうでしょうか？

ここで遷移動作の登場です遷移エフェクトを SwiftUIの組み込み遷移modifierで使用するとビューの挿入またはビュー階層からのビューの削除をアニメーション化します

遷移動作を使用するよう前のコードを変換しましょう条件付きで消滅効果を適用する代わりに条件付きシンボルをビュー階層に追加します

次に遷移modifierを追加します SwiftUIには次の新しい遷移タイプがありますがまずご想像のとおり symbolEffectです .disappearを渡すことでシンボルがアニメーションで追加および削除されるようになりました

自動という独自の遷移効果を使用することもできますこのエフェクトはこのシンボルに最も適切な遷移アニメーションを自動的に実行します

SwiftUIを不使用の場合は手動で追加して画像ビューを階層から削除します UIKitにはエフェクトの完了ハンドラが備わっています消えるエフェクトを追加するだけでエフェクトが終了すると画像ビューを階層から削除しますいかがでしたでしょうか SwiftUIとAppKitに UIKitのシンボル効果について基本を理解したところでアプリ内でシンボル効果を別レベルに引き上げるためのヒントをいくつか紹介しますまずUIImageViewの新しいUIKitメソッドが UIBarButtonItemでも利用可能ですこれによりシンボルアニメーションを使用してツールバーに簡単に命を吹き込めます iOS 17では一部のUIKitコントロールにもシンボルアニメーションを組込み

たとえばUISliderは親指がトラックの端に到達すると右端の画像をバウンスするようになりました新しいisSymbolAnimationEnabled プロパティを使用して UIControlとUIBarButtonItemでこれらのアニメーションを再生させるどうかを制御します

SwiftUIではシンボル効果を無効にするための特別な考慮事項もいくつかあります

SwiftUIの他のmodifierと同様 symbolEffect modifierはビュー階層を通じて派生しますこれは親ビューにmodifierを追加することで複数の画像に効果を適用できることを意味しますビューがシンボル効果を継承しないようにするには symbolEffectsRemoved modifierを使用します表示や消滅に拡大縮小などの一部のシンボル効果はアニメーションでシンボルの外観を変更しますシンボルをアニメーションなしで拡大したり最初から見えなくしておくなどが考えられるでしょう SwiftUIではアニメを無効にしたトランザクションを使用してこれを行うことが可能ですここではアニメーションを使用せずに scale.upエフェクトを使用します

AppKitやUIKitではアニメ化されたパラメータを使用 addSymbolEffectでアニメなしで効果を適用します最後に変数値について説明します

iOS 16とmacOS Venturaではシンボルの別の手段として変数値が導入されました音量レベルや信号強度などの概念を表します

iOS 17とmacOS Sonomaでは任意の変数値間のクロスフェードを大幅に簡素化して提供できるようになりました

SwiftUIでは何もする必要はありませんこちらのWi-Fiシンボルですがその変数値は何らかの状態に基づいていますがこの場合は現在の信号強度です信号強度が変化するとWi-Fi シンボルが自動的に更新され変数値全体がアニメーション化されます AppKitとUIKitではシンボルコンテンツの自動遷移を使用します新しいシンボル画像が異なる変数値かどうかを検出その場合は新しい値にクロスフェードします

本日はご参加いただきましてありがとうございますシンボルをアニメーション化する方法はたくさんあるので SF Symbols Appを使用して何が可能かをご覧くださいシンボルフレームワークから SwiftUI AppKitやUIKitの新しいシンボル効果APIをお試しください最後にアニメーションを採用してアプリのインターフェイスをこれまで以上に楽しくできます

他のシンボルセッションもチェックしてくださいシンボルアニメーションに関するヒューマンインターフェイスや効果をサポートするためにカスタムシンボルを更新することもできますコーディングを楽しんでくださいね

6:02 - Symbol effects in SwiftUI

// Symbol effects in SwiftUI

Image(systemName: "wifi.router")
    .symbolEffect(.variableColor.iterative.reversing)
    .symbolEffect(.scale.up)

6:02 - Symbol effects in AppKit and UIKit

let imageView: NSImageView = ...

imageView.addSymbolEffect(.variableColor.iterative.reversing)
imageView.addSymbolEffect(.scale.up)

6:49 - Indefinite symbol effects in SwiftUI

struct ContentView: View {
    @State var isConnectingToInternet: Bool = true
    
    var body: some View {
        Image(systemName: "wifi.router")
            .symbolEffect(
                .variableColor.iterative.reversing,
                isActive: isConnectingToInternet
            )
    }
}

7:09 - Indefinite symbol effects in AppKit and UIKit

let imageView: NSImageView = ...

imageView.addSymbolEffect(.variableColor.iterative.reversing)

// Later, remove the effect
imageView.removeSymbolEffect(ofType: .variableColor)

8:26 - Discrete symbol effects in SwiftUI

struct ContentView: View {
    @State var bounceValue: Int = 0
    
    var body: some View {
        VStack {
            Image(systemName: "antenna.radiowaves.left.and.right")
                .symbolEffect(
                    .bounce,
                    options: .repeat(2),
                    value: bounceValue
                )
            
            Button("Animate") {
                bounceValue += 1
            }
        }
    }
}

8:26 - Discrete symbol effects in AppKit and UIKit

let imageView: NSImageView = ...

// Bounce
imageView.addSymbolEffect(.bounce, options: .repeat(2))

9:40 - Content transition symbol effects in SwiftUI

struct ContentView: View {
    @State var isPaused: Bool = false
    
    var body: some View {
        Button {
            isPaused.toggle()
        } label: {
            Image(systemName: isPaused ? "pause.fill" : "play.fill")
                .contentTransition(.symbolEffect(.replace.offUp))
        }
    }
}

9:57 - Content transition symbol effects in AppKit and UIKit

let imageView: UIImageView = ...
imageView.image = UIImage(systemName: "play.fill")

// Change the image with a Replace effect
let pauseImage = UIImage(systemName: "pause.fill")!
imageView.setSymbolImage(pauseImage, contentTransition: .replace.offUp)

11:14 - Indefinite Appear and Disappear symbol effects in SwiftUI

struct ContentView: View {
    @State var isMoonHidden: Bool = false
    
    var body: some View {
        HStack {
            RoundedRectangle(cornerRadius: 5)

            Image(systemName: "moon.stars")
               .symbolEffect(.disappear, isActive: isMoonHidden)

            Circle()
        }
    }
}

11:30 - Indefinite Appear and Disappear symbol effects in AppKit and UIKit

let imageView: UIImageView = ...
imageView.image = UIImage(systemName: "moon.stars")

imageView.addSymbolEffect(.disappear)
// Re-appear the symbol
imageView.addSymbolEffect(.appear)

12:38 - Transition symbol effects in SwiftUI

struct ContentView: View {
    @State var isMoonHidden: Bool = false
    
    var body: some View {
        HStack {
            RoundedRectangle(cornerRadius: 5)

            if !isMoonHidden {
                Image(systemName: "moon.stars")
                    .transition(.symbolEffect(.disappear.down))
            }

            Circle()
        }
    }
}

12:59 - Appear and Disappear symbol effects in UIKit with completion handler

let imageView: UIImageView = ...
imageView.image = UIImage(systemName: "moon.stars")

imageView.addSymbolEffect(.disappear) { context in
    if let imageView = context.sender as? UIImageView, context.isFinished {
        imageView.removeFromSuperview()
    } 
}

14:19 - Symbol effect propagation in SwiftUI

VStack {
    Image(systemName: "figure.walk")
        .symbolEffectsRemoved()
    Image(systemName: "car")
    Image(systemName: "tram")
}
.symbolEffect(.pulse)

14:55 - Effects without animation in SwiftUI

struct ContentView: View {
    @State var isScaledUp: Bool = false
    
    var body: some View {
        Image(systemName: "iphone.radiowaves.left.and.right")
            .symbolEffect(.scale.up, isActive: isScaledUp)
            .onAppear {
                var transaction = Transaction()
                transaction.disablesAnimations = true
                withTransaction(transaction) {
                    isScaledUp = true
                }
            }
    }
}

15:06 - Effects without animation in AppKit and UIKit

// Effects without animation in AppKit and UIKit

let imageView: UIImageView = ...
imageView.image = UIImage(systemName: "iphone.radiowaves.left.and.right")

imageView.addSymbolEffect(.disappear, animated: false)

15:44 - Variable value animations in SwiftUI

struct ContentView: View {
    @State var signalLevel: Double = 0.5
    
    var body: some View {
        Image(systemName: "wifi", variableValue: signalLevel)
    }
}

16:07 - Variable value animations in AppKit and UIKit

let imageView: UIImageView = ...
imageView.image = UIImage(systemName: "wifi", variableValue: 1.0)

// Animate to a different Wi-Fi level
let currentSignalImage = UIImage(
    systemName: "wifi",
    variableValue: signalLevel
)!
imageView.setSymbolImage(currentSignalImage, contentTransition: .automatic)

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