扫脸动画

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

以上是关于扫脸动画的主要内容,如果未能解决你的问题,请参考以下文章

扫脸动画

扫脸动画

为啥 NavigationView 中的动画从左上角开始?

UIBezierPath 动画 - 对象固定在左上角

在 iOS 上的动画期间防止视图从左上角弹出

从左上到右下的 SVG 动画