UIView animation background fade not working

Question

I have made my own custom UIView which displays a label in the top left of the UIView, along with some borders.

Inside the custom UIView (AdventDoor), I have created a method called animateChanges(). This is what's inside the method:

func animateChanges()
{
    UIView.animate(withDuration: 1.5, animations: {
        self.layer.backgroundColor = UIColor.white.cgColor
    })        
}

The initial colour of this view is UIColor.red, what I want is for the background colour to fade to white within 1.5 seconds, however, the background jumps to white instantly without the animation.

This is what is inside my draw method:

override func draw(_ rect: CGRect) {
    if(self.tag < 25)
    {
        doorNumber.text = "\(self.tag)"
    } else {
        doorNumber.text = "25"
    }
    self.addSubview(doorNumber)
}

How would I make the views background colour fade from red to white? I have also tried changing UIView.animate to AdventDoor.animate

I also added the code self.backgroundColor = UIColor.clear before the UIView.animation code and for some reason, the animation works. The only problem is, I want it to fade from red to white instead of clear to white.

score 0 · Answer 1 · edited May 23 '17 at 11:45

0

Normally it should work for views. But if your view is based on UILabel, then look here: How to animate the background color of a UILabel?

edited May 23 '17 at 11:45

Community

1
1

answered Dec 04 '16 at 12:30

ishahak

6,585
5
38
56

Thank you for answering. I am wanting to change the background of the view and not the label. I just added the label in there so that you knew why I had my custom UIView. I have also updated my code as I found out something strange for the UIColor.clear. My view is also based on a UIView – iProgram Dec 04 '16 at 12:33

score 0 · Answer 2 · answered Dec 04 '16 at 12:38

I prepare for you some playground code:

 import UIKit
    import PlaygroundSupport


    let sideLenght = 200
    let viewFrame = CGRect(x: 0, y: 0, width: sideLenght, height: sideLenght)

    let baseView = UIView(frame: viewFrame)
    baseView.backgroundColor = UIColor.white

    let shapeLayer = CAShapeLayer()
    shapeLayer.frame = viewFrame

    let commonAnimationDuration = 1.5
    baseView.layer.addSublayer(shapeLayer)

// Great looking transition from one color to another is performed using CABasicAnimation 
    let fade = CABasicAnimation(keyPath: "backgroundColor")
    fade.fromValue = UIColor.red.cgColor // From color
    fade.toValue = UIColor.white.cgColor // To color
    fade.duration = commonAnimationDuration
    fade.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)

    shapeLayer.add(fade, forKey: "shapeLayerbackgroundColor")

    PlaygroundPage.current.liveView = baseView

To see whats my snipped can, copy/paste code to your playground and open Assistant editor (see attachment)

Having those tips you should be able to move/adjust code to your needs.

iProgram · Answer 3 · 2016-12-04T12:45:49.420

I was just playing around with the code and I have fixed the problem.

This is the code I used to fix the animation:

func animateChanges()
{
    print("Animations enabled\(AdventDoor.areAnimationsEnabled)")
    self.backgroundColor = UIColor.clear
    self.layer.backgroundColor = UIColor.red.cgColor
    AdventDoor.animate(withDuration: 1.5, animations: {
        self.layer.backgroundColor = UIColor.white.cgColor
        //self.backgroundColor = UIColor.white
    })

}

For some reason, I had to set the self.backgroundColor to UIColor.clear and then set self.layer.backgroundColor to UIColor.white.cgColor.

I have no idea on why this works, but hey, I have it working now. If someone would like to explain why, please feel free.

UIView animation background fade not working

3 Answers3