default:
//顺时针
leaf.rotateDir = RotateDir.CLOCKWISE;
break;
}
//随机起始角度
leaf.rotateAngle = mRandom.nextInt(360);
leaf.n = mRandom.nextInt(20);
mAddTime += mRandom.nextInt((int)mLeafFloatTime);
leaf.startTime = System.currentTimeMillis() + mAddTime;
return leaf;
}
3.2 叶子飘动轨迹为正弦函数
确定 Leaf 在某个时刻的坐标 ( x , y ):
/**
- 获取叶子的(x,y)位置
- @param leaf 叶子
- @param currentTime 当前时间
*/
private void getLeafLocation(Leaf leaf,long currentTime){
long intervalTime = currentTime - leaf.startTime;//飘动时长
if (intervalTime <= 0){
// 此 Leaf 还没到飘动时间
return;
}else if (intervalTime > mLeafFloatTime){
// Leaf 的飘动时间大于指定的飘动时间,即叶子飘动到了最左边,应回到最右边
leaf.startTime = currentTime + new Random().nextInt((int)mLeafFloatTime);
}
// 计算移动因子
float fraction = (float) intervalTime / mLeafFloatTime;
leaf.x = (1-fraction)*mProgressLen;
leaf.y = getLeafLocationY(leaf);
if (leaf.x <= mYellowOvalHeight / 4){
//叶子飘到最左边,有可能会超出 RoundRect 边界,所以提前特殊处理
leaf.startTime = currentTime + new Random().nextInt((int)mLeafFloatTime);
leaf.x = mProgressLen;
leaf.y = getLeafLocationY(leaf);
}
}
要想让 Leaf 飘动轨迹为正弦函数,关键在于确定 Leaf 的 Y 轴坐标:
/**
- 获取叶子的Y轴坐标
- @param leaf 叶子
- @return 经过计算的叶子Y轴坐标
/
private float getLeafLocationY(Leaf leaf){
float w = (float) (Math.PI * 2 / mProgressLen);//角频率
float A;//计算振幅值
switch (leaf.type){
case LITTLE:
A = mLeafLen/3;
break;
case MIDDLE:
A = mLeafLen2/3;
break;
default:
A = mLeafLen;
break;
}
// (mHeight-mLeafLen)/2 是为了让 Leaf 的Y轴起始位置居中
return (float) (A * Math.sin(w * leaf.x + leaf.n)+(mHeight-mLeafLen)/2);
}
3.3 叶子飘动时自旋转
这里就涉及到了 Leaf 的绘制,其实 Gif 中的叶子和风扇都可以使用 Canves 直接绘制图案,但是这样就会有两个问题:
- 难画:想要画出满意图形,并且还要旋转、缩放、平移可要下一番功夫。
- 灵活性低:如果想换其他样式又得重新设计绘制过程。
因此这里采用 Canves.drawBitmap()
的方式绘制,直接使用已有的图片作为叶子和风扇,同时利用 Canves.drawBitmap()
的一个重载的方法可以很方便的实现旋转、缩放、平移:
void drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint) ;
就是通过这里的 Matrix 矩阵,它内部封装了 postScale()
、postTranslate
、postRotate()
等方法,可以帮助我们快速的对 Bitmap 进行旋转、缩放、平移还有其他操作。使用时要记得配合 Canves 的 save()
和 restore()
使用,否则达不到想要的效果。
对这方面不熟的朋友可以看看 HenCoder 的自定义 View 教学 1-4 。
绘制 Leaf 的方法:
private void drawLeaves(Canvas canvas){
long currentTime = System.currentTimeMillis();
for (Leaf leaf : mLeafList) {
if (currentTime > leaf.startTime && leaf.startTime != 0){
// 获取 leaf 当前的坐标
getLeafLocation(leaf,currentTime);
canvas.save();
Matrix matrix = new Matrix();
// 缩放 自适应 View 的大小
float scaleX = (float) mLeafLen / mLeafBitmapWidth;
float scaleY = (float) mLeafLen / mLeafBitmapHeight;
matrix.postScale(scaleX,scaleY);
// 位移
float transX = leaf.x;
float transY = leaf.y;
matrix.postTranslate(transX,transY);
// 旋转
// 计算旋转因子
float rotateFraction = ((currentTime - leaf.startTime) % mLeafRotateTime)
/(float)mLeafRotateTime;
float rotate;
switch (leaf.rotateDir){
case CLOCKWISE:
//顺时针
rotate = rotateFraction * 360 + leaf.rotateAngle;
break;
default:
//逆时针
rotate = -rotateFraction * 360 + leaf.rotateAngle;
break;
}
// 旋转中心选择 Leaf 的中心坐标
matrix.postRotate(rotate,transX + mLeafLen / 2,transY + mLeafLen / 2);
canvas.drawBitmap(mLeafBitmap,matrix,mBitmapPaint);
canvas.restore();
}
}
3.4 Loading == 100% 出现动画
增加一个判断字段 isLoadingCompleted ,在 onDraw()
中选择对应绘制策略。
isLoadingCompleted 在 setProgress()
中根据 progress 设置:
/**
- 设置进度(自动刷新)
- @param progress 0-100
*/
public void setProgress(int progress){
if (progress < 0){
mProgress = 0;
}else if (progress > 100){
mProgress = 100;
}else {
mProgress = progress;
}
if (progress == 100){
isLoadingCompleted = true;
}else {
isLoadingCompleted = false;
}
// 255 不透明
mCompletedFanPaint.setAlpha(255);
postInvalidate();
}
LeavesLoading.onDraw()
部分实现:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
…
if (isLoadingCompleted){
//绘制加载完成特效
drawCompleted(canvas);
}else {
//绘制扇叶
drawFan(canvas,mFanLen,mBitmapPaint);
}
//刷新
postInvalidate();
}
drawCompleted()
实现:
private void drawCompleted(Canvas canvas) {
最后
由于题目很多整理答案的工作量太大,所以仅限于提供知识点,详细的很多问题和参考答案我都整理成了 PDF文件
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。**
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!