CODEWITHSUNDEEP
iosanimationuiview
iProgram
iProgram

Reputation: 6577

UIView animation background fade not working

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.

Upvotes: 0

Views: 266

Answers (3)

iProgram
iProgram

Reputation: 6577

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.

Upvotes: 0

Robert
Robert

Reputation: 3880

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)

enter image description here

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

Upvotes: 0

ishahak
ishahak

Reputation: 6795

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?

Upvotes: 0

Related Questions