上一篇寫了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實現(xiàn)過程分析
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()欣硼，調試的時候發(fā)現(xiàn)調用了setBounds()，但不知道什么調用的**恶阴，知道的大神評論區(qū)說一下诈胜。
太陽輻射光芒----computeRender計算過程分析
同樣是用過預先設置好的節(jié)點來作為判斷點計算，已經上升了冯事，但是還沒開始旋轉焦匈，即輻射光芒的時間段：
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;
//角度變量除以光線之間的角度得到當前輻射出來的個數(shù)
if ((int) (mSunRayRotation / SUN_RAY_INTERVAL_DEGREE) <= MAX_SUN_RAY_COUNT) {
mIsExpandSunRay = true;
mSunRayCount = (int) (mSunRayRotation / SUN_RAY_INTERVAL_DEGREE);
}
//剩余的旋轉角度來計算 光線數(shù)目 等下結合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實現(xiàn)過程分析
draw過程只要關注下面的代碼就可以了：
//繪制太陽光芒的個數(shù)
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
//輻射光芒的主要難點在這里，這里控制陽光的出現(xiàn)和消失昵仅，可以逐個刪除增加參數(shù)缓熟，查看各參數(shù)作用
canvas.rotate(45 - mSunRayRotation
+ (mIsExpandSunRay ? i : MAX_SUN_RAY_COUNT - i) * DEGREE_360 / MAX_SUN_RAY_COUNT,
arcBounds.centerX(), mSunCoordinateY);
//這里去掉了-mSunRayRotation 發(fā)現(xiàn)光線不能一邊旋轉一邊消失，整個太陽不再旋轉岩饼。非常值得學習荚虚。詳見下圖
//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用來控制光線的逐漸增加和逐漸消失薛夜，通過三目運算實現(xiàn)籍茧。
去掉-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);
//星星上升的過程節(jié)點分別比較。
if (starProgress <= STAR_RISE_PROGRESS_OFFSET) {
//循環(huán)初始化晚伙，每個星星的位置變量
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則是函數(shù)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值來實現(xiàn)閃爍效果午磁，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部分實現(xiàn)
這部分就比較簡單了迅皇，沒什么好說的昧辽，按照進度直接繪制就可以了，通過改變StarHolder的屬性來執(zhí)行登颓。
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開發(fā)中基本知識搅荞。敬請期待。
