Android开源：想送你一款小清新的加载等待控件

m0_70083062

于 2022-05-06 12:19:07 发布

阅读量582

点赞数

分类专栏： Android 文章标签：经验分享面试 android

本文链接：https://blog.csdn.net/m0_70083062/article/details/124607498

版权

Android 专栏收录该内容

92 篇文章 6 订阅

订阅专栏

// ->>关注4
relate_OuterBlock(mfixedBlocks, isClock_Wise);

}
// 此步骤结束

/**

关注2：固定方块类（内部类）
*/
private class fixedBlock {

// 存储方块的坐标位置参数
RectF rectF;

// 方块对应序号
int index;

// 标志位：判断是否需要绘制
boolean isShow;

// 指向下一个需要移动的位置
fixedBlock next;
// 外部的方块序号 ≠ 0、1、2…排列，通过 next变量（指定其下一个），一个接一个连接外部方块成圈

}
// 请回到原处

/**

关注3
*：移动方块类（内部类）
*/
private class MoveBlock {
// 存储方块的坐标位置参数
RectF rectF;

// 方块对应序号
int index;

// 标志位：判断是否需要绘制
boolean isShow;

// 旋转中心坐标
// 移动时的旋转中心（X，Y）
float cx;
float cy;
}
// 请回到原处

/**

关注4：将外部方块的位置关联起来
算法思想：按照第1行、最后1行、第1列 & 最后1列的顺序，分别让每个外部方块的next属性 == 下一个外部方块的位置，最终对整个外部方块的位置进行关联
注：需要考虑移动方向变量isClockwise（顺 Or 逆时针）
*/

private void relate_OuterBlock(fixedBlock[] fixedBlocks, boolean isClockwise) {
int lineCount = (int) Math.sqrt(fixedBlocks.length);

// 情况1：关联第1行
for (int i = 0; i < lineCount; i++) {
// 位于最左边
if (i % lineCount == 0) {
fixedBlocks[i].next = isClockwise ? fixedBlocks[i + lineCount] : fixedBlocks[i + 1];
// 位于最右边
} else if ((i + 1) % lineCount == 0) {
fixedBlocks[i].next = isClockwise ? fixedBlocks[i - 1] : fixedBlocks[i + lineCount];
// 中间
} else {
fixedBlocks[i].next = isClockwise ? fixedBlocks[i - 1] : fixedBlocks[i + 1];
}
}
// 情况2：关联最后1行
for (int i = (lineCount - 1) * lineCount; i < lineCount * lineCount; i++) {
// 位于最左边
if (i % lineCount == 0) {
fixedBlocks[i].next = isClockwise ? fixedBlocks[i + 1] : fixedBlocks[i - lineCount];
// 位于最右边
} else if ((i + 1) % lineCount == 0) {
fixedBlocks[i].next = isClockwise ? fixedBlocks[i - lineCount] : fixedBlocks[i - 1];
// 中间
} else {
fixedBlocks[i].next = isClockwise ? fixedBlocks[i + 1] : fixedBlocks[i - 1];
}
}

// 情况3：关联第1列
for (int i = 1 * lineCount; i <= (lineCount - 1) * lineCount; i += lineCount) {
// 若是第1列最后1个
if (i == (lineCount - 1) * lineCount) {
fixedBlocks[i].next = isClockwise ? fixedBlocks[i + 1] : fixedBlocks[i - lineCount];
continue;
}
fixedBlocks[i].next = isClockwise ? fixedBlocks[i + lineCount] : fixedBlocks[i - lineCount];
}

// 情况4：关联最后1列
for (int i = 2 * lineCount - 1; i <= lineCount * lineCount - 1; i += lineCount) {
// 若是最后1列最后1个
if (i == lineCount * lineCount - 1) {
fixedBlocks[i].next = isClockwise ? fixedBlocks[i - lineCount] : fixedBlocks[i - 1];
continue;
}
fixedBlocks[i].next = isClockwise ? fixedBlocks[i - lineCount] : fixedBlocks[i + lineCount];
}
}
// 请回到原处

步骤3：设置方块初始位置

// 该步骤写在onSizeChanged（）
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
// 调用时刻：onCreate之后onDraw之前调用；view的大小发生改变就会调用该方法
// 使用场景：用于屏幕的大小改变时，需要根据屏幕宽高来决定的其他变量可以在这里进行初始化操作
super.onSizeChanged(w, h, oldw, oldh);

int measuredWidth = getMeasuredWidth();
int measuredHeight = getMeasuredHeight();

// 1. 设置移动方块的旋转中心坐标
int cx = measuredWidth / 2;
int cy = measuredHeight / 2;

// 2. 设置固定方块的位置 ->>关注1
fixedBlockPosition(mfixedBlocks, cx, cy, blockInterval, half_BlockWidth);
// 3. 设置移动方块的位置 ->>关注2
MoveBlockPosition(mfixedBlocks, mMoveBlock, initPosition, isClock_Wise);
}

// 此步骤结束

/**

关注1：设置固定方块位置
*/
private void fixedBlockPosition(fixedBlock[] fixedBlocks, int cx, int cy, float dividerWidth, float halfSquareWidth) {

// 1. 确定第1个方块的位置
// 分为2种情况：行数 = 偶 / 奇数时
// 主要是是数学知识，此处不作过多描述
float squareWidth = halfSquareWidth * 2;
int lineCount = (int) Math.sqrt(fixedBlocks.length);
float firstRectLeft = 0;
float firstRectTop = 0;

// 情况1：当行数 = 偶数时
if (lineCount % 2 == 0) {
int squareCountInAline = lineCount / 2;
int diviCountInAline = squareCountInAline - 1;
float firstRectLeftTopFromCenter = squareCountInAline * squareWidth

diviCountInAline * dividerWidth
dividerWidth / 2;
firstRectLeft = cx - firstRectLeftTopFromCenter;
firstRectTop = cy - firstRectLeftTopFromCenter;

// 情况2：当行数 = 奇数时
} else {
int squareCountInAline = lineCount / 2;
int diviCountInAline = squareCountInAline;
float firstRectLeftTopFromCenter = squareCountInAline * squareWidth

diviCountInAline * dividerWidth
halfSquareWidth;
firstRectLeft = cx - firstRectLeftTopFromCenter;
firstRectTop = cy - firstRectLeftTopFromCenter;
firstRectLeft = cx - firstRectLeftTopFromCenter;
firstRectTop = cy - firstRectLeftTopFromCenter;
}

// 2. 确定剩下的方块位置
// 思想：把第一行方块位置往下移动即可
// 通过for循环确定：第一个for循环 = 行，第二个 = 列
for (int i = 0; i < lineCount; i++) {//行
for (int j = 0; j < lineCount; j++) {//列
if (i == 0) {
if (j == 0) {
fixedBlocks[0].rectF.set(firstRectLeft, firstRectTop,
firstRectLeft + squareWidth, firstRectTop + squareWidth);
} else {
int currIndex = i * lineCount + j;
fixedBlocks[currIndex].rectF.set(fixedBlocks[currIndex - 1].rectF);
fixedBlocks[currIndex].rectF.offset(dividerWidth + squareWidth, 0);
}
} else {
int currIndex = i * lineCount + j;
fixedBlocks[currIndex].rectF.set(fixedBlocks[currIndex - lineCount]. 《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》无偿开源徽信搜索公众号【编程进阶路】 rectF);
fixedBlocks[currIndex].rectF.offset(0, dividerWidth + squareWidth);
}
}
}
}

// 回到原处

/**

关注2：设置移动方块的位置
*/
private void MoveBlockPosition(fixedBlock[] fixedBlocks,
MoveBlock moveBlock, int initPosition, boolean isClockwise) {

// 移动方块位置 = 设置初始的空出位置的下一个位置（next）
// 下一个位置通过连接的外部方块位置确定
fixedBlock fixedBlock = fixedBlocks[initPosition];
moveBlock.rectF.set(fixedBlock.next.rectF);
}
// 回到原处

步骤4：绘制方块

// 此步骤写到onDraw（）中
@Override
protected void onDraw(Canvas canvas) {

// 1. 绘制内部方块（固定的）
for (int i = 0; i < mfixedBlocks.length; i++) {
// 根据标志位判断是否需要绘制
if (mfixedBlocks[i].isShow) {
// 传入方块位置参数、圆角 & 画笔属性
canvas.drawRoundRect(mfixedBlocks[i].rectF, fixBlock_Angle, fixBlock_Angle, mPaint);
}
}
// 2. 绘制移动的方块
if (mMoveBlock.isShow) {
canvas.rotate(isClock_Wise ? mRotateDegree : -mRotateDegree, mMoveBlock.cx, mMoveBlock.cy);
canvas.drawRoundRect(mMoveBlock.rectF, moveBlock_Angle, moveBlock_Angle, mPaint);
}

}

步骤5：设置动画

实现该动画的步骤包括：设置平移动画、旋转动画 & 组合动画。

1.设置平移动画

private ValueAnimator createTranslateValueAnimator(fixedBlock currEmptyfixedBlock,
fixedBlock moveBlock) {
float startAnimValue = 0;
float endAnimValue = 0;
PropertyValuesHolder left = null;
PropertyValuesHolder top = null;

// 1. 设置移动速度
ValueAnimator valueAnimator = new ValueAnimator().setDuration(moveSpeed);

// 2. 设置移动方向
// 情况分为：4种，分别是移动方块向左、右移动和上、下移动
// 注：需考虑旋转方向（isClock_Wise），即顺逆时针 ->>关注1
if (isNextRollLeftOrRight(currEmptyfixedBlock, moveBlock)) {

// 情况1：顺时针且在第一行 / 逆时针且在最后一行时，移动方块向右移动
if (isClock_Wise && currEmptyfixedBlock.index > moveBlock.index || !isClock_Wise && currEmptyfixedBlock.index > moveBlock.index) {

startAnimValue = moveBlock.rectF.left;
endAnimValue = moveBlock.rectF.left + blockInterval;

// 情况2：顺时针且在最后一行 / 逆时针且在第一行，移动方块向左移动
} else if (isClock_Wise && currEmptyfixedBlock.index < moveBlock.index
|| !isClock_Wise && currEmptyfixedBlock.index < moveBlock.index) {

startAnimValue = moveBlock.rectF.left;
endAnimValue = moveBlock.rectF.left - blockInterval;
}

// 设置属性值
left = PropertyValuesHolder.ofFloat(“left”, startAnimValue, endAnimValue);
valueAnimator.setValues(left);

} else {
// 情况3：顺时针且在最左列 / 逆时针且在最右列，移动方块向上移动
if (isClock_Wise && currEmptyfixedBlock.index < moveBlock.index
|| !isClock_Wise && currEmptyfixedBlock.index < moveBlock.index) {

startAnimValue = moveBlock.rectF.top;
endAnimValue = moveBlock.rectF.top - blockInterval;

// 情况4：顺时针且在最右列 / 逆时针且在最左列，移动方块向下移动
} else if (isClock_Wise && currEmptyfixedBlock.index > moveBlock.index
|| !isClock_Wise && currEmptyfixedBlock.index > moveBlock.index) {
startAnimValue = moveBlock.rectF.top;
endAnimValue = moveBlock.rectF.top + blockInterval;
}

// 设置属性值
top = PropertyValuesHolder.ofFloat(“top”, startAnimValue, endAnimValue);
valueAnimator.setValues(top);
}

// 3. 通过监听器更新属性值
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
Object left = animation.getAnimatedValue(“left”);
Object top = animation.getAnimatedValue(“top”);
if (left != null) {
mMoveBlock.rectF.offsetTo((Float) left, mMoveBlock.rectF.top);
}
if (top != null) {
mMoveBlock.rectF.offsetTo(mMoveBlock.rectF.left, (Float) top);
}
// 实时更新旋转中心 ->>关注2
setMoveBlockRotateCenter(mMoveBlock, isClock_Wise);

// 更新绘制
invalidate();
}
});
return valueAnimator;
}
// 此步骤分析完毕

/**

关注1：判断移动方向
即上下 or 左右
*/
private boolean isNextRollLeftOrRight(fixedBlock currEmptyfixedBlock, fixedBlock rollSquare) {
if (currEmptyfixedBlock.rectF.left - rollSquare.rectF.left == 0) {
return false;
} else {
return true;
}
}
// 回到原处

/**

关注2：实时更新移动方块的旋转中心
因为方块在平移旋转过程中，旋转中心也会跟着改变，因此需要改变MoveBlock的旋转中心（cx,cy）
*/

private void setMoveBlockRotateCenter(MoveBlock moveBlock, boolean isClockwise) {

// 情况1：以移动方块的左上角为旋转中心
if (moveBlock.index == 0) {
moveBlock.cx = moveBlock.rectF.right;
moveBlock.cy = moveBlock.rectF.bottom;

// 情况2：以移动方块的右下角为旋转中心
} else if (moveBlock.index == lineNumber * lineNumber - 1) {
moveBlock.cx = moveBlock.rectF.left;
moveBlock.cy = moveBlock.rectF.top;

// 情况3：以移动方块的左下角为旋转中心
} else if (moveBlock.index == lineNumber * (lineNumber - 1)) {
moveBlock.cx = moveBlock.rectF.right;
moveBlock.cy = moveBlock.rectF.top;

// 情况4：以移动方块的右上角为旋转中心
} else if (moveBlock.index == lineNumber - 1) {
moveBlock.cx = moveBlock.rectF.left;
moveBlock.cy = moveBlock.rectF.bottom;
}

//以下判断与旋转方向有关：即顺 or 逆顺时针

// 情况1：左边
else if (moveBlock.index % lineNumber == 0) {
moveBlock.cx = moveBlock.rectF.right;
moveBlock.cy = isClockwise ? moveBlock.rectF.top : moveBlock.rectF.bottom;

// 情况2：上边
} else if (moveBlock.index < lineNumber) {
moveBlock.cx = isClockwise ? moveBlock.rectF.right : moveBlock.rectF.left;
moveBlock.cy = moveBlock.rectF.bottom;

// 情况3：右边
} else if ((moveBlock.index + 1) % lineNumber == 0) {
moveBlock.cx = moveBlock.rectF.left;
moveBlock.cy = isClockwise ? moveBlock.rectF.bottom : moveBlock.rectF.top;

// 情况4：下边
} else if (moveBlock.index > (lineNumber - 1) * lineNumber) {
moveBlock.cx = isClockwise ? moveBlock.rectF.left : moveBlock.rectF.right;
moveBlock.cy = moveBlock.rectF.top;
}
}
// 回到原处

2. 设置旋转动画

private ValueAnimator createMoveValueAnimator() {

// 通过属性动画进行设置
ValueAnimator moveAnim = ValueAnimator.ofFloat(0, 90).setDuration(moveSpeed);

moveAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
Object animatedValue = animation.getAnimatedValue();

// 赋值
mRotateDegree = (float) animatedValue;

// 更新视图
invalidate();
}
});
return moveAnim;
}
// 此步骤完毕

3. 设置组合动画

private void setAnimation（） {

// 1. 获取固定方块当前的空位置，即移动方块当前位置
fixedBlock currEmptyfixedBlock = mfixedBlocks[mCurrEmptyPosition];
// 2. 获取移动方块的到达位置，即固定方块当前空位置的下1个位置
fixedBlock movedBlock = currEmptyfixedBlock.next;

// 3. 设置动画变化的插值器
mAnimatorSet.setInterpolator(move_Interpolator);
mAnimatorSet.playTogether(translateConrtroller, moveConrtroller);
mAnimatorSet.addListener(new AnimatorListenerAdapter() {

// 4. 动画开始时进行一些设置
@Override
public void onAnimationStart(Animator animation) {

// 每次动画开始前都需要更新移动方块的位置 ->>关注1
updateMoveBlock();

// 让移动方块的初始位置的下个位置也隐藏 = 两个隐藏的方块
mfixedBlocks[mCurrEmptyPosition].next.isShow = false;

// 通过标志位将移动的方块显示出来
mMoveBlock.isShow = true;
}

// 5. 结束时进行一些设置
@Override
public void onAnimationEnd(Animator animation) {
isMoving = false;
mfixedBlocks[mCurrEmptyPosition].isShow = true;
mCurrEmptyPosition = mfixedBlocks[mCurrEmptyPosition].next.index;

// 将移动的方块隐藏
mMoveBlock.isShow = false;

// 通过标志位判断动画是否要循环播放
if (mAllowRoll) {
startMoving();
}
}
});

// 此步骤分析完毕

/**

关注1：更新移动方块的位置
*/

private void updateMoveBlock() {

mMoveBlock.rectF.set(mfixedBlocks[mCurrEmptyPosition].next.rectF);
mMoveBlock.index = mfixedBlocks[mCurrEmptyPosition].next.index;
setMoveBlockRotateCenter(mMoveBlock, isClock_Wise);
}
// 回到原处