Animating CALayer border alpha

Question

I have a UIView with a border (color: Green, width: 10).

I'm trying to animate the border's alpha (in a loop) from the value of 1.0 to the value of 0.2 - then back to 1.0 - then back to 0.2 etc...

But CALayer doesn't have a property of borderAlpha so I'm not sure how can I do that.

I've tried this code, but it didn't work:

UIView.animate(withDuration: 1, delay: 0, options: [.repeat, .autoreverse], animations: {
    self.layer.borderColor = UIColor(cgColor: self.layer.borderColor!).withAlphaComponent(0.2).cgColor
}, completion: nil)

Does anybody know how can I do that?

Thank you!

You should find your answer there: https://stackoverflow.com/questions/28934948/how-to-animate-bordercolor-change-in-swift — Aamir, Jun 09 '18 at 10:14
@Aamir, I think they are different cases. This one is: A animated to B, B animated to A. Your link: A animated to B, A animated to B again... — Yun CHEN, Jun 09 '18 at 12:14

iOS Geek · Answer 1 · 2018-06-09T11:04:52.030

Try using this

class animateStack: UIViewController {

    @IBOutlet weak var animateView: UIView!{
        didSet{
            animateView.layer.borderColor = UIColor.black.cgColor
            animateView.layer.borderWidth = 10
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        animateBorderAlpha()
    }

    private func animateBorderAlpha(){
        /// First Animation
        let animation = CABasicAnimation(keyPath: "borderColor")
        animation.beginTime = 0
        animation.toValue = UIColor.black.withAlphaComponent(0.1).cgColor
        animation.fromValue = UIColor.black.cgColor
        animation.duration = 2

        /// Second Animation
        let animation1 = CABasicAnimation(keyPath: "borderColor")
        animation1.toValue = UIColor.black.cgColor
        animation1.fromValue = UIColor.black.withAlphaComponent(0.1).cgColor
        animation1.beginTime = animation.beginTime + animation.duration
        animation.duration = 4

        /// Animation Group
        let borderColorAnimation: CAAnimationGroup = CAAnimationGroup()
        borderColorAnimation.animations = [animation, animation1]
        borderColorAnimation.duration = animation.duration + animation1.duration
        borderColorAnimation.repeatCount = Float.greatestFiniteMagnitude
        self.animateView.layer.add(borderColorAnimation, forKey: "borderColor")
    }

}

Update

class animateViewClass: NSObject {
    class func animateBorderAlpha(_ view: UIView){
        /// First Animation
        let animation = CABasicAnimation(keyPath: "borderColor")
        animation.beginTime = 0
        animation.toValue = UIColor.black.withAlphaComponent(0.1).cgColor
        animation.fromValue = UIColor.black.cgColor
        animation.duration = 2

        /// Second Animation
        let animation1 = CABasicAnimation(keyPath: "borderColor")
        animation1.toValue = UIColor.black.cgColor
        animation1.fromValue = UIColor.black.withAlphaComponent(0.1).cgColor
        animation1.beginTime = animation.beginTime + animation.duration
        animation.duration = 4

        /// Animation Group
        let borderColorAnimation: CAAnimationGroup = CAAnimationGroup()
        borderColorAnimation.animations = [animation, animation1]
        borderColorAnimation.duration = animation.duration + animation1.duration
        borderColorAnimation.repeatCount = Float.greatestFiniteMagnitude
        view.layer.add(borderColorAnimation, forKey: "borderColor")
    }
}

Usage

    animateViewClass.animateBorderAlpha(viewName)
    /// Case of Subclass UIView
    animateViewClass.animateBorderAlpha(self)

I'm using a subclass of `UIView` and not a `UIViewController` — FS.O6, Jun 09 '18 at 10:14
You need to add this animation in UIView, like **self.yourViewName.layer.add(borderColorAnimation, forKey: "borderColor")** — iOS Geek, Jun 09 '18 at 10:56
/// Second Animation animation.duration = 4 (maybe animation1?) — Alex, Feb 12 '19 at 17:06

Yun CHEN · Answer 2 · 2018-06-09T12:08:45.990

Updated and simplified. Use CALayer to create the border layer, then use CABasicAnimation to achieve fade-in-out effect:

class BorderView: UIView {
    private var boarderLayer:CALayer?
    private let animationKey = "opacityAnimation"

    override public var frame: CGRect {
        didSet{
            self.updateBorder()
        }
    }

    func updateBorder() {
        if boarderLayer == nil {
            boarderLayer = CALayer()
            boarderLayer?.borderColor = UIColor.red.cgColor
            boarderLayer?.borderWidth = 5.0
            self.layer.addSublayer(boarderLayer!)
        }

        boarderLayer?.frame = self.bounds

        if (boarderLayer?.animation(forKey: animationKey) == nil) {
            self.addAnimiation(layer: boarderLayer!,increasing:true)
        }
    }

    func addAnimiation(layer:CALayer,increasing:Bool) {
        CATransaction.begin()

        CATransaction.setCompletionBlock{ [weak self] in
            self?.addAnimiation(layer: layer,increasing:!increasing)
        }

        let animation = CABasicAnimation(keyPath: "opacity")
        if increasing {
            layer.opacity = 0.2
            animation.fromValue = 1.0
            animation.toValue = 0.2
        }
        else{
            layer.opacity = 1.0
            animation.fromValue = 0.2
            animation.toValue = 1.0
        }
        animation.duration = 1.0
        layer.add(animation, forKey: animationKey)

        CATransaction.commit()
    }
}

And the result:

I'm using a subclass of `UIView` and not a `UIViewController` — FS.O6, Jun 09 '18 at 10:14

Animating CALayer border alpha

2 Answers2