IOS之Shimmer的完整解析

Shimmer是啥玩意

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

效果图

IOS之Shimmer的完整解析_第1张图片
Shimmer效果图

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

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

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

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

源码分析

FBShimmering

略过,因为太简单

FBShimmeringView

难点一:

难点一

解析:

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

难点二:

IOS之Shimmer的完整解析_第2张图片
难点二

解析:

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

FBShimmeringLayer

难点一:

IOS之Shimmer的完整解析_第3张图片
难点一

解析:

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

难点二:

IOS之Shimmer的完整解析_第4张图片
难点二

解析:

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

难点三 :

IOS之Shimmer的完整解析_第5张图片
难点三

解析:

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

难点四:

IOS之Shimmer的完整解析_第6张图片
难点四

解析:

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

难点五:

IOS之Shimmer的完整解析_第7张图片
难点五(1)
IOS之Shimmer的完整解析_第8张图片
难点五(2)

解析:

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

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

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

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

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

以下是我理的思路图:

IOS之Shimmer的完整解析_第9张图片
思路图

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

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

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

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

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

你可能感兴趣的:(IOS之Shimmer的完整解析)