Facebook Shimmer Tutorial

How Shimmer Works

How exactly does Shimmer work?

There are three main components to Shimmer:

Basically Shimmer sets up the gradient layer to make part of the content view more transparent than other parts – i.e. the area that is “not shimmering” is 50% transparent, and the area that is shimmering is not transparent at all, so it appears like a highlight. It also runs an animation to move the gradient along the shimmer view, from left to right by default.

1. FBShimmering is a protocol that defines the list of properties that all shimmering views should have – both FBShimmeringView and FBShimmeringLayer implement this protocol.
2. FBShimmeringView is UIView subclass that acts as manager for the view you want to shimmer. Its contentView property has a setter method that adds your view as a subview and saves a reference to the subview’s CALayer to use when shimmering. Notice that each property is simply a pass-through to its underlying FBShimmerLayer.
3. FBShimmeringLayer is where all the magic happens. It creates a CAGradientLayer subclass and sets it as the mask of the contentView. Usually when you set a mask on a layer, you use it to “cut out” only part of a layer to be visible, but you can also use masks to make parts of a layer more or less transparent than others; this is what Shimmer does.

   Basically Shimmer sets up the gradient layer to make part of the content view more transparent than other parts – i.e. the area that is “not shimmering” is 50% transparent, and the area that is shimmering is not transparent at all, so it appears like a highlight. It also runs an animation to move the gradient along the shimmer view, from left to right by default.

Feel free to look through the code to get an understanding of it – then proceed to the quick reference if you want to tweak Shimmer’s behavior!

Shimmer Quick Reference

Here’s a list of all the properties you can configure via the FBShimmering protocol that’s used by Shimmer.

• shimmeringPauseDuration: Adds length to the gradient to give additional time (default 0.4 seconds).
• shimmeringAnimationOpacity: The opacity of the content before it is shimmering (the non-highlighted area; default 0.5).
• shimmeringOpacity: The opacity of the content while it is shimming (the highlighted area; default 1.0).
• shimmeringSpeed: This changes the speed of the shimmer; a lower number means a faster shimmer. You use this in combination with pause duration (default 230 points per second).
• shimmeringHighlightLength: The highlight length of shimmering (range between 0-1; default 0.33).
• shimmeringDirection: Allows you to set the direction of the shimmer between right/left/up/down (default FBShimmerDirectionRight).

To see more options, check out FBShimmering.h. Have fun!

Where To Go From Here?

Here’s the final project source code.

Adding a shimmer effect to your application is extremely simple with Facebook Shimmer. The library is easy to use, and though it’s written in Objective-C, it plays nicely with Swift.

Try changing the values of the various protocol properties and see what happens. Can you make the shimmer happen once for every passing second?

Feel free to chime in on the forums below if you have questions, comments, or just want to show off how you implemented shimmer in your own app. I look forward to hearing from you!