Facebook Shimmer 分析心得

Shimmer

Facebook 炫酷动画效果的APP paper 有很多开源的动画元素，例如:
AsyncDisplayKit
pop
Shimmer
这里主要就Shimmer小插件分析，先上效果：

可以看到，Shimmer提供绚丽的图片部分闪亮滑动的效果，更甚是Shimmer 不仅仅可以使用在文字的闪光，还能使用在图片上面，也就是任何的View都能实现此效果。

Shimmer 原理分析

Shimmer源码非常段，只有二个类，一个constant

FBShimmering
FBShimmeringView
FBShimmeringLayer

FBShimmeringView 只是一个开放给外部的View壳，主要的逻辑还是在FBShimeringLayer中实现。

FBShimmeringLayer包含了两个Layer，一个是包含内容的contentLayer，另一个便是用户蒙层闪光效果的maskLayer。

遮罩（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 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.

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

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

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

Shimmer的原理很容易理解，我们创建一个maskLayer，具有闪光效果，覆盖在contentLayer上面，然后控制maskLayer做动画，即可实现闪光在移动的效果。为了效果做的更真实，maskLayer可以使用CAGradientLayer，实现一个过渡的闪光效果。

这儿还有一个maskLayer运用很好的案例：
基于Core Animation的KTV歌词视图的平滑实现| iWangKe.me

编码风格##

认真阅读别人的开源代码，会发现facebook的代码很注重细节，且代码风格很好看，同时我们能学习很多小技巧。

1、灵活利用#define 封装Getter Setter方法####

#define LAYER_ACCESSOR(accessor, ctype) \
- (ctype)accessor { \
  return [__layer accessor]; \
}

#define LAYER_MUTATOR(mutator, ctype) \
- (void)mutator (ctype)value { \
  [__layer mutator value]; \
}

#define LAYER_RW_PROPERTY(accessor, mutator, ctype) \
  LAYER_ACCESSOR (accessor, ctype) \
  LAYER_MUTATOR (mutator, ctype)

LAYER_RW_PROPERTY(isShimmering, setShimmering:, BOOL)
LAYER_RW_PROPERTY(shimmeringPauseDuration,     setShimmeringPauseDuration:, CFTimeInterval)
LAYER_RW_PROPERTY(shimmeringAnimationOpacity, setShimmeringAnimationOpacity:, CGFloat)
LAYER_RW_PROPERTY(shimmeringOpacity, setShimmeringOpacity:, CGFloat)
LAYER_RW_PROPERTY(shimmeringSpeed, setShimmeringSpeed:, CGFloat)
LAYER_RW_PROPERTY(shimmeringHighlightLength, setShimmeringHighlightLength:, CGFloat)
LAYER_RW_PROPERTY(shimmeringDirection, setShimmeringDirection:, FBShimmerDirection)
LAYER_ACCESSOR(shimmeringFadeTime, CFTimeInterval)
LAYER_RW_PROPERTY(shimmeringBeginFadeDuration, setShimmeringBeginFadeDuration:, CFTimeInterval)
LAYER_RW_PROPERTY(shimmeringEndFadeDuration, setShimmeringEndFadeDuration:, CFTimeInterval)
LAYER_RW_PROPERTY(shimmeringBeginTime, setShimmeringBeginTime:, CFTimeInterval)

2、条件判断，变量放后面####

- (instancetype)init
{
  self = [super init];
  if (nil != self) {
    _fadeLayer = [[CALayer alloc] init];
    _fadeLayer.backgroundColor = [UIColor whiteColor].CGColor;
    [self addSublayer:_fadeLayer];
  }
  return self;
}