This is regarding the post: Creating a WaveView to draw smooth waveforms

https://www.hackingwithswift.com/plus/custom-swiftui-components/creating-a-waveview-to-draw-smooth-waveforms

I want to animate the stength property of the wave as well as the phase animation (given in the article). I added the property to animatableData:

 var animatableData: AnimatablePair<Double, Double> {
        get {
            AnimatablePair(strength, phase)
        }
        set {
            strength = newValue.first
            phase = newValue.second
        }
}

While the change gets made and animates, it is no longer a smooth sine wave like before. Instead the phase seems out of sync with the strength, and looks all wrong. But I can't quite figure out why. Something to do with the phase animation being repeating in onAppear, while changing the strength explicily via an action.

Any help would be appreciated.

Animation Coordination: Make sure that both the strength and phase animations are driven by the same Animation modifier or the same animation transaction. If you are using explicit animations, both properties should be animated together in the same block.

Check Timing Parameters: If you are using explicit animations (e.g., withAnimation), verify that the animation duration, curve, and other timing parameters are consistent for both strength and phase animations.

Phase Animation Loop: Since you mentioned that the phase animation is set to repeat in onAppear, ensure that the phase animation doesn't interfere with the animation on the strength property. If the phase animation restarts during the strength animation, it can cause the wave to look out of sync.

Resetting Animations: If you're retriggering the animations multiple times, be cautious about resetting the strength and phase properties correctly. Animations should start from their current values, not from initial values, to avoid abrupt changes.

Animation Priority: If the strength and phase animations have different priorities or animation contexts, it might lead to discrepancies in the animation.

Testing with Fixed Values: To debug and identify the issue more easily, try animating the strength and phase properties with fixed values first (i.e., remove user interactions or dynamic changes) and observe if the wave animation behaves as expected.