首页 > 解决方案 > 多个动画在 SwiftUI 中无法按预期工作

问题描述

我想用永远重复的动画创建一个脉动的圆圈。当动画方向改变时,它应该有大小的渐变和颜色的瞬间变化。我有两个不同的动画,但只有最后一个对两者都有影响(大小和颜色变化)。

struct SwiftUIView: View {
    @State private var animationStarted = false
    
    let side = UIScreen.main.bounds.size.width
    
    let animation1 = Animation.easeInOut(duration: 0.3).delay(5.7)
    .repeatForever(autoreverses: true)

    let animation2 = Animation.easeInOut(duration: 6)
        .repeatForever(autoreverses: true)

    var body: some View {
        HStack {
            VStack {
                HStack {
                    Circle()
                        .foregroundColor(self.animationStarted ? Color.pink : Color.blue)
                        .animation(animation1)
                        .frame(width: self.animationStarted ? 10 : side, height: self.animationStarted ? 10 : side)
                        .animation(animation2)
                        .onAppear {
                            self.animationStarted.toggle()
                    }
                }
            }.frame(height: side)
        }.frame(width: side)
    }
}

标签: iosswiftswiftuiios-animationsswiftui-animation

解决方案


推荐阅读