Question 308162 in IOS Swift Question posted in
The official documentation can be found here.

Ios swift – How to do heartbeat pulse animation?

I want to make this animation but it’s not working.
How can I do this animation?

When I use this in a new project it’s working but in this project it is not working.

struct SULoveCompatibilityLoadingView: View {
    var body: some View {
        ZStack{
            Color(ThemeManager.pageBackgroundColor()).ignoresSafeArea()
            VStack{
                Spacer()
                HStack(alignment: .center, spacing: 0){
                    VStack{
                        Image(signIcon)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 110, height: 110)
                        Spacer().frame(height: 15)
                        Text(userName)
                            .font(Font.custom("SanFranciscoText-Bold", size: 18))
                        Spacer().frame(height: 3)
                        Text(signName)
                            .font(Font.custom("SanFranciscoText-Regular", size: 14))
                    }
                    Spacer()
                    VStack{
                        Image(systemName: "heart.fill")
                            .foregroundColor(.red)
                            .scaleEffect(isAnimating ? 1.3 : 1.0)
                            .onAppear {
                                withAnimation(.easeInOut(duration: 0.4).repeatForever(autoreverses: true)) {
                                    self.isAnimating.toggle()
                                }
                            }
                            .font(.system(size: 50))
                    }
                    .padding()
                    Spacer()
                    VStack{
                        Image("Onur")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 110, height: 110)

                        Spacer().frame(height: 15)
                        Text(friendName)
                            .font(Font.custom("SanFranciscoText-Bold", size: 18))
                        Spacer().frame(height: 3)
                        Text("Onur")
                            .font(Font.custom("SanFranciscoText-Regular", size: 14))
                    }
                }
                .frame(height: 200)
                Spacer()
            }
        }
    }
}

This is what I am wanting:

enter image description here

And this is what happened:

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It works when I create a new project, but it doesn't work in SwiftUI that I added to the UIKit project.


  2. 0

    I added a @State property named isAnimating to control the heart animation separately. The withAnimation block now only applies to the heart image, preventing the entire VStack from shaking. Adjust the animation parameters as needed.

    struct SULoveCompatibilityLoadingView: View {
    @State private var isAnimating = false
    
    var body: some View {
        ZStack {
            Color(ThemeManager.pageBackgroundColor()).ignoresSafeArea()
            VStack {
                Spacer()
                HStack(alignment: .center, spacing: 0) {
                    VStack {
                        Image(signIcon)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 110, height: 110)
                        Spacer().frame(height: 15)
                        Text(userName)
                            .font(Font.custom("SanFranciscoText-Bold", size: 18))
                        Spacer().frame(height: 3)
                        Text(signName)
                            .font(Font.custom("SanFranciscoText-Regular", size: 14))
                    }
                    Spacer()
                    VStack {
                        Image(systemName: "heart.fill")
                            .foregroundColor(.red)
                            .scaleEffect(isAnimating ? 1.3 : 1.0)
                            .onAppear {
                                withAnimation(Animation.easeInOut(duration: 0.4).repeatForever(autoreverses: true)) {
                                    self.isAnimating.toggle()
                                }
                            }
                            .font(.system(size: 50))
                            .padding()
                    }
                    .padding()
                    Spacer()
                    VStack {
                        Image("Onur")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 110, height: 110)
                        Spacer().frame(height: 15)
                        Text(friendName)
                            .font(Font.custom("SanFranciscoText-Bold", size: 18))
                        Spacer().frame(height: 3)
                        Text("Onur")
                            .font(Font.custom("SanFranciscoText-Regular", size: 14))
                    }
                }
                .frame(height: 200)
                Spacer()
            }
        }
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search