Clash Royale CLAN TAG#URR8PPP

How to achieve an angular butterbar effect in swift?

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?


2 Answers
2

Here's a solution for you. Basically, there's a ButterBar UIView subclass, that has an inner view subview, and an array of colours.

ButterBar

UIView

ButterBar

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()



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.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.