关于android:效果炸了Android自定义View实现一个炫酷的时钟

38次阅读

共计 12768 个字符,预计需要花费 32 分钟才能阅读完成。

一、背景

1.1、控件成果

要实现的自定义控件成果大抵如下,实现过程中用到了比拟多的自定义 View 的 API,感觉比拟有代表性,就分享进去也当做学习总结 我的项目代码已上传 github :https://github.com/DaLeiGe/An…


1.2、从性能上剖析一下这个控件,大抵有以下特点
  • 随机静止粒子从圆周向圆心静止,并与切线方向有正负 30°的角度差,粒子透明度、半径、静止速度随机,静止超过肯定间隔或者工夫隐没
  • 背景圆有一个从内到外的渐变色
  • 计时模式下圆环有一个色彩突变的顺时针 rotate 动画
  • 整个背景圆色彩随着扇形角度变动而变动
  • 指针色彩变动
  • 数字变动是高低切换动画
1.3、从构造上剖析

这个控件能够拆分为两个局部,由背景圆 + 数字控件两个局部形成的组合控件,之所以把数字控件独自拆分进去,也是为了不便做数字上下跳动的动画,毕竟通过管制 drawText 的地位实现动画感觉不不便,间接通过 View 的属性动画更好实现

二、背景圆实现

2.1、实现粒子静止

应用 AnimPoint.java 示意静止粒子,它具备 x,y 坐标,半径,角度,静止速度,透明度等属性,通过这些属性就能够画出一个动态的粒子

public class AnimPoint implements Cloneable {
    /**
     * 粒子原点 x 坐标
     */
    private float mX;
    /**
     * 粒子原点 y 坐标
     */
    private float mY;
    /**
     * 粒子半径
     */
    private float radius;
    /**
     * 粒子初始地位的角度
     */
    private double anger;
    /**
     * 一帧挪动的速度
     */
    private float velocity;
    /**
     * 总共挪动的帧数
     */
    private int num = 0;

    /**
     * 透明度 0~255
     */
    private int alpha = 153;

    /**
     * 随机偏移角度
     */
    private double randomAnger = 0;
}

粒子的初始地位位于随机角度的圆周,且一个粒子具备随机的半径,透明度,速度等,通过 init() 办法,实现初始化粒子如下

public void init(Random random, float viewRadius) {anger = Math.toRadians(random.nextInt(360));
        velocity = random.nextFloat() * 2F;
        radius = random.nextInt(6) + 5;
        mX = (float) (viewRadius * Math.cos(anger));
        mY = (float) (viewRadius * Math.sin(anger));
        // 随机偏移角度 -30°~30°
        randomAnger = Math.toRadians(30 - random.nextInt(60));
        alpha = 153 + random.nextInt(102);
    }

想让粒子静止起来,应用 update 更新粒子的这些坐标属性就能实现,比方粒子当初坐标在 (5,5)`,通过update() 扭转粒子的坐标到 (6,6), 联合属性动画不停地调用update() 则就能不停的扭转 x,y 的坐标,实现粒子静止,而后当粒子挪动超过肯定间隔,或者调用 update 超过肯定次数,再从新调用 init() 让粒子从新从圆周上开始下一个生命周期静止

public void updatePoint(Random random, float viewRadius) {
        // 每一帧偏移的像素大小
        float distance = 1F;
        double moveAnger = anger + randomAnger;
        mX = (float) (mX - distance * Math.cos(moveAnger) * velocity);
        mY = (float) (mY - distance * Math.sin(moveAnger) * velocity);
        // 模仿半径逐步变小
        radius = radius - 0.02F * velocity;
        num++;
        // 如果到了最大值 则从新给静止粒子一个轨迹属性
        int maxDistance = 180;
        int maxNum = 400;
        if (velocity * num > maxDistance || num > maxNum) {
            num = 0;
            init(random, viewRadius);
        }
    }

在 View 中大抵实现如下

/**
     * 初始化动画
     */
    private void initAnim() {
        // 绘制静止的粒子
        AnimPoint mAnimPoint = new AnimPoint();
        for (int i = 0; i < pointCount; i++) {
            // 通过 clone 创建对象,防止反复创立
            AnimPoint cloneAnimPoint = mAnimPoint.clone();
            // 先给每个粒子初始化各类属性
            cloneAnimPoint.init(mRandom, mRadius - mOutCircleStrokeWidth / 2F);
            mPointList.add(cloneAnimPoint);
        }
        // 画静止粒子
        mPointsAnimator = ValueAnimator.ofFloat(0F, 1F);
        mPointsAnimator.setDuration(Integer.MAX_VALUE);
        mPointsAnimator.setRepeatMode(ValueAnimator.RESTART);
        mPointsAnimator.setRepeatCount(ValueAnimator.INFINITE);
        mPointsAnimator.addUpdateListener(animation -> {for (AnimPoint point : mPointList) {
                // 通过属性动画不停的计算下粒子的下一个坐标
                point.updatePoint(mRandom, mRadius);
            }
            invalidate();});
        mPointsAnimator.start();}

    @Override
    protected void onDraw(final Canvas canvas) {super.onDraw(canvas);
        canvas.save();
        canvas.translate(mCenterX, mCenterY);
        // 画静止粒子
        for (AnimPoint animPoint : mPointList) {mPointPaint.setAlpha(animPoint.getAlpha());
            canvas.drawCircle(animPoint.getmX(), animPoint.getmY(),
                    animPoint.getRadius(), mPointPaint);
        }
     }
2.2、实现渐变色圆

实现圆从内到外突变应用RadialGradient 大抵实现形式如下

float[] mRadialGradientStops = {0F, 0.69F, 0.86F, 0.94F, 0.98F, 1F};
mRadialGradientColors[0] = transparentColor;
mRadialGradientColors[1] = transparentColor;
mRadialGradientColors[2] = parameter.getInsideColor();
mRadialGradientColors[3] = parameter.getOutsizeColor();
mRadialGradientColors[4] = transparentColor;
mRadialGradientColors[5] = transparentColor;
mRadialGradient = new RadialGradient(
                    0,
                    0,
                    mCenterX,
                    mRadialGradientColors,
                    mRadialGradientStops,
                    Shader.TileMode.CLAMP);
mSweptPaint.setShader(mRadialGradient);

...
//onDraw()绘制
canvas.drawCircle(0, 0, mCenterX, mSweptPaint);
2.3、展现背景圆的扇形区域

本来想通过 DrawArc 实现这个成果,然而 DrawArc 无奈实现到圆心的区域

那么如何实现这么一个不规则的形态呢,能够应用 canvas.clipPath() 实现裁剪不规则的形态,所以只有失去扇形的 Path 就能实现,通过圆点 + 弧形再闭合 path 就能实现

/**
     * 绘制扇形 path
     *
     * @param r 半径
     * @param startAngle 开始角度
     * @param sweepAngle 扫过的角度
     */
private void getSectorClip(float r, float startAngle, float sweepAngle) {mArcPath.reset();
        mArcPath.addArc(-r, -r, r, r, startAngle, sweepAngle);
        mArcPath.lineTo(0, 0);
        mArcPath.close();}

// 而后再 onDraw()中,裁剪画布
 canvas.clipPath(mArcPath);
2.4、实现指针变色

指针是不规则形态,无奈通过绘制几何图形实现,所以选用 drawBitmap 实现

至于如何实现 bitmap 指针图片的色彩变动呢,本来的计划是应用 AvoidXfermode 扭转指定像素通道范畴内的色彩,然而 AvoidXfermode 在 API 24 曾经被移除,所以这计划有效

最终采纳图层混合模式实现指针图片变色

通过 PorterDuff.Mode.MULTIPLY 模式能够实现 bitmap 色彩,源图像为要批改的指针色彩,指标图像为红色指针,通过获取两个图像的重叠局部实现变色 大抵实现如下

/**
     * 初始化指针图片的 Bitmap
     */
    private void initBitmap() {
        float f = 130F / 656F;
        mBitmapDST = BitmapFactory.decodeResource(getResources(), R.drawable.indicator);
        float mBitmapDstHeight = width * f;
        float mBitmapDstWidth = mBitmapDstHeight * mBitmapDST.getWidth() / mBitmapDST.getHeight();
        // 初始化指针的图层混合模式
        mXfermode = new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY);
        mPointerRectF = new RectF(0, 0, mBitmapDstWidth, mBitmapDstHeight);
        mBitmapSRT = Bitmap.createBitmap((int) mBitmapDstWidth, (int) mBitmapDstHeight, Bitmap.Config.ARGB_8888);
        mBitmapSRT.eraseColor(mIndicatorColor);
    }

    @Override
    protected void onDraw(final Canvas canvas) {super.onDraw(canvas);
        // 画指针
       canvas.translate(mCenterX, mCenterY);
       canvas.rotate(mCurrentAngle / 10F);
       canvas.translate(-mPointerRectF.width() / 2, -mCenterY);
       mPointerLayoutId = canvas.saveLayer(mPointerRectF, mBmpPaint);
       mBitmapSRT.eraseColor(mIndicatorColor);
       canvas.drawBitmap(mBitmapDST, null, mPointerRectF, mBmpPaint);
       mBmpPaint.setXfermode(mXfermode);
       canvas.drawBitmap(mBitmapSRT, null, mPointerRectF, mBmpPaint);
       mBmpPaint.setXfermode(null);
       canvas.restoreToCount(mPointerLayoutId);
    }
2.5、实现背景圆色彩随扇形角度变动

把圆形控件拆成 3600°,每一个角度对应控件一种具体色彩值,那么如何计算特定角度他具体的色彩值呢?

参考属性动画中的变色动画 android.animation.ArgbEvaluator 实现形式,计算两个色彩中具体某一个点的色彩值形式如下

public Object evaluate(float fraction, Object startValue, Object endValue) {int startInt = (Integer) startValue;
     float startA = ((startInt >> 24) & 0xff) / 255.0f;
     float startR = ((startInt >> 16) & 0xff) / 255.0f;
     float startG = ((startInt >>  8) & 0xff) / 255.0f;
     float startB = (startInt        & 0xff) / 255.0f;

     int endInt = (Integer) endValue;
     float endA = ((endInt >> 24) & 0xff) / 255.0f;
     float endR = ((endInt >> 16) & 0xff) / 255.0f;
     float endG = ((endInt >>  8) & 0xff) / 255.0f;
     float endB = (endInt        & 0xff) / 255.0f;

     // convert from sRGB to linear
     startR = (float) Math.pow(startR, 2.2);
     startG = (float) Math.pow(startG, 2.2);
     startB = (float) Math.pow(startB, 2.2);

     endR = (float) Math.pow(endR, 2.2);
     endG = (float) Math.pow(endG, 2.2);
     endB = (float) Math.pow(endB, 2.2);

     // compute the interpolated color in linear space
     float a = startA + fraction * (endA - startA);
     float r = startR + fraction * (endR - startR);
     float g = startG + fraction * (endG - startG);
     float b = startB + fraction * (endB - startB);

     // convert back to sRGB in the [0..255] range
     a = a * 255.0f;
     r = (float) Math.pow(r, 1.0 / 2.2) * 255.0f;
     g = (float) Math.pow(g, 1.0 / 2.2) * 255.0f;
     b = (float) Math.pow(b, 1.0 / 2.2) * 255.0f;

     return Math.round(a) << 24 | Math.round(r) << 16 | Math.round(g) << 8 | Math.round(b);
 }

控件中总共有四个色彩段,3600/4=900,所以 fraction = progressValue % 900 / 900;而后判断以后的角度位于第几段色彩值中,通过 android.animation.ArgbEvaluator.evaluate(float fraction, Object startValue, Object endValue) 就能回去具体的色彩值

大抵实现过程如下

private ProgressParameter getProgressParameter(float progressValue) {
        float fraction = progressValue % 900 / 900;
        if (progressValue < 900) {
            // 第一个色彩段
            mParameter.setInsideColor(evaluate(fraction, insideColor1, insideColor2));
            mParameter.setOutsizeColor(evaluate(fraction, outsizeColor1, outsizeColor2));
            mParameter.setProgressColor(evaluate(fraction, progressColor1, progressColor2));
            mParameter.setPointColor(evaluate(fraction, pointColor1, pointColor2));
            mParameter.setBgCircleColor(evaluate(fraction, bgCircleColor1, bgCircleColor2));
            mParameter.setIndicatorColor(evaluate(fraction, indicatorColor1, indicatorColor2));
        } else if (progressValue < 1800) {
            // 第二个色彩段
            mParameter.setInsideColor(evaluate(fraction, insideColor2, insideColor3));
            mParameter.setOutsizeColor(evaluate(fraction, outsizeColor2, outsizeColor3));
            mParameter.setProgressColor(evaluate(fraction, progressColor2, progressColor3));
            mParameter.setPointColor(evaluate(fraction, pointColor2, pointColor3));
            mParameter.setBgCircleColor(evaluate(fraction, bgCircleColor2, bgCircleColor3));
            mParameter.setIndicatorColor(evaluate(fraction, indicatorColor2, indicatorColor3));
        } else if (progressValue < 2700) {
            // 第三个色彩段
            mParameter.setInsideColor(evaluate(fraction, insideColor3, insideColor4));
            mParameter.setOutsizeColor(evaluate(fraction, outsizeColor3, outsizeColor4));
            mParameter.setProgressColor(evaluate(fraction, progressColor3, progressColor4));
            mParameter.setPointColor(evaluate(fraction, pointColor3, pointColor4));
            mParameter.setBgCircleColor(evaluate(fraction, bgCircleColor3, bgCircleColor4));
            mParameter.setIndicatorColor(evaluate(fraction, indicatorColor3, indicatorColor4));
        } else {
            // 第四个色彩段
            mParameter.setInsideColor(evaluate(fraction, insideColor4, insideColor5));
            mParameter.setOutsizeColor(evaluate(fraction, outsizeColor4, outsizeColor5));
            mParameter.setProgressColor(evaluate(fraction, progressColor4, progressColor5));
            mParameter.setPointColor(evaluate(fraction, pointColor4, pointColor5));
            mParameter.setBgCircleColor(evaluate(fraction, bgCircleColor4, bgCircleColor5));
            mParameter.setIndicatorColor(evaluate(fraction, indicatorColor4, indicatorColor5));
        }
        return mParameter;
    }

三、跳动数字动画实现

3.1、属性动画 + 2 个 TextView 实现数字高低切换动画

实现数字切换动画,本来打算用 RecycleView 实现,然而思考到动效上未来可能面临 UI 小姐姐各种骚操作,所以最终决定就用两个 TextView 做高低 translation 动画,这样可控性高,对 View 执行属性动画也简略

NumberView应用 FrameLayout 包裹两个TextViewwidget_progress_number_item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_number_one"
        style="@style/progress_text_font"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:padding="0dp"
        android:text="0"
        android:textColor="@android:color/white" />

    <TextView
        style="@style/progress_text_font"
        android:id="@+id/tv_number_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="1"
        android:textColor="@android:color/white" />
</FrameLayout>

而后通过属性动画管制两个 TextView 高低切换

mNumberAnim = ValueAnimator.ofFloat(0F, 1F);
        mNumberAnim.setDuration(400);
        mNumberAnim.setInterpolator(new OvershootInterpolator());
        mNumberAnim.setRepeatCount(0);
        mNumberAnim.setRepeatMode(ValueAnimator.RESTART);
        mNumberAnim.addUpdateListener(animation -> {float value = (float) animation.getAnimatedValue();
            if (UP_OR_DOWN_MODE == UP_ANIMATOR_MODE) {
                // 数字变大,向下挪动
                mTvFirst.setTranslationY(-mHeight * value);
                mTvSecond.setTranslationY(-mHeight * value);
            } else {
                // 数字变小,向上挪动
                mTvFirst.setTranslationY(mHeight * value);
                mTvSecond.setTranslationY(-2 * mHeight + mHeight * value);
            }
        });

这样 NumberView 就能实现一位数字的变动是高低切换动画,具备个十百位还有时钟冒号的通过容器布局 AnimNumberView 组合布局的形式实现示意工夫和个十百位数

四、我的项目源码

博客只是大抵讲了实现思路,具体实现请浏览源码 https://github.com/DaLeiGe/An…
原文链接:https://juejin.cn/post/698407…

文末

您的点赞珍藏就是对我最大的激励!
欢送关注我,分享 Android 干货,交换 Android 技术。
对文章有何见解,或者有何技术问题,欢送在评论区一起留言探讨!

正文完
 0