SwiftUIでいこう！ - WWDC23 - New VisualEffect Modifier

New VisualEffect Modifier

アニメーション関連です。まずはスクロールする時にヘッダ部分を固定した時に使えるエフェクトです。

struct ContentView: View {

    var body: some View {
        ScrollView(.vertical){
            LazyVStack{
                Rectangle()
                    .fill(.red)
                    .frame(height: 120)
                    .visualEffect{view,proxy in
                        view.offset(y:proxy.bounds(of: .scrollView)?.minY ?? 0)
                    }
                    .zIndex(1000)
                
                ForEach(1...30,id:\.self){_ in
                    Rectangle()
                        .fill(.blue.gradient)
                        .frame(height: 35)
                }
                .padding(.horizontal,35)
            }
        }
        .ignoresSafeArea(.container,edges:.top)
    }
}

How to dynamically adjust the appearance of a view based on its size and location - a free SwiftUI by Example tutorial

.visualEffect

を使っていろんな効果を得ることができます。

VisualEffect | Apple Developer Documentation

ここでは"offset"(Translating)を使っています。

Animated SFSymbols

SFSymbolsについてアニメーションをさせる方法です。

struct ContentView: View {
    @State private var animateSymbol:Bool = false
    var body: some View {
     Image(systemName: "suit.heart.fill")
            .font(.largeTitle)
            .tint(.red)
            .symbolEffect(.bounce, options:.repeating,value: animateSymbol)
            .onTapGesture{
                animateSymbol.toggle()
            }
    }
}

How to animate SF Symbols - a free SwiftUI by Example tutorial

symbolEffect(_:options:) | Apple Developer Documentation

参考に

"bounce"を使うとバウンドするアニメーションとなります。

bounce | Apple Developer Documentation

PhaseAnimator  API

マルチステップのアニメーションということです。段階を踏んでアンメーションしていきます。関数、モディファイアで指定できるようです。

struct ContentView: View {
    @State private var startSwitching:Bool = false
    var body: some View {
        PhaseAnimator(SFImage.allCases,trigger: startSwitching){symble in
            ZStack{
                Circle()
                .fill(symble.color.gradient)
                
            Image(systemName: symble.rawValue)
                    .font(.largeTitle)
                    .foregroundColor(.white)
            }
            .frame(width: 100,height: 100)
        }animation: { symbol in
            switch symbol{
            case .heart:.bouncy
            case .house:.smooth
            case .iphone:.snappy
//            case .heart:.smooth(duration: 1,extraBounce: 0)
//            case .house:.smooth(duration: 1,extraBounce: 0)
//            case .iphone:.smooth(duration: 1,extraBounce: 0)
            }
        }.onTapGesture {
            startSwitching = true
        }
        
    }
}

How to create multi-step animations using phase animators - a free SwiftUI by Example tutorial

PhaseAnimator | Apple Developer Documentation

ここでは" PhaseAnimator"を使ったアンメーション。