Swift 3 - Playground code

AnimatedBarGraphInStackView.swift

//: Playground - noun: a place where people can play

import UIKit
import PlaygroundSupport

class BarGraphView: UIView {
    
    lazy var greenBar: UIView = {
        let view = UIView(frame: .zero)
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = UIColor.green
        return view
    }()
    lazy var redBar: UIView = {
        let view = UIView(frame: .zero)
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = UIColor.red
        return view
    }()
    lazy var blueBar: UIView = {
        let view = UIView(frame: .zero)
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = UIColor.blue
        return view
    }()
    lazy var orangeBar: UIView = {
        let view = UIView(frame: .zero)
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = UIColor.orange
        return view
    }()
    lazy var actionButton: UIButton = {
        let button = UIButton(type: UIButtonType.system)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitle("Go", for: .normal)
        return button
    }()

    var greenBarConstraint: NSLayoutConstraint?
    var redBarConstraint: NSLayoutConstraint?
    var blueBarConstraint: NSLayoutConstraint?
    var orangeBarConstraint: NSLayoutConstraint?

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }
    
    private func commonInit() {
        
        backgroundColor = UIColor(red: 1.0, green: 0.9912, blue: 0.9546, alpha: 1.0)
        actionButton.addTarget(self, action: #selector(animate), for: .touchUpInside)
        let stackView = UIStackView(arrangedSubviews: [greenBar, redBar, blueBar, orangeBar])
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.axis = .horizontal
        stackView.alignment = .center
        stackView.distribution = .equalSpacing
        self.addSubview(stackView)
        self.addSubview(actionButton)

        let views = ["greenBar": greenBar, "redBar": redBar, "blueBar": blueBar, "orangeBar": orangeBar, "stackView": stackView, "actionButton": actionButton]
        let metrics = ["bottomPadding": 100, "barSpacing": 50, "barWidth": 65, "lrInset": 20]
        
        self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-lrInset-[stackView]-lrInset-|", options: [], metrics: metrics, views: views))
        self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[stackView]-bottomPadding-|", options: [], metrics: metrics, views: views))

        stackView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[greenBar]|", options: [], metrics: metrics, views: views))
        stackView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[redBar]|", options: [], metrics: metrics, views: views))
        stackView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[blueBar]|", options: [], metrics: metrics, views: views))
        stackView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[orangeBar]|", options: [], metrics: metrics, views: views))
        stackView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[greenBar(barWidth)]", options: [], metrics: metrics, views: views))
        stackView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[redBar(barWidth)]", options: [], metrics: metrics, views: views))
        stackView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[blueBar(barWidth)]", options: [], metrics: metrics, views: views))
        stackView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[orangeBar(barWidth)]", options: [], metrics: metrics, views: views))
        self.greenBarConstraint = NSLayoutConstraint(item: greenBar, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 2)
        stackView.addConstraint(self.greenBarConstraint!)
        self.redBarConstraint = NSLayoutConstraint(item: redBar, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 2)
        stackView.addConstraint(self.redBarConstraint!)
        self.blueBarConstraint = NSLayoutConstraint(item: blueBar, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 2)
        stackView.addConstraint(self.blueBarConstraint!)
        self.orangeBarConstraint = NSLayoutConstraint(item: orangeBar, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 2)

        stackView.addConstraint(self.orangeBarConstraint!)

        self.addConstraint(NSLayoutConstraint(item: actionButton, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 1.0, constant: 0))
        self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[stackView][actionButton(50)]", options: [], metrics: nil, views: views))

        self.updateConstraintsIfNeeded()
    }
    
    func animate(button: UIButton) {
        if button.titleLabel?.text == "Reset" {
            UIView.animate(withDuration: 1.0, delay: 0.0, options: [.curveEaseInOut], animations: {
                self.greenBarConstraint?.constant = 2
                self.redBarConstraint?.constant = 2
                self.blueBarConstraint?.constant = 2
                self.orangeBarConstraint?.constant = 2
                
                self.updateConstraintsIfNeeded()
                }, completion: { done in
                    self.actionButton.setTitle("Go", for: .normal)

            })
        }
        else {
            UIView.animate(withDuration: 1.0, delay: 0.0, usingSpringWithDamping: 0.25, initialSpringVelocity: 5.0, options: [.curveEaseInOut], animations: {
                self.greenBarConstraint?.constant = self.frame.height * 0.53
                self.redBarConstraint?.constant = self.frame.height * 0.75
                self.blueBarConstraint?.constant = self.frame.height * 0.14
                self.orangeBarConstraint?.constant = self.frame.height * 0.27

                self.updateConstraintsIfNeeded()
                }, completion: { done in
                    self.actionButton.setTitle("Reset", for: .normal)
                    })
        }
    }
}

let barGraphView = BarGraphView(frame: CGRect(x: 20, y: 50, width: 375, height: 700))

PlaygroundPage.current.liveView = barGraphView
PlaygroundPage.current.needsIndefiniteExecution