android仿网易云孤独星球音效

目录表

这是最终的实现效果（左上），主要包括波纹扩散效果、圆球旋转缩小效果及颜色渐变效果。

在这里插入图片描述

实现分析

此效果是由一个整体的自定义view绘制而成。其中波纹扩散效果，是通过定时改变波纹半径实现的，此波纹是由先后两个空心圆组成，在实现过程中要注意时间和各自的尺寸变化。这是参考代码：

    public void startAnima() {
        if(drawTimingThread != null) {

            drawTimingThread.sendEmptyMessage(MSG_DRAW0);//开始1波纹

            float time = (mRMaxRadius - mRMinRadius) / distance * 0.5f;//先取整，再取中
            drawTimingThread.sendEmptyMessageDelayed(MSG_DRAW1, (int)(animaBotIntervalTime * time));//定时开启2波纹
        }
    }

这是波纹1的半径变化，参考代码如下：

        if(mCurRadius0 <= mRMaxRadius){
            mCurRadius0 += distance;
        }else{
            mCurRadius0 = mRMinRadius + distance;
        }

        circlePointF0 = drawCircleOnRipple(MSG_DRAW0, curIndex0);

        mRPaint0.setAlpha(getAlphaOfRipple(curIndex0));//透明度
        mCirclePaint0.setAlpha(getAlphaOfRipple(curIndex0));
        curRadius0 = getRadiusOnRipple(curIndex0);

        curIndex0 ++;
        if(curIndex0 > (mRMaxRadius - mRMinRadius) / distance)
            curIndex0 = 0;

        cancleHandle(MSG_DRAW0);

圆球效果同样是定时绘制的结果，平滑运动只是错觉。在这里是每隔200ms（波纹的定时值）在相应的位置进行绘制的，由于波纹扩散周期较短，所以我将圆球的隔旋转周期定为了45度，可根据业务自行修改。这里的难点是在于怎么找到圆球的圆心坐标，即根据圆心坐标，半径，扇形角度来求扇形终射线与圆弧交叉点的xy坐标的问题。这个方法我已经在android自定义view系列之圆环刻度条介绍过了，有兴趣的可以看下，或者直接在github上查看项目代码。圆球参考代码如下：

    private PointF drawCircleOnRipple(int msg, int index) {

        //周期开始，随机初始角度
        if(index == 0)
            if(msg == MSG_DRAW0)
                cirAngel0 = (float) (Math.random() * - 360 + 180);
            else
                cirAngel1 = (float) (Math.random() * - 360 + 180);

        PointF progressPoint = CommentUtils
                .calcArcEndPointXY(mRMaxRadius + getPaddingLeft() + mStrokeWidth
                        , mRMaxRadius + getPaddingTop() + mStrokeWidth
                        , msg == MSG_DRAW0 ? mCurRadius0 : mCurRadius1
                        //每个周期旋转45度
                        , (msg == MSG_DRAW0 ? curIndex0 : curIndex1) * 1.0f / ((mRMaxRadius - mRMinRadius) / distance) * 45f
                        , msg == MSG_DRAW0 ? cirAngel0 : cirAngel1);

        return progressPoint;
    }

圆球的不断缩小效果，也是定时改变半径进行绘制的结果，很常规，在这里就不细说了。波纹和圆球的颜色渐变效果，由于不是渐变到全透明，所以我的alpha取值范围105-255，参考代码如下：

    private int getAlphaOfRipple(int curIndex) {
        int alpha = curIndex * 150 * distance / (mRMaxRadius - mRMinRadius);//只取150的二进制
        return 255 - alpha;
    }

其余具体实现方法我就不细说了，源码我放在了gitHub上，有需要的可以clone or download。

gitHub - CustomViewCollection

mjzuo博客列表传送阵

mjzuo 博客专家

发布了63 篇原创文章 · 获赞 191 · 访问量 17万+

私信关注