上一篇写了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开发中基本知识。敬请期待。
