[SwiftUI]Button(ボタン)にタップアニメーション(tap animation)を付けるには？

どうも、ちょげ(@chogetarou)です。

Buttonのタップにアニメーションを付ける方法を紹介します。

方法
使用例

方法

Buttonのタップにアニメーションを付けるには、ButtonStyleを使います。

まず、ButtonStyleの構造体を作成します。

struct AniamtionButtonStyle : ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label //Button本体
    }
}

次に、makeBodyメソッドの「configuration.label」にボタンの装飾を付与します。

そして、「configuration.isPressed」でタップ時にサイズや色が変化するようにします。

struct AnimationButtonStyle : ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .background(configuration.isPressed ? tapColor : normalColor)
            .scaleEffect(configuration.isPressed ? tapSize : normalSize)
    }
}

configuration.isPressedは、Buttonがタップ中かどうかを判断できるプロパティです。

isPressedは、タップ中の場合は「true」、タップされていない場合は「false」になります。

最後に、animation修飾子を付与します。

struct AnimationButtonStyle : ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .background(configuration.isPressed ? tapColor : normalColor)
            .scaleEffect(configuration.isPressed ? tapSize : normalSize)
            .animation(・・・)
    }
}

あとは、ButtonにButtonStyleを適用するだけです。

Button(・・・)
    .buttonStyle(AnimationButtonStyle())

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {
                print("Tap!")
            }){
                Text("Button")
            }
            .buttonStyle(AnimationButtonStyle())
            
        }
    }
}

struct AnimationButtonStyle : ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundColor(.white)
            .padding()
            .background(configuration.isPressed ? Color.red : Color.blue )
            .scaleEffect(configuration.isPressed ? 0.8 : 1.0)
            .animation(.easeOut(duration: 1.0), value: configuration.isPressed)
    }
}