如何在swiftUI中创建循环心跳动画?

如何在swiftUI中创建循环心跳动画?,swiftui,Swiftui,我正在尝试创建一个小心脏图标正在跳动的动画。我有两个我认为足以创造效果的图像,但我不知道如何创造这个动画效果。我试过几种方法,但似乎都不管用 如果您能提供任何帮助,我们将不胜感激 以下是我目前掌握的情况: @State var show : Bool = false var body: some View { VStack(alignment: .trailing){ ZStack{ BlackView()

我正在尝试创建一个小心脏图标正在跳动的动画。我有两个我认为足以创造效果的图像,但我不知道如何创造这个动画效果。我试过几种方法,但似乎都不管用

如果您能提供任何帮助,我们将不胜感激

以下是我目前掌握的情况:

@State var show : Bool = false
    var body: some View {
        VStack(alignment: .trailing){
            ZStack{
                BlackView()
                if(show){
                    Image("heartOrgan1")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 50, height:50)
                        .hidden()
                        
                    Image("heartOrgan")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 50, height: 50)
                    
                } else {
                    Image("heartOrgan1")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 50, height: 50)
                        
                    Image("heartOrgan")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 50, height: 50)
                        .hidden()
                }
            }
            .onAppear(){
                
                withAnimation { self.show.toggle()}
            }
        }
    }

一般的想法是在代表心脏跳动的两个心脏图像之间循环切换。我对使用这些特定的心脏图像很感兴趣,因为它们看起来像真实的心脏,我很喜欢。

你可以使用大量的动态心跳动画

以下是免费提供的所有心跳动画:

其中有很多,包括:


您不一定需要两张图像。可以使用一个图像并对其应用缩放效果。将一个图像放大并添加延迟。然后重复一遍

示例:

@State private var animationAmount: CGFloat = 1

var body: some View {
    ZStack {
        Color.black
        
        Image(systemName: "heart.fill")
            .resizable()
            .frame(width: 50, height: 50, alignment: .center)
            .foregroundColor(.red)
            .scaleEffect(animationAmount)
            .animation(.linear(duration: 0.1).delay(0.4).repeatForever(autoreverses: true))
            .onAppear {
                animationAmount = 1.2
            }
    }
}

下一步应该会有帮助。这能回答你的问题吗?很接近。但我的图像不仅仅是彼此的放大版本。心脏图像更为详细,更接近真实的心脏。现在有两种可能的解决方案,你至少可以尝试一下。请出示您的代码,我们将尽力帮助您修复。@pawello2222请看一看。我刚刚更新了我的问题。此外,我添加了我的尝试,但没有任何效果。我的目标是循环这两个特定图像的动画,以模拟循环中的心脏跳动。我希望做的是从头开始创建动画,因为我希望这些图像与我的应用程序的UI主题相匹配。