作者 | Seven

导读 

随着挪动互联网的疾速倒退，业界涌现出大量有创意又乏味的交互体验。扫光动效就是其中一种有意思的加载动效，常见的扫光动效有骨架屏扫光、logo扫光。那么这两种扫光动效的原理是什么，如何实现这两种扫光成果，以及在iOS和Andoird双端实现起来有什么差别，本文会为你具体揭晓。

全文10549字，预计浏览工夫27分钟。

01 引言

扫光动效作为挪动端的常见加载动效，与传统的转圈加载相比，能给人更好的视觉和感官体验。其次要特点是光效会随着工夫进行扫射，文字或图案有被色彩填充的感觉。

笔者先后做过骨架屏扫光、熊掌扫光loading, 本文将别离从 iOS 和 Android的视角, 介绍这两种扫光动效的实现和双端的技术差别。

△熊掌扫光动效

02 骨架屏扫光动效

骨架屏是一种界面加载过程中的过渡成果。它在页面数据加载实现前，先给用户展现出页面的大抵构造，在拿到接口数据后渲染出理论页面内容而后替换掉。这种技术可能升高用户的焦灼情绪，使界面加载过程变得天然通顺，晋升用户体验。罕用于文章列表、动静列表页等绝对比拟规定的列表页面。这里以领取半屏面板面板为例，能够看到有光效在骨架图上扫过的成果。

△骨架屏扫光

2.1 骨架屏扫光原理剖析

骨架屏的扫光场景比较简单, 因为其背景是不通明, 能够通过在骨架图下面叠加一个遮罩视图作为光块， 对遮罩进行挪动来达到扫光的成果。

其视图的层级整体分位两层，底层为自定义视图的骨架局部，下层为突变通明遮罩。其中，骨架图局部为惯例的列表实现，这里不再赘述，而突变通明遮罩作为扫光的，能够用切图或通过代码来实现。遮罩切图绝对代码实现，会减少一部分包体积，所以能够抉择自定义一个和骨架图一样大小的视图，笼罩到骨架图之上，并设置其为从左到右突变通明。

此外，位移动画，能够通过设置在 xxx工夫内，将遮罩视图在程度方向上，从骨架图的左侧挪动到骨架图的右侧来实现。

2.2 iOS实现

Core Animation 是 AppKit 和 UIKit 完满的底层反对，同时也被整合进入 Cocoa 和 Cocoa Touch 的工作流之中，它是 app 界面渲染和构建的最基础架构。Core Animation 主要职责蕴含：渲染、构建和实现动画，尽可能快地组合屏幕上不同的可视内容，这个内容是被分解成独立的 layer（iOS 中具体而言就是 CALayer），并且被存储为树状层级构造。这个树也造成了 UIKit 以及在 iOS 应用程序当中咱们所能在屏幕上看见的所有的根底。

在 iOS 上，能够通过 CALayer +View 动画办法+Transform来实现。layer 是UIView 的底层图层, 负责视图的绘制，动画，边框，暗影等视觉效果。动画局部间接用 View 的类办法animateWithDuration即可，在动画回调中通过设置视图的Transform属性来实现程度位移。

突变遮罩局部能够按如下代码定义，通过一个 ImageView 作为遮罩视图，通过设置CAGradientLayer做为其layer实现通明突变成果：

// 创立自定义视图作为遮罩视图_lightCover = [[UIImageView alloc] initWithFrame:self.bounds];CAGradientLayer *gradientLayer = [CAGradientLayer layer];gradientLayer.frame = _lightCover.bounds;// 渐变色色彩数组gradientLayer.colors = [NSArray arrayWithObjects:                    (id)[UIColorFromRGBA(0xFFFFFF, 0) CGColor],                     (id)[UIColorFromRGBA(0xFFFFFF, 0.3) CGColor],                     (id)[UIColorFromRGBA(0xFFFFFF, 0.5) CGColor],                     (id)[UIColorFromRGBA(0xFFFFFF, 0.3) CGColor],                     (id)[UIColorFromRGBA(0xFFFFFF, 0) CGColor], nil];// 突变的开始点 (不同的起始点能够实现不同地位的突变,如图)gradientLayer.startPoint = CGPointMake(0, 0.5f);// 突变的完结点gradientLayer.endPoint = CGPointMake(1, 0.5f);// 把突变图层增加到遮罩视图的顶层[_lightCover.layer insertSublayer:gradientLayer atIndex:0];// 设置初始地位_lightCover.transform = CGAffineTransformMakeTranslation(-self.bounds.size.width, 0);

通过定时器循环位移动画：

// 定时器：动画工夫duration + 延迟时间delay = 定时器间隔时间intervalTimeself.lightSweepTimer = [NSTimer scheduledTimerWithTimeInterval:intervalTime target:self selector:@selector(lightSweepAnimation) userInfo:nil repeats:YES];[[NSRunLoop currentRunLoop] addTimer:self.lightSweepTimer forMode:NSRunLoopCommonModes];

动画局部间接用View 的 animateWithDuration办法实现：

self.lightCover.transform = CGAffineTransformMakeTranslation(-self.bounds.size.width, 0);[UIView animateWithDuration:duration animations:^{    self.lightCover.transform = CGAffineTransformMakeTranslation(self.bounds.size.width, 0.f);} completion:^(BOOL finished) {}];

因为定时器执行工夫较长，能够在加载时先执行一次动画：

//定时器工夫较长，先执行一次动画[self lightSweepAnimation];

2.3 Android 实现

Android的渲染技术次要建设在View零碎之上，View零碎解决视图的布局和绘制。View代表一个控件，次要负责本人的绘制，ViewGroup代表一个容器，次要负责管理和布局它蕴含的子View和子ViewGroup。

这里能够通过自定义 Shape+ObjectAnimator 实现。Shape是一种非凡的 View，通过XML中定义的<shape>标签来实现自定义形态和相干成果，能够通过<shape>的相干属性来绘制出各种形态,并为其利用渐变色、暗影、边框等成果。ObjectAnimator能够用于所有反对动画的属性，包含地位、大小、旋转、缩放和透明度等，只需指定要动画的属性名称和目标值即可。

遮罩局部可按如下定义一个突变矩形：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <gradient        android:startColor="#00ffffff"        android:centerColor="#7fffffff"        android:endColor="#00ffffff"        ></gradient></shape>

再定义一个 Handler，用于在主线程刷新视图：

Handler mHandler = new Handler(Looper.getMainLooper(), new Handler.Callback() {    @Override    public boolean handleMessage(Message msg) {        int what = msg.what;        if (msgAnimation == what) {            runAnimation();        }        return false;    }});

通过 ObjectAnimator以及属性translationX 定义位移动画：

private void runAnimation() {    if (displayWidth == 0) {        displayWidth = defaultWidth;    }    ObjectAnimator translationX = ObjectAnimator.ofFloat(mMoveLight, "translationX", -displayWidth, displayWidth);    translationX.setDuration(duration);    translationX.setRepeatCount(0);    translationX.start();    translationX.addListener(new AnimatorListenerAdapter() {        @Override        public void onAnimationEnd(Animator animation) {            sendMsg(msgAnimation, delayTime);        }    });}

提早一段时间后继续执行动画：

private void sendMsg(int what, int delayTime) {    checkParent();    if (mHandler != null) {        mHandler.sendEmptyMessageDelayed(what, delayTime);    }}

开始加载的时候，先执行一次动画：

public void startLoading() {    setVisibility(VISIBLE);    sendMsg(msgAnimation, 0);}

03 熊掌扫光动效

熊掌扫光次要是作为页面加载时的过渡成果，会在内容加载实现前展现，其通常在页面内容下面，不能齐全遮挡底部内容。而且在日间模式（存在多种内容背景底色），夜间模式（在日间模式的根底上，笼罩了一层灰色通明蒙层），暗黑模式多种场景模式下，也会对扫光的成果产生烦扰，尤其是在日间模式灰色背景以及夜间模式下，甚至可能无奈看到扫光。

△别离为日间模式白底，日间模式灰底，夜间模式，暗黑模式

3.1 iOS  实现

熊掌扫光的简单场景，仅靠双层视图叠加无奈满足需要，滑块会有各种异常情况（具体见 3.2.1 局部）。在 iOS上能够应用三层构造，最底层是待扫光的图，两头是挪动的光块，最上层是依据底图绘制的镂空图层，三层视图叠加在一起，造成光和图案混合的成果。

△iOS 通过遮罩实现扫光成果原理

iOS的 CoreAnimation 框架十分优良，其 View的实现，刚好满足了这种三层构造须要。

  • view 视图
  • View是根本的用户界面元素，用于展现和解决用户界面。它们能够是规范的UI控件（如UILabel、UIButton等），也能够是自定义的视图。
  • 每个View都有本人的绘制区域，能够蕴含其余视图作为其子视图。
  • layer 图层
  • Layer是View的底层绘制层次结构中的一个组成部分。每个View都有一个与之关联的Layer对象（CALayer类的实例）。
  • Layer负责解决View的内容的绘制和显示，包含视图的背景色彩、边框、暗影等。每个Layer都有一个本人的绘制区域，与View的边界对应。
  • mask 遮罩
  • Mask是一种用于管制图层可见性的机制。它是一个通明的图像或形态，能够与Layer关联。
  • 通过利用遮罩，能够定义Layer中哪些区域应该是可见的，哪些区域应该是暗藏的。
  • 遮罩通常是由另一个Layer或者自定义的图像创立的，它们确定了图层中内容的可见局部。

iOS能够通过layer作为光，mask作为遮罩，来实现光混合在熊掌logo 上的成果：

// loadingView 设置熊掌底图self.loadingImgView.image = [self lightImg];// 创立突变图层CAGradientLayer *gradientLayer = [CAGradientLayer layer];gradientLayer.frame = CGRectMake(0, 0, loadingWidth, loadingHeight);// 设置突变色彩gradientLayer.colors = @[(__bridge id)[UIColor colorWithWhite:1 alpha:0].CGColor,                         (__bridge id)[UIColor colorWithWhite:1 alpha:0.9].CGColor,                         (__bridge id)[UIColor colorWithWhite:1 alpha:0.9].CGColor,                         (__bridge id)[UIColor colorWithWhite:1 alpha:0].CGColor];gradientLayer.locations = @[@0.0, @0.49, @0.495, @1.0];gradientLayer.startPoint = CGPointMake(0, 0.5);gradientLayer.endPoint = CGPointMake(1, 0.35);[self.loadingImgView.layer addSublayer:gradientLayer];// 创立通明遮罩CALayer *maskLayer = [[CALayer alloc] init];maskLayer.frame = CGRectMake(0, 0, loadingWidth, loadingHeight);maskLayer.backgroundColor = [UIColor clearColor].CGColor;// 设置遮罩内容maskLayer.contents = (__bridge id _Nullable)([self lightImg].CGImage);self.loadingImgView.layer.mask = maskLayer;

在 layer 层通过CABasicAnimation实现程度位移：

// 定义根本动画, 管制在x轴方向的位移CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];animation.duration = 2;// 反复次数1000000次(有限次)animation.repeatCount = 1000000;// 动画不会主动反转animation.autoreverses = false;animation.fromValue = @(-loadingWidth);animation.toValue = @(loadingWidth);// 动画在实现后不会被移除animation.removedOnCompletion = NO;// 动画完结后图层放弃最初一个状态animation.fillMode = kCAFillModeForwards;[self.gradientLayer addAnimation:animation forKey:@"loading_animation_key"];

3.2 Android 实现

这里以 Andoird上的双层视图叠加为例，能够看到会有各种各样的问题。

3.2.1 通过双层自定义视图叠加

通过叠加切图实现，存在的问题有：日间模式(灰色背景)下无奈看到滑块，同时暗黑模式下滑块较为显著。

△叠加切图

通过叠加Shape实现，在骨架屏场景上进行扫光成果还行，但在熊掌扫光上成果不佳。存在的问题有：如果是日间模式下的的白底背景失常，但灰底背景无奈看到扫润滑块。此外，不加旋转角度，在暗黑模式成果还行，叠加旋转度角度后，能够看到显著的滑块痕迹。

△叠加 shape 图层

△叠加 shape 图层（旋转角度）

甚至还能够通过 LinearGradient 实现自定义带斜率的突变扫光，其外围办法如下：

// float k = 1f * h / w;mValueAnimator = ValueAnimator.ofFloat(0f - offset * 2, w + offset * 2);mValueAnimator.setRepeatCount(repeatCount);mValueAnimator.setInterpolator(new LinearInterpolator());mValueAnimator.setDuration(duration);mValueAnimator.addUpdateListener(animation -> {    float value = (float) animation.getAnimatedValue();    LinearGradient mLinearGradient = new LinearGradient(            value,            k * value,            value + offset,            k * (value + offset),            colors,            positions,            Shader.TileMode.CLAMP    );    mPaint.setShader(mLinearGradient);    invalidate();});mValueAnimator.start();

在ValueAnimator的更新回调中:

  • 依据value和斜率k计算两个控制点的坐标
  • 创立一个线性突变LinearGradient,由这两个控制点定义
  • 将该突变设置为Paint的Shader
  • 调用invalidate()重绘View

因为ValueAnimator不断更新,所以线性突变的两个控制点也在一直变动,产生突变动画成果：

然而这种形式，在仅白底背景下成果较好，在灰底背景或暗黑成果下不尽人意，能够看到较显著的滑块。

3.2.2 通过Canvas 绘图

Android上不像 iOS一样，View 自身还能够再设置多个图层。如果要混合渲染扫光和背景图，除非本人再自定义一个遮罩层造成三层构造，或者间接通过更底层的绘图来解决。

那么，怎么把扫光和背景图混合渲染呢？答案是能够通过 PorterDuffXferMode来实现。

PorterDuffXferMode应用PorterDuff.Mode规定将所绘制图形和Canvas上图形混合，最终更新Canvas展现新的图形。PorterDuffXferMode的应用也非常简单，在须要应用的时候paint.setXfermode(PorterDuff.Mode mode)设置混合模式。

PorterDuff.Mode共分为16种模式：CLEAR、SRC、DST、SRC\_OVER、DST\_OVER、SRC\_IN、DST\_IN、SRC\_OUT、DST\_OUT、SRC\_ATOP、DST\_ATOP、XOR、DARKEN、LIGHTEN、MULTIPLY、SCREEN。

Android 应用 Canvas 在 View 上绘制图形 ，所绘制的图形中的像素称作源像素（source，简称src），所绘制的矩形在Canvas中对应地位的矩形内的像素称作指标像素（destination，简称dst）。源像素的ARGB四个重量会和Canvas上同一地位处的指标像素的ARGB四个重量依照 Xfermode定义的规定进行计算，造成最终的ARGB值，而后用该最终的ARGB值更新指标像素的ARGB值。

以官网提供的图示来阐明，假如有一个蓝色的源像素图形和一个红色的指标像素图形。

通过DST\_IN， 能够失去相交局部是红色的扇形，即相交的局部保留指标像素，不相交的局部，抛弃源像素。

这样，首先通过PorterDuffXfermode来设置DST\_IN的混合成果，通过LinearGradient来创立遮罩的突变成果。其次应用Canvas和Paint来绘制和渲染位图，先绘制一个未通过遮罩解决的位图，作为src，再绘制一个通过遮罩解决的位图，作为dst，两者组合一起，造成扫光成果，最初在通过应用ValueAnimator来实现动画成果。

△图中亮光的局部为 dst

首先，创立带斜率的突变遮罩位图：

mMaskBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);Canvas canvas = new Canvas(mMaskBitmap);// 能够通过参数管制getGradientColors 的值，在不同模式下为不同的突变色彩Shader gradient = new LinearGradient(                        0, 0,                        width, 0,                        getGradientColors(),                        getGradientPositions(),                        Shader.TileMode.REPEAT);canvas.rotate(mTilt, width / 2, height / 2);Paint paint = new Paint();paint.setShader(gradient);// 适度增大矩形区域，适配歪斜int padding = (int) (Math.sqrt(2) * Math.max(width, height)) / 2;canvas.drawRect(-padding, -padding, width + padding, height + padding, paint);

其次，在 dispatchDraw办法 中顺次绘制源位图和指标位图：

// 先绘制一个未通过遮罩解决的位图，作为 srcdrawUnmasked(new Canvas(unmaskBitmap));Canvas unmaskRenderCanvas = (new Canvas(maskBitmap));unmaskRenderCanvas.drawColor(0, PorterDuff.Mode.CLEAR);super.dispatchDraw(unmaskRenderCanvas);canvas.drawBitmap(unmaskBitmap, 0, 0, mAlphaPaint);// 再绘制一个通过遮罩解决的位图，作为dstCanvas maskRenderCanvas = (new Canvas(maskBitmap));maskRenderCanvas.clipRect(    mMaskOffsetX,    mMaskOffsetY,    mMaskOffsetX + maskBitmap.getWidth(),    mMaskOffsetY + maskBitmap.getHeight());maskRenderCanvas.drawColor(0, PorterDuff.Mode.CLEAR);super.dispatchDraw(maskRenderCanvas);maskRenderCanvas.drawBitmap(maskBitmap, mMaskOffsetX, mMaskOffsetY, mMaskPaint);canvas.drawBitmap(maskBitmap, 0, 0, null);

接着，通过 ValueAnimator实现位移并触发实时绘制闪光成果：

mMaskTranslation.set(-width, 0, width, 0);mAnimator = ValueAnimator.ofFloat(0.0f, 1.0f + (float) mRepeatDelay / mDuration);mAnimator.setDuration(mDuration + mRepeatDelay);mAnimator.setRepeatCount(mRepeatCount);mAnimator.setRepeatMode(mRepeatMode);mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {    float value = Math.max(0.0f, Math.min(1.0f, (Float) animation.getAnimatedValue()));    mMaskOffsetX = (int) (mMaskTranslation.fromX * (1 - value) + mMaskTranslation.toX * value);    mMaskOffsetY = (int) (mMaskTranslation.fromY * (1 - value) + mMaskTranslation.toY * value);    invalidate();}});

最终成果如下图所示：

△日间模式

△夜间模式

△暗黑模式

04 结语

在下面内容中，咱们介绍到了基于遮罩实现的扫光成果，遮罩常见的利用有圆角成果，穿人像弹幕，还有在老手指引中用于绘制挖孔成果，或者是刮彩票成果。

在渲染技术上次要是使用到了 iOS 零碎中的 Core Animation框架以及 Android 的 View 零碎。

iOS 上通常会应用 Core Animation 来高效、不便地实现动画。它应用CALayer进行图形渲染和动画操作。Apple并没有间接在UIView上提供masking的反对，而是在其底层的CALayer上实现。这使开发者能够灵便管制和批改mask,达到更弱小的成果。而 Android 想要制作更灵便和弱小的成果，能够通过 Canvas 来实现。

——END——

举荐浏览：

Android SDK平安加固问题与剖析

搜寻语义模型的大规模量化实际

如何设计一个高效的分布式日志服务平台

视频与图片检索中的多模态语义匹配模型：原理、启发、利用与瞻望

百度离线资源治理

百度APP iOS端包体积50M优化实际(三) 资源优化