IOS之Shimmer的完整解析

Shimmer是啥玩意

Shimmer是可以为你的APP中的任何视图添加"一闪一闪"的效果。最初源自于facebook的 Paper 应用。传送门:GitHub - facebook/Shimmer: An easy way to add a simple

效果图

Shimmer效果图

Shimmer源码主要分为以下三个文件:

FBShimmering : 一个协议,主要用来封装一些常用的属性，比如：速度、透明度、持续时间等。

FBShimmeringView : 实现FBShimmering协议，主要用来修改其图层类为FBShimmeringLayer，提供类似代理功能，并对外提供View。

FBShimmeringLayer : 实现了FBShimmering协议，是实现整个动画效果的核心部分，我们将在具体分析阶段详解。

源码分析

FBShimmering

略过，因为太简单

FBShimmeringView

难点一:

难点一

解析:

通过重新实现layerClass方法来修改FBShimmeringView的关联图层，对FBShimmeringView的操作就会由FBShimmeringLayer来实现。

难点二:

难点二

解析:

通过宏定义的方式实现FBShimmering协议属性的Get和Set方法。

FBShimmeringLayer

难点一:

难点一

解析:

这里引用了UIKit的私有方法UIAnimationDragCoefficient，这里先通过UIKIT_EXTERN的方式将其引入进来。该方法返回一个"拖拽系数"，正常情况下，这个值为1。同时这个方法对应着我们模拟器的"Slow Animations"选项，当我们打开这个选项的时候，他的值变成了10，也就是说我们执行的动画比原来慢了10倍。

难点二:

难点二

解析:

清除蒙版，在这之间需要禁用图层行为。

难点三：

难点三

解析:

为蒙版创建颜色数组，这里需要注意的是蒙版所对应的 CALayer所能表现出来的属性只能是透明度。纵使蒙版是其他颜色或是图片，也不能表现出来想要的色彩效果。所以换成其他的颜色数组效果也是一样的。

难点四:

难点四

解析:

主要用来初始化蒙版。先根据闪烁的方向计算出长度，如果长度为0直接返回。在根据长度分别计算出蒙版的长度、蒙版移动的距离。在根据蒙版的长度和移动距离计算出蒙版图层的startPoint以及endPoint。这里将anchorPoint设置为(0.0)，主要是方便图层的position计算。这里不要太纠结于extraDistance、fullShimmerLength、travelDistance变量的计算，比如说为什么是*3和*2，你也可以设置其他的值，但是动画效果就没原先的好，你就姑且当他是一个魔法参数。

难点五:

难点五(1)

难点五(2)

解析:

这个方法也是最核心的部分。整个过程分为两个步骤：

1:暂停闪动的时候伴随一个淡入的动画。

2:开始闪动的时候一个淡出的动画、接着跟随不断闪动的动画。

第一阶段中先判断是否禁用图层行为，如果禁用了就直接返回。如果没有禁用，则通过kvc的方式先获取闪动动画。判断闪动动画是否为空，若不为空，则计算闪动动画总共运行了多少时间。并通过总的时间和每次运行的时间取模，得当当前闪动的时间偏移，然后通过这个时间偏移计算出这次闪动结束时的时间，而这个时间用来构造淡入动画的beginTime，最后将这个淡入动画加入这个图层。

第二阶段中先判断是否支持淡出动画，如果支持就构建一个淡出动画并加入图层，如果没有就设置透明属性为0，并移除所有动画。然后通过KVC获取闪动动画，并判断是否为空，如果不为空则调用shimmer_slide_repeat方法主要将其repeatCount属性设置为没有限制。如果为空，则初始化一个闪动动画。最后将其加入到图层中。

以下是我理的思路图:

思路图

这里我还想解释下MASK(蒙版)的概念:

蒙版的作用是利用Alpha通道使View的内容有部分展示功能，我们能通过mask去给内容的特定区域增加特定的效果。公式如下：

展示的alpha = content的Alpha * maskLayer的Alpah

很明白，如果maskLayer的alpha是0，那么相对应的content部分内容就会被遮挡。如果maskLayer的alpha是1，那么content内容便全部展示出来。

如果理解有错误的地方，欢迎大家可以指出来，一起探讨。