Question

我是SwiftUI中动画路径的新手。我试图在网上找到答案，但找不到任何解决方案。

这里有一个屏幕视频。我希望拥有流畅的动画背景。我希望你能帮助我。链接：https://youtu.be/OBePXXxboZ8

非常感谢您的帮助。

struct HomeView: View {
@State var index = true
@State var indexBattery = true
@State var batteryAnimationUp = 340
@State var batteryAnimationDown = 260
var body: some View {

    ZStack {
        Back(batteryAnimationUp: batteryAnimationUp, batteryAnimationDown: batteryAnimationDown)
        .offset(x: 0, y: 100)
            .onTapGesture {
                self.indexBattery.toggle()
                withAnimation(.linear(duration: 3)) {
                    if self.indexBattery{
                        self.batteryAnimationUp = 340
                        self.batteryAnimationDown = 260
                    } else {
                        self.batteryAnimationUp = 260
                        self.batteryAnimationDown = 340
                    }
                }
        }
        
        VStack {
            Image("Powered_logo")
                .resizable()
                .frame(width: 150, height: 150)
                
            HStack {
                if self.index {
                    LoginAllView(index: $index)
                        .transition(.moveAndFade)
                } else {
                    RegisterAllView(index: $index)
                        .transition(.moveAndFade)
                }
                
            }
        }
        
    }
}

}

struct Back: View {
var batteryAnimationUp: Int
var batteryAnimationDown: Int
public var animatableData: AnimatablePair<Double, Double>{
    get{ AnimatablePair(Double(batteryAnimationUp), Double(batteryAnimationDown))}
    set{
        self.batteryAnimationUp = Int(newValue.first)
        self.batteryAnimationDown = Int(newValue.second)
    }
}
var body: some View{
    ZStack {
        Path { path in
            path.move(to: CGPoint(x: 0, y: 300))
            path.addQuadCurve(to: CGPoint(x: 100, y: 300), control: CGPoint(x: 50, y: batteryAnimationUp))
            path.addQuadCurve(to: CGPoint(x: 200, y: 300), control: CGPoint(x: 150, y: batteryAnimationDown))
            path.addQuadCurve(to: CGPoint(x: 300, y: 300), control: CGPoint(x: 250, y: batteryAnimationUp))
            path.addQuadCurve(to: CGPoint(x: 400, y: 300), control: CGPoint(x: 350, y: batteryAnimationDown))

            path.addLine(to: CGPoint(x: 400, y: 1000))
            path.addLine(to: CGPoint(x: 0, y: 1000))
            path.closeSubpath()
        }
        .fill(Color("Green2"))
        Path { path in
            path.move(to: CGPoint(x: 0, y: 300))
            path.addQuadCurve(to: CGPoint(x: 100, y: 300), control: CGPoint(x: 50, y: batteryAnimationUp))
            path.addQuadCurve(to: CGPoint(x: 200, y: 300), control: CGPoint(x: 150, y: batteryAnimationDown))
            path.addQuadCurve(to: CGPoint(x: 300, y: 300), control: CGPoint(x: 250, y: batteryAnimationUp))
            path.addQuadCurve(to: CGPoint(x: 400, y: 300), control: CGPoint(x: 350, y: batteryAnimationDown))
            path.addQuadCurve(to: CGPoint(x: 500, y: 300), control: CGPoint(x: 450, y: batteryAnimationUp))

            path.addLine(to: CGPoint(x: 400, y: 1000))
            path.addLine(to: CGPoint(x: 0, y: 1000))
            path.closeSubpath()
        }
        .fill(Color("Color"))
        .offset(x: -50, y: 0)
    }

}

}

Answer 1

我能够使用@State变量和更改X偏移的动画切换来获得平滑的动画。使用具有延迟3的线性动画平滑地对其进行动画处理，并创建所需的动画效果。我还使用了.onAppear来立即启动动画，但这可以更改。它也会永远重复一次，但是您可以更改重复的频率或是否希望在完成时反转。偏移量在0到-200之间变化，这是波浪的周期。

此处https://youtu.be/e5xY14lj3yc

的视频链接

struct HomeView: View {
  @State var index = true
  @State var indexBattery = true
  @State var batteryAnimation = false
  @State var batteryAnimationUp = 340
  @State var batteryAnimationDown = 260
  var body: some View {

    ZStack {
      Back(batteryAnimationUp: batteryAnimationUp, batteryAnimationDown: batteryAnimationDown, batteryAnimation: self.$batteryAnimation)
        .offset(x: 0, y: 100)
        .onAppear {
          self.batteryAnimation = true
        }
        
    }
  }
}

struct Back: View {
  var batteryAnimationUp: Int
  var batteryAnimationDown: Int
  @Binding var batteryAnimation: Bool
  public var animatableData: AnimatablePair<Double, Double>{
    get{ AnimatablePair(Double(batteryAnimationUp), Double(batteryAnimationDown))}
    set{
        self.batteryAnimationUp = Int(newValue.first)
        self.batteryAnimationDown = Int(newValue.second)
    }
  }
  var body: some View{
    ZStack {
        Path { path in
            path.move(to: CGPoint(x: 0, y: 300))
            path.addQuadCurve(to: CGPoint(x: 100, y: 300), control: CGPoint(x: 50, y: batteryAnimationUp))
            path.addQuadCurve(to: CGPoint(x: 200, y: 300), control: CGPoint(x: 150, y: batteryAnimationDown))
            path.addQuadCurve(to: CGPoint(x: 300, y: 300), control: CGPoint(x: 250, y: batteryAnimationUp))
            path.addQuadCurve(to: CGPoint(x: 400, y: 300), control: CGPoint(x: 350, y: batteryAnimationDown))
            path.addQuadCurve(to: CGPoint(x: 500, y: 300), control: CGPoint(x: 450, y: batteryAnimationUp))
            path.addQuadCurve(to: CGPoint(x: 600, y: 300), control: CGPoint(x: 550, y: batteryAnimationDown))
            path.addQuadCurve(to: CGPoint(x: 700, y: 300), control: CGPoint(x: 650, y: batteryAnimationUp))
            path.addQuadCurve(to: CGPoint(x: 800, y: 300), control: CGPoint(x: 750, y: batteryAnimationDown))

            path.addLine(to: CGPoint(x: 400, y: 1000))
            path.addLine(to: CGPoint(x: 0, y: 1000))
            path.closeSubpath()
        }
        .fill(Color.green)
        .offset(x: self.batteryAnimation ? -300 : -100, y: 0)
        .animation(
          Animation.linear(duration: 3)
            .repeatForever(autoreverses: false)
        )
      
        Path { path in
            path.move(to: CGPoint(x: 0, y: 300))
            path.addQuadCurve(to: CGPoint(x: 100, y: 300), control: CGPoint(x: 50, y: batteryAnimationUp))
            path.addQuadCurve(to: CGPoint(x: 200, y: 300), control: CGPoint(x: 150, y: batteryAnimationDown))
            path.addQuadCurve(to: CGPoint(x: 300, y: 300), control: CGPoint(x: 250, y: batteryAnimationUp))
            path.addQuadCurve(to: CGPoint(x: 400, y: 300), control: CGPoint(x: 350, y: batteryAnimationDown))
            path.addQuadCurve(to: CGPoint(x: 500, y: 300), control: CGPoint(x: 450, y: batteryAnimationUp))
            path.addQuadCurve(to: CGPoint(x: 600, y: 300), control: CGPoint(x: 550, y: batteryAnimationDown))
            path.addQuadCurve(to: CGPoint(x: 700, y: 300), control: CGPoint(x: 650, y: batteryAnimationUp))

            path.addLine(to: CGPoint(x: 400, y: 1000))
            path.addLine(to: CGPoint(x: 0, y: 1000))
            path.closeSubpath()
        }
        
        .fill(Color.blue)
        .offset(x: self.batteryAnimation ? 0 : -200, y: 0)
        .animation(
          Animation.linear(duration: 3)
            .repeatForever(autoreverses: false)
        )
    }

  }
}

SwiftUI中创建的路径不设置动画

1 个答案: