Improve Spring Animation example

* Continuously animate between two states (left and right) using layout constraints to avoid the jumpiness of resetting the position
* Removing terms bounciness and speed (these are confusing because their ranges are opposite: low damping = high bounciness, short response = high speed)
* Make value labels more clear by adding units (50% damping, 1s response instead of 0.5 and 1.0)

Author: ralfebert

FluidInterfaces/FluidInterfaces/Spring.swift

@@ -20,10 +20,10 @@ class SpringInterfaceViewController: InterfaceViewController {
 
     private lazy var dampingSliderView: SliderView = {
         let sliderView = SliderView()
+        sliderView.valueFormatter = { String(format: "%i%%", Int($0 * 100)) }
         sliderView.translatesAutoresizingMaskIntoConstraints = false
-        sliderView.title = "DAMPING (BOUNCINESS)"
-        sliderView.minValue = 0.1
-        sliderView.maxValue = 1
+        sliderView.title = "DAMPING"
+        sliderView.range = 0.1...1
         sliderView.value = dampingRatio
         sliderView.sliderMovedAction = { self.dampingRatio = $0 }
         sliderView.sliderFinishedMovingAction = { self.resetAnimation() }
@@ -32,10 +32,10 @@ class SpringInterfaceViewController: InterfaceViewController {
 
     private lazy var frequencySliderView: SliderView = {
         let sliderView = SliderView()
+        sliderView.valueFormatter = { String(format: "%.2fs", $0) }
         sliderView.translatesAutoresizingMaskIntoConstraints = false
-        sliderView.title = "RESPONSE (SPEED)"
-        sliderView.minValue = 0.1
-        sliderView.maxValue = 2
+        sliderView.title = "RESPONSE"
+        sliderView.range = 0.1...2
         sliderView.value = frequencyResponse
         sliderView.sliderMovedAction = { self.frequencyResponse = $0 }
         sliderView.sliderFinishedMovingAction = { self.resetAnimation() }
@@ -46,6 +46,8 @@ class SpringInterfaceViewController: InterfaceViewController {
     private var frequencyResponse: CGFloat = 1
 
     private let margin: CGFloat = 30
+
+    private var leadingAnchor, trailingAnchor : NSLayoutConstraint!
 
     override func viewDidLoad() {
         super.viewDidLoad()
@@ -63,7 +65,10 @@ class SpringInterfaceViewController: InterfaceViewController {
         view.addSubview(springView)
         springView.heightAnchor.constraint(equalToConstant: 80).isActive = true
         springView.widthAnchor.constraint(equalToConstant: 80).isActive = true
-        springView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: margin).isActive = true
+        self.leadingAnchor = springView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: margin)
+        self.leadingAnchor.isActive = true
+        self.trailingAnchor = springView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -margin)
+        self.trailingAnchor.isActive = false
         springView.bottomAnchor.constraint(equalTo: dampingSliderView.topAnchor, constant: -80).isActive = true
 
         animateView()
@@ -74,22 +79,21 @@ class SpringInterfaceViewController: InterfaceViewController {
 
     /// Repeatedly animates the view using the current `dampingRatio` and `frequencyResponse`.
     private func animateView() {
+        self.view.layoutIfNeeded()
+
         let timingParameters = UISpringTimingParameters(damping: dampingRatio, response: frequencyResponse)
         animator = UIViewPropertyAnimator(duration: 0, timingParameters: timingParameters)
         animator.addAnimations {
-            let translation = self.view.bounds.width - 2 * self.margin - 80
-            self.springView.transform = CGAffineTransform(translationX: translation, y: 0)
-        }
-        animator.addCompletion { _ in
-            self.springView.transform = .identity
-            self.animateView()
+            self.leadingAnchor.isActive = !self.leadingAnchor.isActive
+            self.trailingAnchor.isActive = !self.trailingAnchor.isActive
+            self.view.layoutIfNeeded()
         }
+        animator.addCompletion { _ in self.animateView() }
         animator.startAnimation()
     }
 
     private func resetAnimation() {
         animator.stopAnimation(true)
-        self.springView.transform = .identity
         animateView()
     }
 
@@ -110,22 +114,20 @@ class SliderView: UIView {
         }
         set {
             slider.value = Float(newValue)
-            valueLabel.text = String(format: "%.2f", newValue)
-        }
-    }
-    
-    public var minValue: CGFloat = 0 {
-        didSet {
-            slider.minimumValue = Float(minValue)
+            valueLabel.text = valueFormatter(newValue)
         }
     }
 
-    public var maxValue: CGFloat = 1 {
+    public var range: ClosedRange<Float> = 0...1 {
         didSet {
-            slider.maximumValue = Float(maxValue)
+            slider.minimumValue = range.lowerBound
+            slider.maximumValue = range.upperBound
         }
     }
 
+    /// Code to format the value to a string for the valueLabel
+    public var valueFormatter: (CGFloat) -> (String) = { String(format: "%.2f", $0) }
+
     /// Code that's executed when the slider moves.
     public var sliderMovedAction: (CGFloat) -> () = { _ in }
 
@@ -185,7 +187,7 @@ class SliderView: UIView {
     }
 
     @objc private func sliderMoved(slider: UISlider, event: UIEvent) {
-        valueLabel.text = String(format: "%.2f", slider.value)
+        valueLabel.text = valueFormatter(CGFloat(slider.value))
         sliderMovedAction(CGFloat(slider.value))
         if event.allTouches?.first?.phase == .ended { sliderFinishedMovingAction() }
     }