【SwiftUI】State 付きボタンのアニメーション記述 👉 https://android.benigumo.com/20240826/state-button/

AnimatedStateButton.swift

import SwiftUI

struct AnimatedStateButton: View {

  @State private var show1 = false
  @State private var show2 = false
  @State private var show3 = false
  @State private var show4 = false
  @State private var show5 = false
  @State private var show6 = false
  @State private var show7 = false
  @State private var show8 = false
  @State private var show9 = false
  @State private var show10 = false
  @State private var show11 = false

  var body: some View {
    VStack(spacing: 16) {

      // no effect no animation
      Button {
        show1.toggle()
      } label: {
        Label("Graph", systemImage: "chevron.right.circle")
          .labelStyle(.iconOnly)
          .imageScale(.large)
      }

      // OK
      Button {
        show2.toggle()
      } label: {
        Label("Graph", systemImage: "chevron.right.circle")
          .labelStyle(.iconOnly)
          .imageScale(.large)
          .rotationEffect(.degrees(show2 ? 90 : 0))
          .scaleEffect(show2 ? 1.5 : 1)
      }

      // OK custom animation
      Button {
        show3.toggle()
      } label: {
        Label("Graph", systemImage: "chevron.right.circle")
          .labelStyle(.iconOnly)
          .imageScale(.large)
          .rotationEffect(.degrees(show3 ? 90 : 0))
          .scaleEffect(show3 ? 1.5 : 1)
          .animation(.spring(), value: show3)
      }

      // no rotation animation
      Button {
        show4.toggle()
      } label: {
        Label("Graph", systemImage: "chevron.right.circle")
          .labelStyle(.iconOnly)
          .imageScale(.large)
          .rotationEffect(.degrees(show4 ? 90 : 0))
          .animation(nil, value: show4)
          .scaleEffect(show4 ? 1.5 : 1)
          .animation(.spring(), value: show4)
      }

      // OK
      Button {
        withAnimation {
          show5.toggle()
        }
      } label: {
        Label("Graph", systemImage: "chevron.right.circle")
          .labelStyle(.iconOnly)
          .imageScale(.large)
          .rotationEffect(.degrees(show5 ? 90 : 0))
          .scaleEffect(show5 ? 1.5 : 1)
      }

      // no rotate animation
      Button {
        withAnimation {
          show6.toggle()
        }
      } label: {
        Label("Graph", systemImage: "chevron.right.circle")
          .labelStyle(.iconOnly)
          .imageScale(.large)
          .rotationEffect(.degrees(show6 ? 90 : 0))
          .animation(nil, value: show6)
          .scaleEffect(show6 ? 1.5 : 1)
      }

      // too slow
      Button {
        withAnimation(.easeInOut(duration: 4)) {
          show7.toggle()
        }
      } label: {
        Label("Graph", systemImage: "chevron.right.circle")
          .labelStyle(.iconOnly)
          .imageScale(.large)
          .rotationEffect(.degrees(show7 ? 90 : 0))
          .scaleEffect(show7 ? 1.5 : 1)
      }

      // OK
      Button {
        show8.toggle()
      } label: {
        Image(systemName: "chevron.right.circle")
          .labelStyle(.iconOnly)
          .imageScale(.large)
          .rotationEffect(.degrees(show8 ? 90 : 0))
          .scaleEffect(show8 ? 1.5 : 1)
      }

      // OK state effect other view
      Button {
        withAnimation {
          show9.toggle()
        }
      } label: {
        Image(systemName: "chevron.right.circle")
          .labelStyle(.iconOnly)
          .imageScale(.large)
          .rotationEffect(.degrees(show9 ? 90 : 0))
          .scaleEffect(show9 ? 1.5 : 1)
      }

      // no scale animation
      Button {
        withAnimation {
          show10.toggle()
        }
      } label: {
        Image(systemName: "chevron.right.circle")
          .labelStyle(.iconOnly)
          .imageScale(.large)
          .scaleEffect(show10 ? 1.5 : 1)
          .animation(nil, value: show10)
          .rotationEffect(.degrees(show10 ? 90 : 0))
      }

      // no animation
      Button {
        withAnimation(.none) {
          show11.toggle()
        }
      } label: {
        Image(systemName: "chevron.right.circle")
          .labelStyle(.iconOnly)
          .imageScale(.large)
          .scaleEffect(show11 ? 1.5 : 1)
          .rotationEffect(.degrees(show11 ? 90 : 0))
      }

    }
  }
}

#Preview {
  AnimatedStateButton()
}