自定义LoadingView大全之转动立方体
回声的千结百绕
而守候的是
执着
一仓央嘉措
概述
这篇是自定义LoadingView大全的第四篇博客，也是写得最累最费心费脑的一篇博客，我现在眼睛还疲惫的难受。作为一名程序猿，我在表达能力方面比较欠缺，我希望我能够把它讲清楚。在讲解的过程当中我都会配以图片加以说明。
上图吧：
第一次看到这样的效果，是不是让你眼前一亮，格逼一下就上去了。你可能会问，实现起来会不会很难啊，可以明确的说实现不难，需要你有足够的耐心。
具体实现
分析
在开始动手写代码之前，我习惯会去先分析转动的立方体该怎么去绘制和添加动画。先来看看下面这张示意图：
先来看看大的立方体，它是由9个面组成，分成了三个阶段。
第一阶段：从A运动到B
数字标出1，2，3，4，5左上运动，每个点的X，Y都在减少；6，7，8，9右下运动，每个点的X，Y坐标都在增大。左右两边长的立方体总共运动了菱形的一个边长，那么可以知道每个长的立方体运动了边长的二分之一。
第二阶段：从B运动到C
1，2面右上运动，每个点的X坐标增大，Y减少；3，4，5，6面没有运动；7，8，9面左下运动，X坐标减少，Y增大。如果把1，2面看成一个立方体则运动了一个菱形的边长。7，8，9面同理。
第三阶段：从C运动到A
3，4，5，7，8，9面左上运动X，Y坐标都在减少；1，2，6面右下运动X，Y都在增大且运动了半个菱形的边长。
比较复杂的是需要去绘制大的立方体A，可以把A分离成9个面，绘制每个面，那么我们先来分析一个面：
设定a为30°，对应的三角形高度为h，那么另一条长度为√3h（根号）。
把A画到坐标系上，如图：
这样是不是就很明了，我们只需要知道中心点坐标，h的长度就可以画出A（大的立方体）。OK，只要画出A，后面的就简单了。
编码
获取中心点坐标以及h的长度：
centerX = w / 2;
mWidth = Math.min(w, h);
//平行四边形的最小角度为30度
mItemWidth = mWidth / 16 * (float) Math.sqrt(3);
mItemHeight = mWidth / 16;
在ondraw方法中处理不同阶段的绘制：
if (mValueAnimator >= 0 && mValueAnimator < (1.0f / 3)) {
//绘制第一阶段
drawStage1(canvas, mValueAnimator);
if (mShadow) {
drawShadow1(canvas, mValueAnimator);
}
} else if (mValueAnimator >= (1.0f / 3) && mValueAnimator < (1.0f / 3 * 2)) {
//绘制第二阶段
drawStage2(canvas, mValueAnimator);
if (mShadow) {
drawShadow2(canvas, mValueAnimator);
}
} else if (mValueAnimator >= (1.0f / 3 * 2) && mValueAnimator <= 1.0f) {
//绘制第三阶段
drawStage3(canvas, mValueAnimator);
if (mShadow) {
drawShadow3(canvas, mValueAnimator);
}
}
mValueAnimator 取值（0.0f~1.0f）；mShadow是否显示阴影。
第一阶段绘制：
//这里2个立方体都在移动，每个立方体在X轴方向移动的距离为mItemWidth/2
float moveX = mItemWidth / 2.0f * valueAnimator / (1.0f / 3);
float moveY = mItemHeight / 2.0f * valueAnimator / (1.0f / 3);
//顺时针绘制平行四边形
//向后移动在X 方向 减少 Y方向减少
Path p = new Path();
p.moveTo(centerX - 2 * mItemWidth - moveX, 4 * mItemHeight - moveY);
p.lineTo(centerX - mItemWidth - moveX, 3 * mItemHeight - moveY);
p.lineTo(centerX - moveX, 4 * mItemHeight - moveY);
p.lineTo(centerX - mItemWidth - moveX, 5 * mItemHeight - moveY);
p.close();
canvas.drawPath(p, mPaint);
//向后移动在X 方向 减少 Y方向减少
p.reset();
p.moveTo(centerX - 2 * mItemWidth - moveX, 4 * mItemHeight - moveY);
p.lineTo(centerX - mItemWidth - moveX, 5 * mItemHeight - moveY);
p.lineTo(centerX - mItemWidth - moveX, 7 * mItemHeight - moveY);
p.lineTo(centerX - 2 * mItemWidth - moveX, 6 * mItemHeight - moveY);
p.close();
canvas.drawPath(p, mPaintLeft);
//向前移动在X 方向 X方向增加 Y方向增加
p.reset();
p.moveTo(centerX + moveX, 4 * mItemHeight + moveY);
p.lineTo(centerX - mItemWidth + moveX, 3 * mItemHeight + moveY);
p.lineTo(centerX + moveX, 2 * mItemHeight + moveY);
p.lineTo(centerX + mItemWidth + moveX, 3 * mItemHeight + moveY);
p.close();
canvas.drawPath(p, mPaint);
//向前移动在X 方向 X方向增加 Y方向增加
p.reset();
p.moveTo(centerX + moveX, 4 * mItemHeight + moveY);
p.lineTo(centerX + mItemWidth + moveX, 3 * mItemHeight + moveY);
p.lineTo(centerX + 2 * mItemWidth + moveX, 4 * mItemHeight + moveY);
p.lineTo(centerX + mItemWidth + moveX, 5 * mItemHeight + moveY);
p.close();
canvas.drawPath(p, mPaint);
//向前移动在X 方向 X方向增加 Y方向增加
p.reset();
p.moveTo(centerX + moveX, 4 * mItemHeight + moveY);
p.lineTo(centerX + mItemWidth + moveX, 5 * mItemHeight + moveY);
p.lineTo(centerX + mItemWidth + moveX, 7 * mItemHeight + moveY);
p.lineTo(centerX + moveX, 6 * mItemHeight + moveY);
p.close();
canvas.drawPath(p, mPaintLeft);
//向前移动在X 方向 X方向增加 Y方向增加
p.reset();
p.moveTo(centerX + mItemWidth + moveX, 5 * mItemHeight + moveY);
p.lineTo(centerX + 2 * mItemWidth + moveX, 4 * mItemHeight + moveY);
p.lineTo(centerX + 2 * mItemWidth + moveX, 6 * mItemHeight + moveY);
p.lineTo(centerX + mItemWidth + moveX, 7 * mItemHeight + moveY);
p.close();
canvas.drawPath(p, mPaintRight);
//向后移动在X 方向 减少 Y方向减少
p.reset();
p.moveTo(centerX - mItemWidth - moveX, 5 * mItemHeight - moveY);
p.lineTo(centerX - moveX, 4 * mItemHeight - moveY);
p.lineTo(centerX + mItemWidth - moveX, 5 * mItemHeight - moveY);
p.lineTo(centerX - moveX, 6 * mItemHeight - moveY);
p.close();
canvas.drawPath(p, mPaint);
//向后移动在X 方向 减少 Y方向减少
p.reset();
p.moveTo(centerX - mItemWidth - moveX, 5 * mItemHeight - moveY);
p.lineTo(centerX - moveX, 6 * mItemHeight - moveY);
p.lineTo(centerX - moveX, 8 * mItemHeight - moveY);
p.lineTo(centerX - mItemWidth - moveX, 7 * mItemHeight - moveY);
p.close();
canvas.drawPath(p, mPaintLeft);
//向后移动在X 方向 减少 Y方向减少
p.reset();
p.moveTo(centerX - moveX, 6 * mItemHeight - moveY);
p.lineTo(centerX + mItemWidth - moveX, 5 * mItemHeight - moveY);
p.lineTo(centerX + mItemWidth - moveX, 7 * mItemHeight - moveY);
p.lineTo(centerX - moveX, 8 * mItemHeight - moveY);
p.close();
canvas.drawPath(p, mPaintRight);在代码中我对每个面的变化都有相应的注释，应该都是可以看懂的。
绘制一个立方体效果图：
能够绘制立方体的变化，阴影层的绘制就非常简单了。
源码地址，如果你喜欢就给我star，再次感谢大家的关注。
自定义LoadingView大全