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,9 @@ class SpringInterfaceViewController: InterfaceViewController {
 
     private lazy var dampingSliderView: SliderView = {
         let sliderView = SliderView()
-        sliderView.translatesAutoresizingMaskIntoConstraints = false
-        sliderView.title = "DAMPING (BOUNCINESS)"
-        sliderView.minValue = 0.1
-        sliderView.maxValue = 1
+        sliderView.valueFormatter = { String(format: "%i%%", Int($0 * 100)) }
+        sliderView.title = "DAMPING"
+        sliderView.range = 0.1...1
         sliderView.value = dampingRatio
         sliderView.sliderMovedAction = { self.dampingRatio = $0 }
         sliderView.sliderFinishedMovingAction = { self.resetAnimation() }
@@ -32,10 +31,9 @@ class SpringInterfaceViewController: InterfaceViewController {
 
     private lazy var frequencySliderView: SliderView = {
         let sliderView = SliderView()
-        sliderView.translatesAutoresizingMaskIntoConstraints = false
-        sliderView.title = "RESPONSE (SPEED)"
-        sliderView.minValue = 0.1
-        sliderView.maxValue = 2
+        sliderView.valueFormatter = { String(format: "%.2fs", $0) }
+        sliderView.title = "RESPONSE"
+        sliderView.range = 0.1...2
         sliderView.value = frequencyResponse
         sliderView.sliderMovedAction = { self.frequencyResponse = $0 }
         sliderView.sliderFinishedMovingAction = { self.resetAnimation() }
@@ -46,26 +44,37 @@ class SpringInterfaceViewController: InterfaceViewController {
     private var frequencyResponse: CGFloat = 1
 
     private let margin: CGFloat = 30
+
+    private var leadingAnchor, trailingAnchor : NSLayoutConstraint!
 
     override func viewDidLoad() {
         super.viewDidLoad()
 
         view.addSubview(dampingSliderView)
-        dampingSliderView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: margin).isActive = true
-        dampingSliderView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -margin).isActive = true
-        dampingSliderView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0).isActive = true
+        UIView.activate(constraints: [
+            dampingSliderView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: margin),
+            dampingSliderView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -margin),
+            dampingSliderView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0)
+        ])
 
         view.addSubview(frequencySliderView)
-        frequencySliderView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: margin).isActive = true
-        frequencySliderView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -margin).isActive = true
-        frequencySliderView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 140).isActive = true
+        UIView.activate(constraints: [
+            frequencySliderView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: margin),
+            frequencySliderView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -margin),
+            frequencySliderView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 140)
+        ])
 
         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
-        springView.bottomAnchor.constraint(equalTo: dampingSliderView.topAnchor, constant: -80).isActive = true
-        
+        UIView.activate(constraints: [
+            springView.heightAnchor.constraint(equalToConstant: 80),
+            springView.widthAnchor.constraint(equalToConstant: 80),
+            springView.bottomAnchor.constraint(equalTo: dampingSliderView.topAnchor, constant: -80)
+        ])
+        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
+
         animateView()
 
     }
@@ -74,22 +83,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 +118,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 }
 
@@ -169,23 +175,29 @@ class SliderView: UIView {
     private func sharedInit() {
 
         addSubview(titleLabel)
-        titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
-        titleLabel.topAnchor.constraint(equalTo: topAnchor).isActive = true
+        UIView.activate(constraints: [
+            titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor),
+            titleLabel.topAnchor.constraint(equalTo: topAnchor)
+        ])
 
         addSubview(valueLabel)
-        valueLabel.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
-        valueLabel.lastBaselineAnchor.constraint(equalTo: titleLabel.lastBaselineAnchor).isActive = true
-        
+        UIView.activate(constraints: [
+            valueLabel.trailingAnchor.constraint(equalTo: trailingAnchor),
+            valueLabel.lastBaselineAnchor.constraint(equalTo: titleLabel.lastBaselineAnchor)
+        ])
+
         addSubview(slider)
-        slider.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
-        slider.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
-        slider.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
-        slider.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 20).isActive = true
-        
+        UIView.activate(constraints: [
+            slider.leadingAnchor.constraint(equalTo: leadingAnchor),
+            slider.trailingAnchor.constraint(equalTo: trailingAnchor),
+            slider.bottomAnchor.constraint(equalTo: bottomAnchor),
+            slider.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 20)
+        ])
+
     }
 
     @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() }
     }