android 星星流逝动画,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开发中基本知识。敬请期待。