like_animation.swift

//
//  ContentView.swift
//  LikeThumbUp
//
//  Created by Amos Gyamfi on 14.8.2020.
//

import SwiftUI

struct ContentView: View {
    
    @State private var animateThumb = false
    @State private var animateSolidBorder = false
    @State private var animateDashedBorder = false
    @State var liked: Int = 199
    
    var body: some View {
        ZStack { // Thumb
            HStack {
                Image(systemName: "hand.thumbsup.fill")
                    .font(.largeTitle)
                    .rotationEffect(.degrees(animateThumb ? 10 : -5), anchor: .bottomLeading)
                    .foregroundColor(animateThumb ? Color(#colorLiteral(red: 1, green: 0.1491314173, blue: 0, alpha: 1)) :  Color(#colorLiteral(red: 0.5704585314, green: 0.5704723597, blue: 0.5704649091, alpha: 1)))
                    .animation(Animation.interpolatingSpring(stiffness: 170, damping: 6).delay(0.15))
                
                Text("\(liked)")
            }
            
            Circle()  // Solid styroke
                .strokeBorder(lineWidth: animateSolidBorder ? 0 : 25)
                .frame(width: 100, height: 100, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                .foregroundColor(Color(.systemTeal))
                .scaleEffect(animateSolidBorder ? 1.1 : 0)
                .rotationEffect(.degrees(animateSolidBorder ? 150 : 0))
                .opacity(animateSolidBorder ? 0.8 : 0)
                .animation(Animation.easeInOut(duration: 1).delay(0.17).speed(1))
            
            Circle()
                .strokeBorder(style: StrokeStyle(lineWidth: animateDashedBorder ? 0 : 50, lineCap: .butt, dash: [3, 10]))
                .frame(width: 150, height: 150, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                .foregroundColor(Color(.systemBlue))
                .scaleEffect(animateDashedBorder ? 1.2: 0)
                .rotationEffect(.degrees(animateSolidBorder ? 0 : -120))
                .hueRotation(Angle(degrees: animateSolidBorder ? 0 : 45))
                .opacity(animateDashedBorder ? 0.8 : 0)
                .animation(Animation.easeInOut(duration: 1).delay(0.19).speed(1))
                .onAppear(){
                    
                }
        }  // End of ZStack
        .onTapGesture(count: 1, perform: {
            animateThumb = true
            animateSolidBorder = true
            animateDashedBorder = true
            liked += 1
        })
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .preferredColorScheme(/*@START_MENU_TOKEN@*/.dark/*@END_MENU_TOKEN@*/)
    }
}