Gfrktyl

In earlier versions of iOS the lock screen had a 'slide to unlock' element which I'm referencing as a 'shimmer' effect.

The effect I'm looking for is simpler:

1. Button starts with single color (e.g. blue)


2. a band of color (e.g. red) sweeps across the text label from left to right


3. Repeat

Here's an example of my ShimmerButton class in action, and the code itself:

class ShimmerButton: UIButton {



    private let wrapperLayer = CALayer()

    private let gradientLayer = CAGradientLayer()



    var gradientColors: [UIColor] =  {

        didSet {

            gradientLayer.colors = gradientColors.map({ $0.cgColor })

        }

    }



    override func layoutSubviews() {

        super.layoutSubviews()



        // only needs to be set once, but no harm (?) in setting multiple times

        gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)

        gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)

        wrapperLayer.addSublayer(gradientLayer)

        layer.insertSublayer(wrapperLayer, at: 0)

        wrapperLayer.mask = titleLabel?.layer



        // update sublayers based on new frame

        wrapperLayer.frame = frame

        gradientLayer.frame.size = CGSize(width: frame.width * 4, height: frame.height)



        // remove any existing animation, and re-create for new size

        let animationKeyPath = "position.x"



        gradientLayer.removeAnimation(forKey: animationKeyPath)



        let animation: CABasicAnimation = CABasicAnimation(keyPath: animationKeyPath)



        animation.fromValue = bounds.width - gradientLayer.bounds.width / 2

        animation.toValue = gradientLayer.bounds.width / 2

        animation.duration = 3



        animation.repeatCount = HUGE

        animation.fillMode = kCAFillModeForwards

        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)



        gradientLayer.add(animation, forKey: animationKeyPath)

    }

}

Example usage:

let shimmer = ShimmerButton(frame: .zero)

shimmer.backgroundColor = .white

shimmer.setTitle("Find new skills...", for: .normal)

shimmer.titleLabel?.font = UIFont.systemFont(ofSize: 24, weight: UIFontWeightHeavy)

shimmer.sizeToFit()

shimmer.gradientColors = [.blue, .blue, .red, .blue, .blue]

Some questions:

1. Code that only needs to be once off is happening in layoutSubviews so will be called multiple times. I did this so I didn't have to override init?(coder:) and init(frame:). Is this acceptable, or just lazy on my part?


2. I'm animating the position of a CAGradientLayer to get the visual effect, but found that I needed to use another layer as a wrapper otherwise the text itself would move. Am I overlooking a solution that involves fewer layers?

Okay, so sometimes posting a question is the best way to figure out an answer yourself 🙃.

I was looking for an alternative to having the gradient colors evenly spaced (my hack was to repeat the colors e.g. "blue blue red blue blue") and found the locations property on CAGradientLayer which is also animatable.

Animating this property feels like a much better approach because with the position not changing I can remove the wrapper layer.

Then, with without the wrapper layer I realized that I could override layerClass so the buttons backing layer is a gradient layer, which will also resize as needed when the view frame changes so that I don't even need to override layoutSubviews.

The only thing that feels a little strange is the forced requirement for for gradient colors to have three colors (otherwise I'd need to figure some formula to derive values for locations).

Edit: I've updated answer so instead of directly setting the colors, I've exposed gradientTint and gradientHighlight properties that are used to set the gradients colors array.

I've created a protocol that captures the properties used to define the shimmer effect, and also provide a default implementation of the animation.

It wasn't a requirement from my original question, but moving this code out of a specific subclass makes this snippet of code reusable (and maintainable) across other subclasses (e.g. UIView, UILabel).

protocol ShimmerEffect {

    var animationDuration: TimeInterval { set get }

    var animationDelay: TimeInterval {set get }



    var gradientTint: UIColor { set get }

    var gradientHighlight: UIColor { set get }



    //// Expects value between 0.0—1.0 that represents 

    //// the ratio of the gradient highlight to the full

    //// width of the gradient.

    var gradientHighlightRatio: Double { set get }



    //// The layer that the gradient will be applied to

    var gradientLayer: CAGradientLayer { get }

} 

Default implementation:

extension ShimmerEffect {



    /// Configures, and adds the animation to the gradientLayer

    func addShimmerAnimation() {



        // `gradientHighlightRatio` represents how wide the highlight 

        // should be compared to the entire width of the gradient and

        // is used to calculate the positions of the 3 gradient colors.

        // If the highlight is 20% width of the gradient, then the

        // 'start locations' would be [-0.2, -0.1, 0.0] and the

        // 'end locations' would be [1.0, 1.1, 1.2]

        let startLocations = [NSNumber(value: -gradientHighlightRatio), NSNumber(value: -gradientHighlightRatio/2), 0.0]

        let endLocations = [1, NSNumber(value: 1+(gradientHighlightRatio/2)), NSNumber(value: 1+gradientHighlightRatio)]

        let gradientColors = [gradientTint.cgColor, gradientHighlight.cgColor, gradientTint.cgColor]



        // If the gradient highlight ratio is wide, then it can 

        // 'bleed' over into the visible space of the view, which 

        // looks particularly bad if there is a pause between the

        // animation repeating.

        // Shifting the start and end points of the gradient by the                  

        // size of the highlight prevents this.

        gradientLayer.startPoint = CGPoint(x: -gradientHighlightRatio, y: 0.5)

        gradientLayer.endPoint = CGPoint(x: 1+gradientHighlightRatio, y: 0.5)

        gradientLayer.locations = startLocations

        gradientLayer.colors = gradientColors



        let animationKeyPath = "locations"



        let shimmerAnimation = CABasicAnimation(keyPath: animationKeyPath)

        shimmerAnimation.fromValue = startLocations

        shimmerAnimation.toValue = endLocations

        shimmerAnimation.duration = animationDuration

        shimmerAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)



        let animationGroup = CAAnimationGroup()

        animationGroup.duration = animationDuration + animationDelay

        animationGroup.repeatCount = .infinity

        animationGroup.animations = [shimmerAnimation]



        // removes animation with same key (if exists) then adds 

        // the new animation

        gradientLayer.removeAnimation(forKey: animationKeyPath)

        gradientLayer.add(animationGroup, forKey: animationKeyPath)

    }

}

In the UIButton subclass I've added property observers to each of the properties that calls addShimmerAnimation() with any property change.

I also considered just supplying default values and requiring addShimmerAnimation() to be called manually once properties were configured. Another route was not having any public properties exposed and instead passing everything in through an initializer, but that would remove the possibility of these classes being used in a storyboard (which is an option I like to leave open) and having properties exposed through tagging the properties with IBInspectable.

class ShimmerButton: UIButton, ShimmerEffect {



    override static var layerClass: AnyClass {

        return CAGradientLayer.self

    }



    var gradientLayer: CAGradientLayer {

        return layer as! CAGradientLayer

    }



    var animationDuration: TimeInterval = 3 {

        didSet { addShimmerAnimation() }

    }

    var animationDelay: TimeInterval = 1.5 {

        didSet { addShimmerAnimation() }

    }



    var gradientHighlightRatio: Double = 0.3 {

        didSet { addShimmerAnimation() }

    }



    var gradientTint: UIColor = .black {

        didSet { addShimmerAnimation() }

    }



    var gradientHighlight: UIColor = .white {

        didSet { addShimmerAnimation() }

    }



    override init(frame: CGRect) {

        super.init(frame: frame)

        gradientLayer.mask = titleLabel?.layer

        addShimmerAnimation()

    }



    required init?(coder aDecoder: NSCoder) {

        super.init(coder: aDecoder)

        gradientLayer.mask = titleLabel?.layer

        addShimmerAnimation()

    }

}

Example usage:

let shimmer = ShimmerButton()

shimmer.setTitle("Find new skills", for: .normal)

shimmer.titleLabel?.font = UIFont.systemFont(ofSize: 24, weight: UIFontWeightHeavy)

shimmer.gradientTint = darkBlue

shimmer.gradientHighlight = lightBlue

shimmer.sizeToFit()

What I like about this approach is that the complexity is moved out of the subclass making it super easy to duplicate over other views.

What frustrates me is that UIView, UILabel and UIButton only have minor differences. I wish there was a way for the computed properties to be extracted into a common place.

Example of ShimmerButton and ShimmerView (a UIView subclass) being used together:

Shimmer animation can be added like below in iOS

class ViewController: UIViewController {

    @IBOutlet var label: UILabel!

    let gradientLayer = CAGradientLayer()

    override func viewDidLoad() {

        super.viewDidLoad()

        self.gradientLayer.frame = self.label.bounds

        self.gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)

        self.gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)

        self.gradientLayer.colors = [UIColor.red.cgColor, UIColor.white.cgColor, UIColor.darkGray.cgColor]

        let startLocations : [NSNumber] = [-1.0,-0.5, 0.0]

        let endLocations : [NSNumber] = [1.0,1.5, 2.0]



        self.gradientLayer.locations = startLocations

        let animation = CABasicAnimation(keyPath: "locations")

        animation.fromValue = startLocations

        animation.toValue = endLocations

        animation.duration = 0.8

        animation.repeatCount = .infinity



        self.gradientLayer.add(animation, forKey: animation.keyPath)

        self.label.layer.addSublayer(self.gradientLayer)



        DispatchQueue.main.asyncAfter(deadline: .now() + 5) {

            self.gradientLayer.removeAllAnimations()

        }

    }





}