Implementation of iOS shimmer effect

As an iOS developer, you might be familiar with the Shimmer Effect which you must have seen the Slide to Unlock animation. Shimmer was originally developed to show loading status in the Paper application. It is widely adopting and seen in many applications like Facebook, which enhances the look and feel of the app and makes them look more dynamic.

Facebook has implemented this effect on their Home Feeds view. The good news is they have open sourced the code. But you have to import the whole library and add it into the code, which can be avoided by creating the same animation on our own.

For more information regarding the shimmer effect open sourced by Facebook, check https://github.com/facebook/Shimmer.

In this article, NexMobility experienced iOS developer will be implementing the Shimmer Effect without using a third party library, framework or SDK.

Implementation:

1. First we will be setting the colors for the effect.

   let light = UIColor.white.cgColor let alpha = UIColor(red: 206/255, green: 10/255, blue: 10/255, alpha: 0.7).cgColor

2. Next we have to create an object of CAGradientLayer.

   CAGradientLayer: A layer that draws a color gradient on its background color, which fills the shape of the layer. A gradient layer is used to create color gradients that have an uncertain number of colors. By default, the colors are spread alike on the level, but the places can be specified alternatively to control the color state by the gradient.

   let gradient = CAGradientLayer() gradient.frame = CGRect(x: -self.bounds.size.width, y: 0, width: 3 * self.bounds.size.width, height: self.bounds.size.height) gradient.colors = [light, alpha, light] gradient.startPoint = CGPoint(x: 0.0, y: 0.5) gradient.endPoint = CGPoint(x: 1.0, y: 0.525) gradient.locations = [0.35, 0.50, 0.65]

3. Now set it as mask of the layer of the view you want to add shimmer effect.

   let shimmerView = UIView() shimmerView.layer.mask = gradient

4. Now create an object of CABasicAnimation

   CABasicAnimation:- An object that provides basic, single-keyframe animation abilities for layer properties. Specify CABasicAnimation using an inherited input (keyPath) method, specify the main path of the property to be animated in the render tree.

   For the sample, you can animate the Layer Scale (such as a single value), such as its opacity. The list of 1 fade in the layer by animating its opacity from 0 to 1

   let animation = CABasicAnimation(keyPath: "locations") animation.fromValue = [0.0, 0.1, 0.2] animation.toValue = [0.8, 0.9, 1.0] animation.duration = 1.5 animation.repeatCount = HUGE gradient.add(animation, forKey: “shimmer")

5. Now call this code wherever you want to add a shimmer effect. Best would be to extend UIView and create a method into it so that it can call on every object who inherit from UIView class.

   Extension with the final methods to start and stop shimmering effect should like this:

   extension UIView { func startShimmeringEffect() { let light = UIColor.white.cgColor let alpha = UIColor(red: 206/255, green: 10/255, blue: 10/255, alpha: 0.7).cgColor let gradient = CAGradientLayer() gradient.frame = CGRect(x: -self.bounds.size.width, y: 0, width: 3 * self.bounds.size.width, height: self.bounds.size.height) gradient.colors = [light, alpha, light] gradient.startPoint = CGPoint(x: 0.0, y: 0.5) gradient.endPoint = CGPoint(x: 1.0,y: 0.525) gradient.locations = [0.35, 0.50, 0.65] self.layer.mask = gradient let animation = CABasicAnimation(keyPath: "locations") animation.fromValue = [0.0, 0.1, 0.2] animation.toValue = [0.8, 0.9,1.0] animation.duration = 1.5 animation.repeatCount = HUGE gradient.add(animation, forKey: “shimmer") } func stopShimmeringEffect() { self.layer.mask = nil } }

   To stop the added shimmer effect, check the implementation of stopShimmeringEffect() function added just below startShimmeringEffect().

Conclusion:

To add a shimmer effect on any view, just call startShimmeringEffect() on that view using .(dot)

eg. shimmerView.startShimmeringEffect()

Similarly to stop the added shimmer animation, simply call stopShimmeringEffect() on that view.

eg. shimmerView.stopShimmeringEffect()