AmplitudeView animation warnings and previews (#64)

AudioKit · Oct 6, 2022 · eca75fd · eca75fd
1 parent ea3b8d8
commit eca75fd
Showing 1 changed file with 37 additions and 19 deletions.
diff --git a/Sources/AudioKitUI/Visualizations/AmplitudeView.swift b/Sources/AudioKitUI/Visualizations/AmplitudeView.swift
@@ -7,10 +7,13 @@ class AmplitudeModel: ObservableObject {
     @Published var amplitude: Double = 0.0
     var nodeTap: AmplitudeTap!
     var node: Node?
-    var stereoMode: StereoMode
+    var stereoMode: StereoMode = .center
+    @Environment(\.isPreview) var isPreview
 
-    init(stereoMode: StereoMode = .center) {
-        self.stereoMode = stereoMode
+    init() {
+        if isPreview {
+            mockAmplitudeChange()
+        }
     }
 
     func updateNode(_ node: Node) {
@@ -28,34 +31,42 @@ class AmplitudeModel: ObservableObject {
     func pushData(_ amp: Float) {
         amplitude = Double(amp)
     }
+
+    func mockAmplitudeChange() {
+        amplitude = Double.random(in: 0...1.0)
+        let waitTime: TimeInterval = 0.1
+        DispatchQueue.main.asyncAfter(deadline: .now() + waitTime) {
+            self.mockAmplitudeChange()
+        }
+    }
 }
 
 public struct AmplitudeView: View {
     @StateObject var amplitudeModel = AmplitudeModel()
-    var node: Node
-    @State var stereoMode: StereoMode = .center
-    @State var numberOfSegments: Int
-
-    @State var fillType: FillType = .gradient(gradient: Gradient(colors: [.red, .yellow, .green]))
+    let node: Node
+    let stereoMode: StereoMode
+    let numberOfSegments: Int
+    let fillType: FillType
 
     init(_ node: Node, stereoMode: StereoMode = .center, numberOfSegments: Int = 20) {
         self.node = node
-        _stereoMode = State(initialValue: stereoMode)
-        _numberOfSegments = State(initialValue: numberOfSegments)
+        self.stereoMode = stereoMode
+        self.fillType = .gradient(gradient: Gradient(colors: [.red, .yellow, .green]))
+        self.numberOfSegments = numberOfSegments
     }
 
     init(_ node: Node, color: Color, stereoMode: StereoMode = .center, numberOfSegments: Int = 20) {
         self.node = node
-        _stereoMode = State(initialValue: stereoMode)
-        _fillType = State(initialValue: .solid(color: color))
-        _numberOfSegments = State(initialValue: numberOfSegments)
+        self.stereoMode = stereoMode
+        self.fillType = .solid(color: color)
+        self.numberOfSegments = numberOfSegments
     }
 
     init(_ node: Node, colors: Gradient, stereoMode: StereoMode = .center, numberOfSegments: Int = 20) {
         self.node = node
-        _stereoMode = State(initialValue: stereoMode)
-        _fillType = State(initialValue: .gradient(gradient: colors))
-        _numberOfSegments = State(initialValue: numberOfSegments)
+        self.stereoMode = stereoMode
+        self.fillType = .gradient(gradient: colors)
+        self.numberOfSegments = numberOfSegments
     }
 
     public var body: some View {
@@ -83,7 +94,7 @@ public struct AmplitudeView: View {
                     Rectangle()
                         .fill(Color.black)
                         .mask(Rectangle().padding(.bottom, geometry.size.height * CGFloat(amplitudeModel.amplitude)))
-                        .animation(.linear(duration: 0.05))
+                        .animation(.linear(duration: 0.05), value: amplitudeModel.amplitude)
                 }
             }
             .onAppear {
@@ -108,6 +119,7 @@ public struct AmplitudeView: View {
                         .frame(height: spaceHeight)
                 }
                 addOpacityRectangle(height: solidHeight, index: index, n: numberOfBlackSegments)
+                    .animation(.linear(duration: 0.05), value: amplitudeModel.amplitude)
             }
         }
     }
@@ -120,13 +132,19 @@ public struct AmplitudeView: View {
             .fill(Color.black)
             .frame(height: height)
             .opacity(opacity)
-            .animation(.linear(duration: 0.05))
+            .animation(.linear(duration: 0.05), value: amplitudeModel.amplitude)
     }
 }
 
 struct AmplitudeView_Previews: PreviewProvider {
     static var previews: some View {
-        AmplitudeView(Mixer())
+        AmplitudeView(Mixer(), numberOfSegments: 1)
+            .previewLayout(.fixed(width: 40, height: 500))
+
+        AmplitudeView(Mixer(), numberOfSegments: 20)
+            .previewLayout(.fixed(width: 40, height: 500))
+
+        AmplitudeView(Mixer(), color: .blue, numberOfSegments: 20)
             .previewLayout(.fixed(width: 40, height: 500))
     }
 }