可交互的有趣的LoadingView

image

前言(废话)

之前，公司项目刚上线，有点空闲期，于是就想做点优化。用户在使用APP操作的时候，很多时候会有操作等待，这个时候如果不进行处理，给用户的感觉就是APP卡顿，所以基本上我们都会在用户等待的时候加一个loading视图。心塞的是Google爸爸原生的loading是一个菊花效果，丑的一批，我相信大家都见识过。而且配上自己家APP的风格，完全不搭啊有木有~所以现在很多流行的APP都有一个具有自己产品的风格的loading，因此风格各异。很少有通用且能增加用户体验的一个效果。然后偶然看到了CatLoadingView这个项目，觉得很有趣。但是通过阅读源码，我觉得作者有一些地方存在一些问题，例如在不同的机型上动画效果会出现差异，再者，对于开源来说，给用户的自定义扩展程度不高；而且我觉得，这种效果要是能再多点用户交互就会锦上添花更完美了，思索了片刻之后，撸起袖子就是干！

概述

CatMouseView是一个可与用户交互的有趣的猫鼠动画自定义View，可用于用户操作时的loading等场景。在动画过程中，用户可点击屏幕捕捉老鼠，随着老鼠被抓住的次数增加，游戏的难度会逐步递增(老鼠跑动速度加快)，以此来增加用户体验效果，避免用户等待的无聊。效果图如下

image

安装

Step 1. Add the JitPack repository to your build file

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

Step 2. Add the dependency

dependencies {
  implementation 'com.github.HeYongRui:CatMouseView:v1.0.0'
}

分析

通过查看CatLoadingView的源码，理解了作者的思路，整个效果第一眼看起来觉得会很复杂，其实经过拆分，就变得很简单。其实就是利用动画对老鼠和猫眼进行同步旋转。眼睑的部分就是一个自定义矩形view根据猫眼的旋转角度动态更新眼睑高度即可，这样就可以避免CatLoadingView中出现的机型适配问题了。然后就是用户交互点击屏幕捕捉老鼠了。这里也是利用了一个自定义view，将其宽高设为和老鼠图标一样大小，然后通过点击事件的处理判断用户点击的是否在一个和老鼠重叠的圆环中，然后利用角度差进行判断是否点中老鼠。点中后，动画暂停，展示捕捉成功的UI，停留两秒后再次播放动画，并加快旋转速度，提升游戏难度。底部是渐显提示文本，用户可控制显示状态。

实现

首先设置猫眼和老鼠的同步旋转动画。因为抓住老鼠后需要接着上次的动画继续播放，所以我这里用的是属性动画，可以直接保存view更改的状态，获取到当前的旋转角度，然后设置为旋转一周(360°)的无线循环动画。动画时长会随着老鼠被抓次数的增加而减短，每次缩短500毫秒，直至最短时间。部分伪代码如下：

  float rotation = mouse.getRotation();
  rotation = rotation > 720 ? rotation % 720 : rotation;
  ObjectAnimator mouseRotationAnim = ObjectAnimator.ofFloat(mouse, "rotation", 360f + rotation, rotation);
  long duration = mAnimDuration - mCatchTime * 500;//根据抓住老鼠的次数动态设置旋转时间，提升游戏难度，每次加快500毫秒
  duration = duration < 400 ? 400 : duration;//控制最快时间为400毫秒
  mouseRotationAnim.setDuration(duration);//设置动画时间
  mouseRotationAnim.setInterpolator(new LinearInterpolator());//动画时间线性渐变
  mouseRotationAnim.setRepeatCount(ObjectAnimator.INFINITE);
  mouseRotationAnim.setRepeatMode(ObjectAnimator.RESTART);
  ObjectAnimator leftEyeRotationAnim = mouseRotationAnim.clone();
  leftEyeRotationAnim.setTarget(eyeLeft);
  ObjectAnimator rightEyeRotationAnim = mouseRotationAnim.clone();
  rightEyeRotationAnim.setTarget(eyeRight);
  mAnimatorSet = new AnimatorSet();
  mouseRotationAnim.addUpdateListener(valueAnimator -> {
        mRotateAngle = (float) valueAnimator.getAnimatedValue();
        updateEyelidHeight(mRotateAngle);
    });
  mAnimatorSet.playTogether(mouseRotationAnim, leftEyeRotationAnim, rightEyeRotationAnim);
  mAnimatorSet.start();

然后是猫眼睑的部分，猫眼睑就是一个简单的自定义view，覆盖在猫眼的上半部分即可，然后根据猫眼的旋转角度动态设置猫眼睑的高度，这里由于旋转动画暂停后可以继续从当前位置再继续旋转，所以周期为720°，对旋转角度处理后，当猫眼的处理后旋转角度在60° ~ 180°(右眼上半部分)的时候，眼睑高度需要逐渐减小，当处理后旋转角度在180° ~ 300°(左眼上半部分)时，眼睑高度逐渐增大；其余部分眼睑高度不变为最高。部分伪代码如下：

rotateAngle = rotateAngle > 360 ? rotateAngle % 360 : rotateAngle;
if (60 <= rotateAngle && rotateAngle < 180) {
    eyelidLeft.setEyelidHeightPercent((180 - rotateAngle) / 120f);
    eyelidRight.setEyelidHeightPercent((180 - rotateAngle) / 120f);
    return;
}
if (180 <= rotateAngle && rotateAngle <= 300) {
    eyelidLeft.setEyelidHeightPercent(1 - (300 - rotateAngle) / 120f);
    eyelidRight.setEyelidHeightPercent(1 - (300 - rotateAngle) / 120f);
    return;
}
eyelidLeft.setEyelidHeightPercent(1);
eyelidRight.setEyelidHeightPercent(1);

然后就是手势交互的部分了，这里也是自定义一个和老鼠view一样大小和位置的隐形view，然后判断点击的范围是否在老鼠所处的重叠圆环中，是就在点击处绘制一个猫爪，并利用动画旋转角度和猫爪点击角度比较，在一定角度差中就认为抓住老鼠，抓住老鼠后，停止动画并展示笑脸猫view，然后等待两秒后，继续开始动画并加快老鼠速度。部分伪代码如下：

mTouchX = event.getX();
mTouchY = event.getY();
float touchAngle = 0;
//点击的位置到圆心距离的平方
double distance = Math.pow(mTouchX - mRadius, 2) + Math.pow(mTouchY - mRadius, 2);
//判断点击的坐标是否在环内(利用三角函数)
if (distance < Math.pow(mRadius, 2) && distance > Math.pow(0.72 * mRadius, 2)) {
    int which = touchOnWhichPart(event);
    switch (which) {
        case PART_ONE:
            touchAngle = (float) (Math.atan2(mTouchX - mRadius, mRadius - mTouchY) * 180 / PI);
        break;
        case PART_TWO:
            touchAngle = (float) (Math.atan2(mTouchY - mRadius, mTouchX - mRadius) * 180 / PI + 90);
        break;
        case PART_THREE:
            touchAngle = (float) (Math.atan2(mRadius - mTouchX, mTouchY - mRadius) * 180 / PI + 180);
        break;
        case PART_FOUR:
            touchAngle = (float) (Math.atan2(mRadius - mTouchY, mRadius - mTouchX) * 180 / PI + 270);
        break;
    }
    //点击的是圆环内，绘制猫爪，并回调当前角度值
    mIsDrawCatClaw = true;
    invalidate();
    if (mListener != null) mListener.onClickAngle(this, touchAngle);
}

double touchAngle = angle > 180 ? (angle - 180) : (angle + 180);
float rotateAngle = mRotateAngle > 360 ? mRotateAngle % 360 : mRotateAngle;
double abs = Math.abs((rotateAngle - touchAngle));
if (abs <= 10) {//如果老鼠头的旋转角度和点击处角度误差不超过10°，就认为抓住了老鼠
    stopRotateAnim();
    catClawView1.setCanClick(false);
    smileCat.setVisibility(View.VISIBLE);
    mGraduallyTextView.stopLoading();
    mGraduallyTextView.setText("C A U G H T ");
    mCatchTime++;
    //等待2秒后加大游戏难度
    mRunnable = () -> {
        smileCat.setVisibility(View.GONE);
        catClawView1.invalidate();
        catClawView1.setCanClick(true);
        startRotateAnim();
        mGraduallyTextView.setText("C A T C H I N G ... ");
        mGraduallyTextView.startLoading();
    };
    mHandler.postDelayed(mRunnable, 2000);
}

以上就是关键部分的分析和代码，另外还有一些自定义属性的配置，使用者可以自己配置，提高扩展性。

使用

Java:

 CatMouseView catMouseView = new CatMouseView(this);
 catMouseView.setBgFilletRadius(30);
 catMouseView.setAnimDuration(3000);
 catMouseView.setBgColor(Color.MAGENTA);
 catMouseView.setIsShowGraduallyText(true);
 catMouseView.startAnim();

XML

 <com.heyongrui.catmouseview.library.CatMouseView
        android:id="@+id/loadingview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:anim_duration="2000"
        app:bg_color="@color/colorPrimary"
        app:bg_fillet_radius="@dimen/dp_10"
        app:gradually_text="L O A D I N G..."
        app:is_show_gradually_text="false"/>

也可以直接使用封装好的Dialog形式

 CatMouseDialog loadingDialog = new CatMouseDialog(MainActivity.this);
 loadingDialog.show();

github源码已上传，喜欢的给个star，欢迎小伙伴fork~