陈斌彬的技术博客

Stay foolish,stay hungry

iOS 开源项目- Shimmer

img

Facebook 已经在 Paper 中把实现文字闪烁效果的部分开源了出来,就叫做 Shimmer。使用 Shimmer 可以很容易实现这种文字闪光的效果。但是 Shimmer 不仅仅局限于对文字做删光效果,它可以实现任何 view 的闪光效果,如果使用图片做内容,可以实现图像内容的闪光。这样可以实现某些 logo 的闪光效果,甚至可以用来实现反光效果。

Shimmer 原理分析

Shimmer 的内部包含两个 CALayer, 一个是展示内容的 contentlayer, 另一个是完成闪光效果的 masklayer。这两个 CALayer 通过两个步骤来实现闪光: 遮罩(mask) 和 滑动(slide)。

1.遮罩(Mask)

遮罩的作用就是要让闪光效果只是对文字部分起作用,而不是文字所在的整个 view。这一步通过 CALayermask属性实现。Shimmer 将 masklayer 设置为 contentlayermask。先来看看 CALayer 关于 mask 的解释:

The layer’s alpha channel determines how much of the layer’s content and background shows through. Fully or partially opaque pixels allow the underlying content to show through but fully transparent pixels block that content.

The default value of this property is nil . When configuring a mask, remember to set the size and position of the mask layer to ensure it is aligned properly with the layer it masks.

Shimmer 中利用这一点,通过设置 masklayer 中 alpha 通道的效果来实现闪光效果中的高亮部分。首先将 contentlayer 中的内容设置为白色,通过 masklayer 的遮罩,对应 masklayer 中 alpha 小的部分将会透出一些 contentlayer 的背景,而 alpha 大的部分将会显示出白色的高亮。剩下的工作就是要让这些高亮动起来了。

2.滑动

要实现滑动效果,其实非常简单,我们可以将通过设置 masklayer 的 position 来控制其与 contentlayer 做 mask 的部分,那么,我们可以通过将 masklayer 的尺寸放大,然后保证调整 position 的时候能完全遮罩住 contentlayer 即可,这样就实现了闪光部分的移动,从而实现了闪光效果。下面这张图很好的描述了整个滑动的原理

img

通过调整 masklayer 中 alpha 通道的形状,可以实现不同的闪光效果。例如如果使用圆形光斑效果的 alpha 通 道,那么就可以实现 iPhone 本身锁屏的文字滑动效果了。

安装和使用Shimmer

我在 CocoaPods 安装和使用 一文中里面已经详细介绍了如何配置 Shimmer了。下面是如何使用 Shimmer。

Usage(使用)

To use Shimmer, create a FBShimmeringView or FBShimmeringLayer and add your content. To start shimmering, set the shimmering property to YES.

为了使用 Shimmer,需要在 ViewController.m 文件中创建一个 FBShimmeringView 或者是 FBShimmeringLayer,并且设置 shimmering 属性 为 YES

代码如下:

FBShimmeringView *shimmeringView = [[FBShimmeringView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:shimmeringView];

UILabel *loadingLabel = [[UILabel alloc] initWithFrame:shimmeringView.bounds];
loadingLabel.textAlignment = NSTextAlignmentCenter;
loadingLabel.text = NSLocalizedString(@"Shimmer", nil);
shimmeringView.contentView = loadingLabel;

//start shimmering
shimmeringView.shimmering = YES;

小结

通过对 iOS 开源项目 Shimmer 的学习,一方面提高自己的英语阅读和理解能力,另一方面扩宽自己的视野,对开源项目产生兴趣,通过多理解开源项目,提升自己的开发效率,现在倡导不重复造轮子理念,前人很多宝贵经验分享出来,应该学习如何合理在自己的实际项目中去进行使用和做相应的修改,达到自己的需求。

参考