How to achieve an angular butterbar effect in swift? - ios

Question

We are looking to achieve something like a "butterbar", which is basically a UIView that changes color from the middle outwards to the edges. An example is this codepen .
How to do this in swift?

Answer 1

Here's a solution for you. Basically, there's a ButterBar UIView subclass, that has an inner view subview, and an array of colours.
Set the background to colour[0]
Set the inner background to colour[1]
Set the inner width to 0
Animate the inner width to the ButterBar width
Set the background colour to the inner background colour
Set the inner background to the next colour
Repeat
Code…
class ButterBar: UIView {
private let innerView = UIView(frame: .zero)
private var colours: [UIColor] = [.black, .white]
private var colourIndex = 0
private var isAnimating = false
private lazy var widthConstraint: NSLayoutConstraint = {
return innerView.widthAnchor.constraint(equalToConstant: 0)
}()
override init(frame: CGRect) {
super.init(frame: frame)
configure()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
configure()
}
func configure(colours: [UIColor]) {
guard colours.count > 1 else { return }
self.colours = colours
}
func startAnimating() {
colourIndex = 0
isAnimating = true
updateColours()
animate()
}
func stopAnimating() {
isAnimating = false
}
}
private extension ButterBar {
func configure() {
innerView.translatesAutoresizingMaskIntoConstraints = false
addSubview(innerView)
topAnchor.constraint(equalTo: innerView.topAnchor).isActive = true
bottomAnchor.constraint(equalTo: innerView.bottomAnchor).isActive = true
centerXAnchor.constraint(equalTo: innerView.centerXAnchor).isActive = true
widthConstraint.isActive = true
}
func updateColours() {
backgroundColor = colours[colourIndex]
colourIndex = (colourIndex + 1) % colours.count
innerView.backgroundColor = colours[colourIndex]
}
func animate() {
widthConstraint.constant = 0
layoutIfNeeded()
widthConstraint.constant = bounds.width
UIView.animate(withDuration: 1, animations: {
self.layoutIfNeeded()
}) { _ in
if self.isAnimating {
self.updateColours()
self.animate()
}
}
}
}
And…
#IBOutlet weak var butterBar: ButterBar!
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
butterBar.configure(colours: [.red, .blue, .green, .yellow])
butterBar.startAnimating()
}

Answer 2

You could use two UIViews that are constrained to the center of the parent and possess width constraints. Simply set the background color of the first view and animate its width constraint from 0 to the width of the parent. Once this is done, you can bring the other view to front and animate its width from 0 to the width of the parent, then restart with the initial view to keep the cycle going.