Android Loading动画分析--续集

上一篇写了DayNightLoading的代码流程及关键类，今天周末好好分析一下其中computeRender(float renderProgress)与draw(Canvas canvas, Rect bounds)具体的计算过程，如果大家还有印象话，在AnimatorUpdateListener中调用的顺序是先计算Render即computeRender再调用的invalidateSelf，其实其中时由render来计算太阳、月亮、星星的位置的。这里有个小tips，这种动画过程分析，可以拆成每一小部分的变化，通过注释和打开注释各个部分，查看各部分的作用，逐一分析。

太阳上升----computeRender计算过程分析

首先来看太阳最开始升起的过程：

//太阳升起的过程
        if (renderProgress <= SUN_RISE_DURATION_OFFSET) {
            //获取当前升起的位置，sunRiseProgress从0-1变化。
            float sunRiseProgress = renderProgress / SUN_RISE_DURATION_OFFSET;
            //这里计算当前太阳应该绘制的高度 采用初始高度mInitSun$MoonCoordinateY - 最大高度mMaxSun$MoonRiseDistance*插值器
            mSunCoordinateY = mInitSun$MoonCoordinateY - mMaxSun$MoonRiseDistance * MATERIAL_INTERPOLATOR.getInterpolation(sunRiseProgress);
            //当前月亮的高度不变，还没有升起来，还在最下面
            mMoonCoordinateY = mInitSun$MoonCoordinateY;
            //标记月亮还没有升起来
            mShowStar = false;
        }

太阳上升----draw实现过程分析

if (mSunCoordinateY < mInitSun$MoonCoordinateY) {
            canvas.drawCircle(arcBounds.centerX(), mSunCoordinateY, mSun$MoonRadius, mPaint);
        }

太阳高度小于初始高度就画圆。我这里有一点不明白arcBounds.centerX()这里的arcBounds是draw(canvas,bounds)中传过来的bounds，这个draw方法在loadingDrawable中调用的：

@Override
    public void draw(Canvas canvas) {
        Rect a = getBounds();
        mLoadingRender.draw(canvas, a);
    }

** 但是Drawable的内部变量mBounds不知道什么时候赋值的，即不知道什么时候调用的setBounds()，调试的时候发现调用了setBounds()，但不知道什么调用的**，知道的大神评论区说一下。

太阳辐射光芒----computeRender计算过程分析

同样是用过预先设置好的节点来作为判断点计算，已经上升了，但是还没开始旋转，即辐射光芒的时间段：

if (renderProgress <= SUN_ROTATE_DURATION_OFFSET && renderProgress > SUN_RISE_DURATION_OFFSET) {
            //0-1之间的表征过程的变量
            float sunRotateProgress = (renderProgress - SUN_RISE_DURATION_OFFSET) / (SUN_ROTATE_DURATION_OFFSET - SUN_RISE_DURATION_OFFSET);
            //0-120的角度变量
            mSunRayRotation = sunRotateProgress * MAX_SUN_ROTATE_DEGREE;
            //角度变量除以光线之间的角度得到当前辐射出来的个数
            if ((int) (mSunRayRotation / SUN_RAY_INTERVAL_DEGREE) <= MAX_SUN_RAY_COUNT) {
                mIsExpandSunRay = true;
                mSunRayCount = (int) (mSunRayRotation / SUN_RAY_INTERVAL_DEGREE);
            }

            //剩余的旋转角度来计算 光线数目  等下结合draw来看
            if ((int) ((MAX_SUN_ROTATE_DEGREE - mSunRayRotation) / SUN_RAY_INTERVAL_DEGREE) <= MAX_SUN_RAY_COUNT) {
                mIsExpandSunRay = false;
                mSunRayCount = (int) ((MAX_SUN_ROTATE_DEGREE - mSunRayRotation) / SUN_RAY_INTERVAL_DEGREE);
            }
        }

太阳辐射光芒----draw实现过程分析

draw过程只要关注下面的代码就可以了：

//绘制太阳光芒的个数
        for (int i = 0; i < mSunRayCount; i++) {
            int sunRaySaveCount = canvas.save();

            //rotate 45 degrees can change the direction of 0 degrees to 1:30 clock
            //-mSunRayRotation means reverse rotation
            //辐射光芒的主要难点在这里，这里控制阳光的出现和消失，可以逐个删除增加参数，查看各参数作用
            canvas.rotate(45 - mSunRayRotation
                            + (mIsExpandSunRay ? i : MAX_SUN_RAY_COUNT - i) * DEGREE_360 / MAX_SUN_RAY_COUNT,
                    arcBounds.centerX(), mSunCoordinateY);

            //这里去掉了-mSunRayRotation 发现光线不能一边旋转一边消失，整个太阳不再旋转。非常值得学习。详见下图
            //canvas.rotate(45
            //+ (mIsExpandSunRay ? i : MAX_SUN_RAY_COUNT - i) * DEGREE_360 / MAX_SUN_RAY_COUNT,
            //arcBounds.centerX(), mSunCoordinateY);

            
            canvas.drawLine(arcBounds.centerX(), mSunRayStartCoordinateY, arcBounds.centerX(), mSunRayEndCoordinateY, mPaint);
            
            canvas.restoreToCount(sunRaySaveCount);
        }

其中mIsExpandSunRay用来控制光线的逐渐增加和逐渐消失，通过三目运算实现。

去掉-mSunRayRotation后.gif

星星部分----computeRender

 //星星上升，并闪烁
        if (renderProgress <= STAR_DECREASE_START_DURATION_OFFSET && renderProgress > STAR_RISE_START_DURATION_OFFSET) {
            //又是一个0-1之间的变量，可以看出整个动画分解后，每个小部分也是0-1之间变化的
            float starProgress = (renderProgress - STAR_RISE_START_DURATION_OFFSET) / (STAR_DECREASE_START_DURATION_OFFSET - STAR_RISE_START_DURATION_OFFSET);
            //星星上升的过程节点分别比较。
            if (starProgress <= STAR_RISE_PROGRESS_OFFSET) {
                //循环初始化，每个星星的位置变量
                for (int i = 0; i < mStarHolders.size(); i++) {
                    StarHolder starHolder = mStarHolders.get(i);
                    //这里的y值，只是通过插值器计算的，感兴趣可以自己去改变调试一下效果。
                    starHolder.mCurrentPoint.y = starHolder.mPoint.y - (1.0f - starHolder.mInterpolator.getInterpolation(starProgress * 5.0f)) * (mMaxStarOffsets * 0.65f);
                    //x则是函数initStarHolders初始化调用时传值进去的。
                    starHolder.mCurrentPoint.x = starHolder.mPoint.x;
                }
            }

            //这里就是星星闪烁 的 关键了！
            if (starProgress > STAR_RISE_PROGRESS_OFFSET && starProgress < STAR_DECREASE_PROGRESS_OFFSET) {
                for (int i = 0; i < mStarHolders.size(); i++) {
                    StarHolder starHolder = mStarHolders.get(i);
                    if (starHolder.mFlashOffset < starProgress && starProgress < starHolder.mFlashOffset + STAR_FLASH_PROGRESS_PERCENTAGE) {
                        //通过改变alpha值来实现闪烁效果，mFlashOffset是初始化设置的，星星当前亮还是灭，看插值器（慢进快出）的值
                        starHolder.mAlpha = (int) (MAX_ALPHA * MATERIAL_INTERPOLATOR.getInterpolation(
                                Math.abs(starProgress - (starHolder.mFlashOffset + STAR_FLASH_PROGRESS_PERCENTAGE / 2.0f)) / (STAR_FLASH_PROGRESS_PERCENTAGE / 2.0f)));
                    }
                }
            }

            //星星下降了
            if (starProgress >= STAR_DECREASE_PROGRESS_OFFSET) {
                for (int i = 0; i < mStarHolders.size(); i++) {
                    StarHolder starHolder = mStarHolders.get(i);
                    starHolder.mCurrentPoint.y = starHolder.mPoint.y + starHolder.mInterpolator.getInterpolation((starProgress - STAR_DECREASE_PROGRESS_OFFSET) * 5.0f) * mMaxStarOffsets;
                    starHolder.mCurrentPoint.x = starHolder.mPoint.x;
                }
            }
            mShowStar = true;
        }

星星draw部分实现

这部分就比较简单了，没什么好说的，按照进度直接绘制就可以了，通过改变StarHolder的属性来执行。

if (mShowStar) {
            if (mStarHolders.isEmpty()) {
                initStarHolders(arcBounds);
            }

            for (int i = 0; i < mStarHolders.size(); i++) {
                mPaint.setStyle(Paint.Style.FILL);
                mPaint.setAlpha(mStarHolders.get(i).mAlpha);
                canvas.drawCircle(mStarHolders.get(i).mCurrentPoint.x, mStarHolders.get(i).mCurrentPoint.y, mStarRadius, mPaint);
            }
        }

下一篇介绍一些JavaWeb开发中基本知识。敬请期待。