扫脸动画
Posted freeCodeSunny
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了扫脸动画相关的知识，希望对你有一定的参考价值。
需求
现在视频应用越来越多了，这里我们希望在视频开始之前，希望用户脸部能够正对着手机屏幕，以达到更好的效果。
基于上述的需求，这里我们就需要在视频流上层叠加一个让用户正对手机屏幕的效果，要求是悬浮层具有半透明，不完全遮挡视频流，同时在界面上留出脸部的形状，让用户有参考物，最后为了更好的视觉效果，我们需要在脸部有一个扫描效果。
效果图
这里我们先呈现一个视觉效果图：
实现
从效果图可以看出我们主要需要做一下几个需求：
- 叠加一个半透明层
- 在半透明层级上挖出一个脸部形状的空洞
- 对空洞实现扫描效果，扫描效果向左向右交替进行，并且在交替过程中，有一个渐变消失的效果
叠加半透明层
叠加半透明层，我们可以在界面上添加一层View，对View设置半透明背景，保持View占满整个屏幕。也可以自定义一个View，绘制View为半透明，这里我们需要后续效果都作用在同一个View上，因此我们采用第二种，自定义View。
canvas.drawRect(0, 0, width, height, paint);这里主要是绘制一个半透明矩形框
绘制的颜色，设置在paint中
挖洞
有了半透明层后，我们需要在界面上挖洞，挖出的形状需要视觉定义，之后将两层叠加进行处理，这里我们可以设置后一个图片的PorterDuffXfermode属性，我们设置属性为PorterDuff.Mode.DST_OUT，将后面部分露出，因此我们需要在前一次的基础上进行处理：
canvas.saveLayer(0, 0, width, height, null, Canvas.ALL_SAVE_FLAG);
canvas.drawRect(0, 0, width, height, paint);
canvas.drawBitmap(mask, upLeft, upTop, paint1);
canvas.restore();这里主要是新开了一个Layer
其次将Mask绘制到View，paint1设置了Xfermode属性为new PorterDuffXfermode(PorterDuff.Mode.DST_OUT)
扫描
扫描效果是独立与上面的View，只是位置上是在挖洞的位置，因此我们需要单独处理，这里我们扫描动画分为两个，一个向左，一向右，这里原理是与上面一致的，也是每次调整扫描View的宽度，因此我们需要裁剪一个与空洞相同大小的扫描层，每次改变扫描图形的宽度，因此这里我们需要对paint设置Xfermode的属性为SRC_IN，保证相交部分上部分露出。
裁剪后，我们只需要每次更改扫描图形的宽度，这里我们可以动态改变每次的宽度，我们可以采用一个ValueAnimator来动态改变宽度，也可以采用Handler加postDelayed来实现，这里采用ValueAnimator来实现，ValueAnimator重复执行：
canvas.saveLayer(0, 0, width, height, null, Canvas.ALL_SAVE_FLAG);
canvas.translate(upLeft, upTop);
canvas.drawRect(startX, 0, endX, faceH, paint3);
canvas.drawBitmap(left2Right ? leftScan : rightScan, 0, 0, paint2);
canvas.translate(-upLeft, -upTop);
canvas.restore();这里我们继续在刚才的View上叠加，我们新创建一个Layer，在新的Layer上进行绘制，canvas.translate其实可以不执行，不需要将原点移动到空洞的左上角，如果不移动这里需要注意叠加位置。
首先我们绘制一个动态改变的矩形框
将扫描图片与矩形框融合，这里需要注意的是两个扫描图片是不同的，因此在转向的时候需要绘制对应的图形
在交替的时候，我们动态改变paint2的alpha值，实现渐变消失的效果
代码
完整代码如下：
public class ScanView extends View
int width;
int height;
private Paint paint, paint1, paint2, paint3;
private Bitmap mask, rect, leftScan, rightScan;
private float ratio = 0.55f;
private int upLeft, upTop;
private int downLeft, downTop;
private int faceW, faceH;
private ValueAnimator animator;
private int offset, startX, endX;
public static final int OFFSET_ONE_TIME = 5;
public static final int STAY_TIME = 25 * OFFSET_ONE_TIME;
public ScanView(Context context)
super(context);
init(context, null);
public ScanView(Context context, @Nullable AttributeSet attrs)
super(context, attrs);
init(context, attrs);
public ScanView(Context context, @Nullable AttributeSet attrs, int defStyleAttr)
super(context, attrs, defStyleAttr);
init(context, attrs);
private void init(Context context, AttributeSet attrs)
mask = BitmapFactory.decodeResource(context.getResources(), R.drawable.face_mask);
rect = BitmapFactory.decodeResource(context.getResources(), R.drawable.face_rect);
leftScan = BitmapFactory.decodeResource(context.getResources(), R.drawable.up_left_scan);
rightScan = BitmapFactory.decodeResource(context.getResources(), R.drawable.up_right_scan);
faceW = mask.getWidth();
faceH = mask.getHeight();
paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.parseColor("#4C0C0F3C"));
paint1 = new Paint();
paint1.setAntiAlias(true);
paint1.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
paint2 = new Paint();
paint2.setAntiAlias(true);
paint2.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
paint3 = new Paint();
paint3.setAntiAlias(true);
paint3.setColor(Color.parseColor("#000000"));
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
super.onSizeChanged(w, h, oldw, oldh);
width = w;
height = h;
upLeft = width / 2 - mask.getWidth() / 2;
upTop = (int) (height * ratio / 2 - mask.getHeight() / 2);
downLeft = width / 2 - mask.getWidth() / 2;
downTop = (int) (((height * (1 - ratio)) / 2 - mask.getHeight() / 2) + height * ratio);
scan();
private void scan()
ValueAnimator animator = getAnimator();
animator.start();
public void stop()
if (animator != null)
animator.cancel();
boolean left2Right = true;
@NonNull
private ValueAnimator getAnimator()
if (animator == null)
animator = ValueAnimator.ofFloat(0.0f, 1.0f);
animator.setDuration(3000);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setRepeatMode(ValueAnimator.REVERSE);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
@Override
public void onAnimationUpdate(ValueAnimator animation)
if (left2Right)
offset += OFFSET_ONE_TIME;
startX = 0;
if (offset > faceW + STAY_TIME)
left2Right = false;
endX = faceW;
else if (offset > faceW)
paint2.setAlpha(paint2.getAlpha() - 10);
endX = faceW;
else
endX = offset < 0 ? 0 : offset;
paint2.setAlpha(255);
else
offset -= OFFSET_ONE_TIME;
if (offset < -STAY_TIME)
left2Right = true;
startX = 0;
else if (offset < 0)
startX = 0;
paint2.setAlpha(paint2.getAlpha() - 10);
else
startX = offset > faceW ? faceW : offset;
paint2.setAlpha(255);
endX = faceW;
invalidate();
);
return animator;
@Override
protected void onDraw(Canvas canvas)
super.onDraw(canvas);
canvas.saveLayer(0, 0, width, height, null, Canvas.ALL_SAVE_FLAG);
canvas.drawRect(0, 0, width, height, paint);
canvas.drawBitmap(mask, upLeft, upTop, paint1);
canvas.drawBitmap(mask, downLeft, downTop, paint1);
canvas.restore();
canvas.saveLayer(0, 0, width, height, null, Canvas.ALL_SAVE_FLAG);
canvas.translate(upLeft, upTop);
canvas.drawRect(startX, 0, endX, faceH, paint3);
canvas.drawBitmap(left2Right ? leftScan : rightScan, 0, 0, paint2);
canvas.translate(-upLeft, -upTop);
canvas.restore();
canvas.drawBitmap(rect, upLeft, upTop, null);
canvas.drawBitmap(rect, downLeft, downTop, null);
@Override
protected void onDetachedFromWindow()
super.onDetachedFromWindow();
stop();
- 这里需要注意的几点是设置ValueAnimator的重复次数为INFINITE
- 我们采用了每次改变位置的方式来动态改变裁剪的位置，STAY_TIME表示渐变消失的位置移动距离
- 对所使用的bitmap提前加载
- 这里我们还可以采用自定义属性来定义是否自动开启，半透明颜色，这里都硬编码了
运行效果
完成后，我们可以动态运行一下该效果，我们将自定义View使用在界面中，这里界面上加入了一个背景图片，界面布局代码如下：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg"
tools:context="com.demo.example.activity.MoveActivity">
<com.demo.example.widget.ScanView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible"/>
</FrameLayout>主要是为了显示效果，效果如下，这里由于上传限制，压缩了一个比较小的gif：
code
源代码如下：
Code
以上是关于扫脸动画的主要内容，如果未能解决你的问题，请参考以下文章