SwiftUI: How to make filling wave animation

Xcode 12.4— iOS 14

1. Creating a wave
2. Embedding wave view to container image of shape to give fill animation
3. Animating the wave

Creating a wave:

We are going to create a wave struct inherited from Shape. it will have percentage as a state to define how much container is filled. and the angle which we will use to make wave animation.

struct Wave: Shape {
  var offset: Angle
  var percent: Double
}

We also need to define AnimatableData type so that shape knows what type of data going to animate.

var animatableData: Double {
    get { offset.degrees }
    set { offset = Angle(degrees: newValue) }
}

Now, we draw path using sin() method from -1 to 1 with centre align horizontally. Align Vertically to the fill percentage.

Embedding wave view to container image of shape to give fill animation