Search code examples
swiftuiswiftui-animationswiftui-button

Aura animation for SwiftUI button


How to make the following animation? Aura appears when touching the button and the whole box shrinks a bit like from the weight of finger.

enter image description here when pushed enter image description here

struct ContentView: View {
    
    var body: some View {
        Button(action: {
            
        }, label: {
                Image(systemName: "camera")
                        .font(.title)
                        .opacity(1)
        })
        .padding(.horizontal, 20)
        .frame(height: 80)
        .background(Color.yellow.opacity(0.2).clipShape(Circle()))
    }
}

Solution

  • Here is a solution using a ZStack and scaleEffect. Shrink the icon when pressed and restore on complete. Opposite for the circle, scale when pressed and restore on complete.

    Aura OnPress

    struct AuraButtonView: View {
        // automatically resets gesture when complete
        @GestureState private var tapped = false
        // max size
        @State var fullSize : CGFloat = 72
        // size when button pressed
        @State var scale : CGFloat = 0.8
    
        // camera icon, shrink when pressed, restore on complete
        var icon : some View {
            Image(systemName: "camera")
                .font(.title)
                .scaleEffect(tapped ? CGSize(width: scale, height: scale) : CGSize(width: 1, height: 1))
                .animation(.easeInOut)
        }
        
        // yellow circle, grow when pressed, restore on complete
        var background : some View {
            Circle()
                .foregroundColor(tapped ? Color.yellow.opacity(0.2) : Color.clear)
                .frame(width: tapped ? fullSize : 0, height: tapped ? fullSize : 0, alignment: Alignment(horizontal: .center, vertical: .center))
                .animation(.easeInOut)
        }
        
        // stack the icon on the circle and use the zstack as the gesture
        var body: some View {
            ZStack(alignment: Alignment(horizontal: .center, vertical: .center), content: {
                background
                icon
            })
            .frame(width: fullSize, height: fullSize)
            .gesture(DragGesture(minimumDistance: 0)
                        .updating($tapped) { (_, tapped, _) in
                            tapped = true
                        })
        }
    }
    
    struct AuraButtonView_Previews: PreviewProvider {
        static var previews: some View {
            AuraButtonView()
        }
    }
    

    Credit to @nils for the Gesture magic