Zenn
Closed3

SwiftUI: ボタンのアニメーションをオフにしたい…

SwiftUI
kabeyakabeya

SwiftUIでButtonを使うと、イメージやテキストの入れ替えをしたときに勝手にアニメーションがついてしまいます。

以下がサンプルです。

struct ContentView: View {
    @State var imageState: Bool = false
    @State var buttonState: Bool = false
    
    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Image(systemName: imageState ? "checkmark.diamond" : "diamond")
                Text("Image + Text")
            }
            .onTapGesture {
                imageState.toggle()
            }

            Button(action: {
                buttonState.toggle()
            }, label: {
                HStack {
                    Image(systemName: buttonState ? "checkmark.square" : "square")
                    Text("Button")
                }
            })
        }
        .padding()
    }
}

2個チェックボックスを用意していて、上段の菱形のチェックボックスはタップしてもすぐにオンオフが切り替わります。下段の正方形のチェックボックスは、タップしてからフェードアウトフェードインしながらオンオフが切り替わります。

上段のほうにアニメーションをつけるには

            .onTapGesture {
                withAnimation {
                    imageState.toggle()
                }
            }

と、toggleしてるところにwithAnimationを付けるだけで良いのですが、逆に下段のほうからアニメーションを外す方法が分かりません。

諦めて、上段の仕組みに置き換えていくしかないのか…

kabeyakabeya

Buttonだと、タップしたときに少し色が暗くなったり、ちょっと動きが凝ってるんですよね。
ただ、チェックボックスでゆっくり切り替われると、もったり感が出てしまいます。

標準のリマインダーもチェックのオンオフにアニメーションは使ってないので、同じにできたらなとは思うのですが。

kabeyakabeya

.transition(.identify)とか.animation(.none, value: buttonState)とかは効かないので、オフにできないのかと思っていましたが、なんのことはありませんでした。

                withAnimation(.none) {
                    buttonState.toggle()
                }

で良かったみたいです。

このスクラップは2023/12/15にクローズされました