Disable default button click animation in SwiftUi
Asked Answered
B

3

17

How can i disable the default Button click animation in SwiftUI and Swift 5? I tried to add .animation(.nil) to the button, without any changes.

I know that you can do the following:

Button(action: {}) { Capsule() }
.buttonStyle(NoAnim())

struct NoAnim: ButtonStyle {
func makeBody(configuration: Self.Configuration) -> some View {
    configuration.label
}

Does anybody know a smarter way?


EDIT:

It has been quite a while, but i remember that in my use-case a Tap-Gesture with accessibility modifiers worked fine, I don't know why i haven't thought about it :).

However, if you use Mac-Catalyst (commented by @Laszlo) or need a Long-Press-Gesture to work as well (commented by @Womble), this might actually is the smartest way.

Also, here are 1, 2 articles about transactions (suggested by a comment from @TheCodingArtwork), maybe they help you to find a way to remove the Button animations.

Berlyn answered 4/5, 2020 at 13:31 Comment(1)
This actually appears to be the smarter way. At the very least, it works, and it works with long taps, unlike all the answers provided.Mariande
K
17

If I correctly understood your question, then it is better to use just

Capsule()
  .onTapGesture {
    // << action here !!
  }
Kuntz answered 4/5, 2020 at 14:11 Comment(5)
do recognize user with Voice Over or other accessibility options this Capsule as a button?Berlyn
Depending on the contents of Capsule, there could be a lot of non-tappable space with this solutionSuperintendent
Gestures are well known as a poor technique that not only eat interactions when incorrectly used, but can also eat interactions when used within other contexts and not configured correctly. Similarly to UIKIt, it would be wise to avoid gestures when possible. In the case of the above, it would be far wiser to investigate modern SwiftUI interfaces and practices such as: avanderlee.com/swiftui/disable-animations-transactions hackingwithswift.com/quick-start/swiftui/…Aurita
very poor recommendation, especially that onTapGesture not works as expected on macOS using CatalystDismay
Apart from the other issues mentioned, a long tap will not work with this approach. Whereas it does work with a Button().Mariande
S
11

The best way to disable it is to provide a custom primitive button style that does not include the default tap animation. Here is the code to accomplish this:

struct NoTapAnimationStyle: PrimitiveButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            // Make the whole button surface tappable. Without this only content in the label is tappable and not whitespace. Order is important so add it before the tap gesture
            .contentShape(Rectangle())
            .onTapGesture(perform: configuration.trigger)
    }
}

Then apply it with this modifier on the button:

.buttonStyle(NoTapAnimationStyle())
Superintendent answered 13/9, 2023 at 18:58 Comment(1)
Problem: long-tapping on the button will no longer work.Mariande
B
2

iOS 13.x, Swift 5.

So you want something that is clickable, but not a button. Just use a label with a onTapGesture on it and then you can add whatever animation you like.

Alternatively you could use the onDrag gesture like this too. This will update the dragLocation as soon as you touch it. So it is like touch event. It also doesn't have any animation liked to it either. That you can add if you so wish.

Text("Hello World")
.accessibility(label: Text("Button"))
.gesture(
    DragGesture(minimumDistance: 5, coordinateSpace: .global)
        .onChanged { value in
          self.dragLocation = value.location
        }
        .onEnded { _ in
          self.dragLocation = .zero
        }
)
Boelter answered 5/5, 2020 at 6:8 Comment(3)
do recognize user with Voice Over or other accessibility options this Label as a button?Berlyn
Lucas. There are many tags you can add to your code to make it more accessible, they are options you need to add specifically, with .accessability modifier. I tested voiceover on the above and edited the code to announce a button when you pass over the text. But on a related/different note the best way to use this site is the post individual questions. There is no limit on the number of posts you make. For the best answers ask a specific question about accessibility in specific posts.Boelter
Apart from the other issues mentioned, a long tap will not work with this approach. Whereas it does work with a Button().Mariande

© 2022 - 2024 — McMap. All rights reserved.