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内容便全部展示出来。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,321评论 6 30
  • Core Animation其实是一个令人误解的命名。你可能认为它只是用来做动画的,但实际上它是从一个叫做Laye...
    小猫仔阅读 3,541评论 1 4
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 4,999评论 5 13
  • 【最好的自己/1】 曾经写过一些文字,题大概是,没有夜,我的灵魂无处安放。于是,便有了很多晚睡的夜,也...
    鱼非心事阅读 268评论 0 1
  • 我还是金石猴 你也不过是小白狐 妖魔幻化天兵 屠杀花果山 还有我 最在乎的你 为了你 大闹天宫 被压五行山五百年 ...
    都市归人阅读 362评论 0 0