Animations triggered by events in SwiftUI

Question

SwiftUI animations are typically driven by state, which is great, but sometimes you really want to trigger a temporary (often reversible) animation in response to some event. For example, I want to temporarily increase the size of a button when a it is tapped (both the increase and decrease in size should happen as a single animation when the button is released), but I haven't been able to figure this out.

It can sort of be hacked together with transitions I think, but not very nicely. Also, if I make an animation that uses autoreverse, it will increase the size, decrease it and then jump back to the increased state.

Answer 1

That is something I have been into as well.

So far my solution depends on applying GeometryEffect modifier and misusing the fact that its method effectValue is called continuously during some animation. So the desired effect is actually a transformation of interpolated values from 0..1 that has the main effect in 0.5 and no effect at 0 or 1

It works great, it is applicable to all views not just buttons, no need to depend on touch events or button styles, but still sort of seems to me as a hack.

Example with random rotation and scale effect:

Code sample:

struct ButtonEffect: GeometryEffect {

    var offset: Double // 0...1

    var animatableData: Double {
        get { offset }
        set { offset = newValue }
    }

    func effectValue(size: CGSize) -> ProjectionTransform {

        let effectValue = abs(sin(offset*Double.pi))
        let scaleFactor = 1+0.2*effectValue

        let affineTransform = CGAffineTransform(rotationAngle: CGFloat(effectValue)).translatedBy(x: -size.width/2, y: -size.height/2).scaledBy(x: CGFloat(scaleFactor), y: CGFloat(scaleFactor))

        return ProjectionTransform(affineTransform)
    }
}

struct ButtonActionView: View {
    @State var animOffset: Double = 0
    var body: some View {
        Button(action:{
            withAnimation(.spring()) {
                self.animOffset += 1
            }
        })
        {
            Text("Press ME")
                .padding()
        }
        .background(Color.yellow)
        .modifier(ButtonEffect(offset: animOffset))
    }
}

Answer 2

You can use a @State variable tied to a longPressAction():

Code updated for Beta 5:

struct ContentView: View {
    var body: some View {
        HStack {
            Spacer()
            MyButton(label: "Button 1")
            Spacer()
            MyButton(label: "Button 2")
            Spacer()
            MyButton(label: "Button 3")
            Spacer()
        }
    }
}

struct MyButton: View {
    let label: String
    @State private var pressed = false


    var body: some View {

        return Text(label)
            .font(.title)
            .foregroundColor(.white)
            .padding(10)
            .background(RoundedRectangle(cornerRadius: 10).foregroundColor(.green))
            .scaleEffect(self.pressed ? 1.2 : 1.0)
            .onLongPressGesture(minimumDuration: .infinity, maximumDistance: .infinity, pressing: { pressing in
                withAnimation(.easeInOut(duration: 0.2)) {
                    self.pressed = pressing
                }
            }, perform: { })
    }
}

Answer 3

I believe this is what you're after. (this is how I solved this problem)

Based on dfd's link in i came up with this, which is not dependent on any @State variable. You simply just implement your own button style. No need for Timers, @Binding, @State or other complex workarounds.

import SwiftUI

struct MyCustomPressButton: ButtonStyle {  
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .padding(10)
            .cornerRadius(10)
            .scaleEffect(configuration.isPressed ? 0.8 : 1.0)
    }
}

struct Play: View {
    var body: some View {
            Button("Tap") {
         }.buttonStyle(MyCustomPressButton())
            .animation(.easeIn(duration: 0.2))
    }
}

struct Play_Previews: PreviewProvider {
    static var previews: some View {
        Play()
    }
}

Answer 4

There is no getting around the need to update via state in SwiftUI. You need to have some property that is only true for a short time that then toggles back.

The following animates from small to large and back.

struct ViewPlayground: View {

    @State var enlargeIt = false
    var body: some View {
        Button("Event!") {
            withAnimation {
                self.enlargeIt = true
            }
        }
        .background(Momentary(doIt: self.$enlargeIt))
        .scaleEffect(self.enlargeIt ? 2.0 : 1.0)
    }
}

struct Momentary: View {
    @Binding var doIt: Bool
    var delay: TimeInterval = 0.35
    var body: some View {
        Group {
            if self.doIt {
                ZStack { Spacer() }
                    .onAppear {
                        DispatchQueue.main.asyncAfter(deadline: .now() + self.delay) {
                            withAnimation {
                                self.doIt = false
                            }
                        }
                }
            }
        }
    }
}

Unfortunately delay was necessary to get the animation to occur when setting self.enlargeIt = true. Without that it only animates back down. Not sure if that's a bug in Beta 4 or not.