Create background color change animation - swift

Question

I am trying to create an animation where I change the color of a rectangle from orange to blue. Here is where I created the rectangle and set its background color to orange:
let colorView = UIView(frame: CGRect(x: 250, y: 500, width: 75, height: 75))
colorView.backgroundColor = UIColor.orange
and here is where I add the animation with the function definition of the animation below it
let colorChangeAnimation = constructColorChangeAnimation()
colorView.layer.add(colorChangeAnimation, forKey: "color")
private func constructColorChangeAnimation() -> CABasicAnimation {
let ColorChangeAnimation = CABasicAnimation(keyPath: "backgroundColor")
ColorChangeAnimation.fromValue = UIColor.orange
ColorChangeAnimation.toValue = UIColor.blue
return ColorChangeAnimation
}
This implementation doesn't seem to work and I'm not sure what it is I need to change. The documentation says that the fromValue and toValue should be the way to change the animation but it just doesn't seem to want to work. (also fyi I did originally have a duration variable for the animation function but it also wasn't working then)

Answer 1

you should use UIColor.orange.cgColor
animation.fromValue = UIColor.orange.cgColor
animation.duration = 3
and UIView animation is much easier
colorView.backgroundColor = UIColor.orange
UIView.animate(withDuration: 3) {
self.aview.backgroundColor = UIColor.blue
}

Answer 2

Try this one;
let colourAnim = CABasicAnimation(keyPath: "backgroundColor")
colourAnim.fromValue = self.colorView.backgroundColor
colourAnim.toValue = UIColor.blue.cgColor
colourAnim.duration = 1.0
self.colorView.addAnimation(colourAnim, forKey: "colourAnimation")
self.colorView.backgroundColor = UIColor.blue.cgColor
You should set the background color of the view after the animation and use o .cgColor

Answer 3

Use UIView.animate like this:
Under your class controller declare view and button (in my example I add corner radius for more cute result)
let chamgeButton = UIButton(type: .system)
let orangeView = UIView()
in viewDidLoad construct them, present and add constraints:
orangeView.backgroundColor = .orange
orangeView.layer.cornerRadius = 8
orangeView.clipsToBounds = true
orangeView.translatesAutoresizingMaskIntoConstraints = false
chamgeButton.backgroundColor = .red
chamgeButton.setTitle("changeColor", for: .normal)
chamgeButton.setTitleColor(.white, for: .normal)
chamgeButton.layer.cornerRadius = 8
chamgeButton.clipsToBounds = true
chamgeButton.addTarget(self, action: #selector(handleChangeColor), for: .touchUpInside)
chamgeButton.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(orangeView)
orangeView.heightAnchor.constraint(equalToConstant: 200).isActive = true
orangeView.widthAnchor.constraint(equalToConstant: 200).isActive = true
orangeView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
orangeView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
view.addSubview(chamgeButton)
chamgeButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -10).isActive = true
chamgeButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10).isActive = true
chamgeButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10).isActive = true
chamgeButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
now add the target button function to change color:
#objc fileprivate func handleChangeColor() {
UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseOut, animations: {
self.orangeView.backgroundColor = .blue
self.view.layoutIfNeeded()
}, completion: nil)
}
This is the result: