Animating gestures ジェスチャーのアニメーション
グラデーションカードをドラッグ!!
スムーズバージョン！！

import SwiftUI

struct ContentView: View {
    @State private var dragAmount = CGSize.zero
    
    var body: some View {
        LinearGradient(gradient: Gradient(colors: [.yellow, .red]), startPoint: .topLeading, endPoint: .bottomTrailing)
            .frame(width: 300, height: 200)
            .clipShape(RoundedRectangle(cornerRadius: 10))
            .animation(.spring())
            
            .offset(dragAmount)
            .gesture(
                DragGesture()
                    .onChanged { self.dragAmount = $0.translation }
                    .onEnded { _ in self.dragAmount = .zero }
                /*
                    .onEnded { _ in
                    withAnimation(.spring()) {
                        self.dragAmount = .zero
                    }
                        
                }
            */
            )

    }
}

線形グラデーション

import SwiftUI

struct ContentView: View {
    @State private var dragAmount = CGSize.zero
    
    var body: some View {
        LinearGradient(gradient: Gradient(colors: [.yellow, .red]), startPoint: .topLeading, endPoint: .bottomTrailing)
            .frame(width: 300, height: 200)
            .clipShape(RoundedRectangle(cornerRadius: 10))
            
            //.animation(.spring())
            .offset(dragAmount)
            .gesture(
                DragGesture()
                    .onChanged { self.dragAmount = $0.translation }
                    .onEnded { _ in self.dragAmount = .zero }
                
                    .onEnded { _ in
                    withAnimation(.spring()) {
                        self.dragAmount = .zero
                    }
                        
                }
            )

    }
}

このコードを実行すると、文字をドラッグして文字列全体を追従させることができ、少し遅れて蛇のような効果が発生します。SwiftUIはドラッグを離すと色が変化し、文字が中央に戻ったときにも青と赤の間でアニメーション化します。

import SwiftUI

struct ContentView: View {
    let letters = Array("Hello SwiftUI")
    @State private var enabled = false
    @State private var dragAmount = CGSize.zero

    var body: some View {
        HStack(spacing: 0) {
            ForEach(0..<letters.count) { num in
                Text(String(self.letters[num]))
                    .padding(5)
                    .font(.title)
                    .background(self.enabled ? Color.blue : Color.red)
                    .offset(self.dragAmount)
                    .animation(Animation.default.delay(Double(num) / 20))
            }
        }
        .gesture(
            DragGesture()
                .onChanged { self.dragAmount = $0.translation }
                .onEnded { _ in
                    self.dragAmount = .zero
                    self.enabled.toggle()
                }
        )
    }
}

遷移によるビューの表示と非表示
Showing and hiding views with transitions

import SwiftUI

struct ContentView: View {
    @State private var isShowingRed = false

    var body: some View {
        VStack {
            Button("Tap Me") {
                withAnimation {
                    self.isShowingRed.toggle()
                }
            }

           if isShowingRed {
                Rectangle()
                .fill(Color.red)
                .frame(width: 200, height: 200)
                //.transition(.scale)
                .transition(.asymmetric(insertion: .scale, removal: .opacity))
            
            }
            
        }
    }
}

ViewModifierを使用してカスタム遷移を構築する
Building custom transitions using ViewModifier

import SwiftUI

struct ContentView: View {
    @State private var isShowingRed = false

    var body: some View {
        VStack {
            Button("Tap Me") {
                withAnimation {
                    self.isShowingRed.toggle()
                }
            }

           if isShowingRed {
                Rectangle()
                .fill(Color.red)
                .frame(width: 200, height: 200)
                //.transition(.scale)
                //.transition(.asymmetric(insertion: .scale, removal: .opacity))
                .transition(.pivot)
            
            }
            
        }
    }
}


struct CornerRotateModifier: ViewModifier {
    let amount: Double
    let anchor: UnitPoint

    func body(content: Content) -> some View {
        content.rotationEffect(.degrees(amount), anchor: anchor).clipped()
    }
}

extension AnyTransition {
    static var pivot: AnyTransition {
        .modifier(
            active: CornerRotateModifier(amount: -90, anchor: .topLeading),
            identity: CornerRotateModifier(amount: 0, anchor: .topLeading)
        )
    }
}