概要

iOS17で扱えるアイコンのまとめです。
もっと簡単に言うと、try! Swift でのZamzam氏のまとめ

参考文献

Enhanced Animations（強化されたアニメーション）

.phaseAnimator

配列を使ってアニメーションの複数のステージを定義します。アニメーションはこれらのステージ間をループする。

            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.green)
                .phaseAnimator([1, 2]) { content, phase in
                    content
                        .scaleEffect(phase)
                        .rotationEffect(phase == 1 ? .degrees(0) : .degrees(360))
                }

アニメーションのトリガー
TODO: 動作確認はまだしていない

            var isGlobeSelected = false
            Image(systemName: "globe")
                .font(.largeTitle)
                .phaseAnimator([1, 2], trigger: isGlobeSelected) { content, phase in
                    content.scaleEffect(phase)
                }.onTapGesture {
                    isGlobeSelected.toggle()
                }

各アニメーション・ステージのタイミングをカスタマイズ

            @State var isTapped = false
            Image(systemName: "globe")
                .font(.largeTitle)
                .phaseAnimator([1, 2, 3], trigger: isTapped) { content, phase in
                    content.scaleEffect(phase)
                } animation: { phase in
                    switch phase {
                    case 1: .bouncy
                    case 2: .bouncy
                    case 3: .easeOut(duration: 3)
                    default: .easeInOut
                    }
                }.onTapGesture {
                    isTapped.toggle()
                }

とんとんぼ 1ヶ月前

Phaseanimatorを使用すると、フェーズ間で複数のビューを持つことができます。

        VStack(spacing: 4) {
            PhaseAnimator([0, 1, 2, 3]) { value in
                Image(systemName: "pencil.tip")
                    .rotationEffect(.degrees(180))
                    .font(.largeTitle)
                    .offset(x: value * -2, y: value * 3)
                
                Image(systemName: "scribble")
                    .font(.largeTitle)
                    .offset(x: 0, y: value == 1 ? -20 : 0)
            }
        }

とんとんぼ 1ヶ月前

Enhanced animations

withAnimation()

    @State var rotate: Bool = false
    @State var move: Bool = false
    var body: some View {
        VStack {
            Image(systemName: "pencil")
                .font(.largeTitle)
                .foregroundStyle(.indigo)
                .onTapGesture{
                    withAnimation { 
                        rotate = true
                    } completion: {
                        withAnimation { 
                            move = true
                        }
                    }
                }
                .rotationEffect(rotate ? .degrees(0) : .degrees(100))
                .offset(x: 0, y: move ? -20 : 0)
        }
    }

とんとんぼ 1ヶ月前

.onChange(of:initial:_:)

Access both the old and new values of a value that changes when processing the completion closure of the onChange(of: initial:_:) view modifier

とんとんぼ 1ヶ月前

.visualEffect()

Visual Effectsは、ビューの先祖や子孫を変更することなく、ビューの視覚的な外観を変更します。

        VStack {
            Image(systemName: "heart.fill")
                .visualEffect { initial, geometry in
                    initial
                        .opacity(0.5)
                        .scaleEffect(5)

                }
        }