IMAGE IMAGE

twitter like anim

@tweet

hieu dinh did an excellent job in re-creating this lovely twitter "like" animation.

it uses several overlapping objects, delays and i would imagine took some time to get juuust right πŸ‘Œ
thanks to his great effort you can now pick up he animation and use in your app right away.

since this site has a very specific look i opted not to use gifs, however, to preview the animation before pasting the code, check it out here -> LINK

preview animation:
https://github.com/roblack/swiftUIViews/blob/main/imgs/twitterLike_example.gif

// MARK: IMPORTANT🚨
/* For easy of copy/pastability, all code is in one bug chunk.
Be a dear and refactor this out any way you see fit 🀘 */

/* Idealy, you would NOT be using pre-defined constants or first view at all, only the code below the refactor line.
I am leaving the initial view here just for easier usage example or possible extraction. Hope that works πŸ‘Œ */

import SwiftUI

/* Defining all constants used in the view.*/
fileprivate var defaultRadius: CGFloat = 18

fileprivate let fadedBackgroundColor = Color(.displayP3, red: 0.694, green: 0.737, blue: 0.815, opacity: 1.0)

struct TwitterLike: View {

@State var scale: CGFloat = 0
@State var textOpacity: Double = 1
@State var offset: CGFloat = 0
@State var isLiked = false

var body: some View {
ZStack {
Image(systemName: "plus")
.resizable()
.frame(width: 12, height: 12, alignment: .center)
.font(.system(size: 16, weight: .bold, design: .rounded))
.foregroundColor(.red)
.offset(x: 0, y: offset)
.opacity(textOpacity)
.padding(.bottom, 0)
.padding(.trailing, 20)
.animation(.easeInOut(duration: 1).delay(0.5))
Image(systemName: "plus")
.resizable()
.frame(width: 12, height: 12, alignment: .center)
.font(.system(size: 16, weight: .bold, design: .rounded))
.foregroundColor(.red)
.offset(x: 0, y: offset)
.opacity(textOpacity)
.padding(.bottom, 20)
.animation(.easeInOut(duration: 1).delay(0.8))
Image(systemName: "plus")
.resizable()
.frame(width: 12, height: 12, alignment: .center)
.font(.system(size: 16, weight: .bold, design: .rounded))
.foregroundColor(.red)
.offset(x: 0, y: offset)
.opacity(textOpacity)
.padding(.bottom, 00)
.padding(.trailing, -20)
.animation(.easeInOut(duration: 1).delay(1))
Circle()
.frame(width: 36, height: 36, alignment: .center)
.foregroundColor(Color.white)
Circle()
.frame(width: 35, height: 35, alignment: .center)
.foregroundColor(Color.red)
.scaleEffect(scale)
.animation(.spring())
Circle()
.frame(width: 36, height: 36, alignment: .center)
.foregroundColor(Color.white)
.scaleEffect(scale)
.animation(.spring().delay(0.3))
if !isLiked {
Image(systemName: "heart")
.resizable()
.frame(width: 30, height: 30, alignment: .center)
.foregroundColor(fadedBackgroundColor)
}
Image(systemName: "heart.fill")
.resizable()
.frame(width: 30, height: 30, alignment: .center)
.foregroundColor(.red)
.scaleEffect(scale)
.animation(.interpolatingSpring(
mass: 1,
stiffness: 100,
damping: 10,
initialVelocity: 2).delay(0.5))
Text("+1")
.foregroundColor(.white)
.font(.system(size: 16, weight: .bold, design: .rounded))
.scaleEffect(scale)
.animation(.interpolatingSpring(
mass: 1,
stiffness: 100,
damping: 10,
initialVelocity: 2).delay(0.5))
.opacity(textOpacity)
.animation(.easeInOut(duration: 0.5).delay(1.5))
}
.onTapGesture {
scale = isLiked ? 0 : 1
textOpacity = isLiked ? 1 : 0
offset = isLiked ? 0 : -30
isLiked.toggle()
}
}
}

/*
Awesome Sauce!
Thank you for getting one of my views, hope you are happy with it πŸ‘Œ
Consider helping this train rollin πŸš‚ on my Patreon -> https://www.patreon.com/swiftui

If you have any suggestions for improvements,
feel free to reach me at undead.pix3l@gmail.com
*/