Create background color change animation

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: