前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android实现光点模糊渐变的自旋转圆环特效

Android实现光点模糊渐变的自旋转圆环特效

作者头像
砸漏
发布2020-11-05 11:13:40
1.5K0
发布2020-11-05 11:13:40
举报
文章被收录于专栏:恩蓝脚本

本文实例为大家分享了Android实现光点模糊渐变的自旋转圆环效果,供大家参考,具体内容如下

项目中需要实现的效果图如下:

可以这个表盘看到中间部分都是没有什么难点的,主要是周围圆环的三种效果:

1.渐变色

2.尖端的白点模糊效果

3.路径绘制

最终实现的效果图如下:

完美实现了三点要求。

实现思路:

1.首先是黑色底色圆环的绘制(黑色圈是固定不变的)。

2.在绘制好黑色底色圆环之后再绘制渐变色圆弧(蓝绿部分)。

3.最后绘制小星星部分,使用一张模糊图片得到bitmap,并通过PathMeasure进行路径绘制。

代码实现:

代码语言:javascript
复制
/**
* Created by jiangzn on 17/2/3.
*/
public class RoundLightBarView extends ImageView {
private int mTotalWidth, mTotalHeight;
private int mCenterX, mCenterY;
//底色画笔
private Paint mCirclePaint;
//进度条画笔
private Paint mProgressPaint;
//圆点画笔
private Paint mbitmapPaint;
private Matrix mMatrix; // 矩阵,用于对图片进行一些操作
private float[] pos;   // 当前点的实际位置
private float[] tan;   // 当前点的tangent值,用于计算图片所需旋转的角度
private int mCircleR;
private Context mContext;
//距离外围的边距
private float interval ;
private int startAngle = 1;
//球
private Bitmap mLititleBitmap; // 圆点图片
public RoundLightBarView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public RoundLightBarView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
interval = DensityUtils.px2dip(mContext, 50);
//初始化画笔
initPaint();
//初始化bitmap
initBitmap();
}
private void initBitmap() {
mMatrix=new Matrix();
pos = new float[2];
tan = new float[2];
mLititleBitmap= ((BitmapDrawable) getResources()
.getDrawable(R.mipmap.white_round))
.getBitmap();
}
private void initPaint() {
//画黑底的深色圆画笔
mCirclePaint = new Paint();
//抗锯齿
mCirclePaint.setAntiAlias(true);
// 防抖动
mCirclePaint.setDither(true);
// 开启图像过滤,对位图进行滤波处理。
mCirclePaint.setFilterBitmap(true);
mCirclePaint.setColor(Color.BLACK);
//空心圆
mCirclePaint.setStyle(Paint.Style.STROKE);
//圆半径
mCircleR = DensityUtils.px2dip(mContext, 20);
mCirclePaint.setStrokeWidth(mCircleR);
//画彩色圆弧的画笔
mProgressPaint = new Paint();
//抗锯齿
mProgressPaint.setAntiAlias(true);
// 防抖动
mProgressPaint.setDither(true);
// 开启图像过滤,对位图进行滤波处理。
mProgressPaint.setFilterBitmap(true);
mProgressPaint.setColor(Color.BLUE);
//空心圆
mProgressPaint.setStyle(Paint.Style.STROKE);
//设置笔刷样式为原型
mProgressPaint.setStrokeCap(Paint.Cap.ROUND);
//设置圆弧粗
mProgressPaint.setStrokeWidth(mCircleR);
//将绘制的内容显示在第一次绘制内容之上
mProgressPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
//圆点画笔
mbitmapPaint = new Paint();
mbitmapPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
mbitmapPaint.setStyle(Paint.Style.FILL);
mbitmapPaint.setAntiAlias(true);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//canvas去锯齿
canvas.setDrawFilter(
new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
//画底色圆
canvas.drawCircle(mCenterX, mCenterY, mCenterX - mCircleR - interval, mCirclePaint);
//画进度条
int colorSweep[] = {Color.TRANSPARENT, Color.parseColor("#3bbaea"),Color.parseColor("#7ac9d3"),Color.parseColor("#7cc9d0")};
//设置渐变色
sweepGradient = new SweepGradient(mCenterX, mCenterY, colorSweep, null);
//按照圆心旋转
Matrix matrix = new Matrix();
matrix.setRotate(startAngle, mCenterX, mCenterY);
sweepGradient.setLocalMatrix(matrix);
mProgressPaint.setShader(sweepGradient);
canvas.drawArc(
new RectF(0 + mCircleR + interval, 0 + mCircleR + interval,
mTotalWidth - mCircleR - interval, mTotalHeight - mCircleR - interval),
2 + startAngle, 350, false, mProgressPaint);
startAngle++;
if (startAngle == 360) {
startAngle = 1;
}
//绘制白色小星星
Path orbit = new Path();
//通过Path类画一个90度(180—270)的内切圆弧路径
orbit.addArc(
new RectF(0 + mCircleR + interval, 0 + mCircleR + interval,
mTotalWidth - mCircleR - interval, mTotalHeight - mCircleR - interval)
, 2 + startAngle, 350);
// 创建 PathMeasure
PathMeasure measure = new PathMeasure(orbit, false);
measure.getPosTan(measure.getLength() * 1, pos, tan);
mMatrix.reset();
mMatrix.postScale(2,2);
mMatrix.postTranslate(pos[0] - mLititleBitmap.getWidth() , pos[1] - mLititleBitmap.getHeight() );  // 将图片绘制中心调整到与当前点重合
canvas.drawBitmap(mLititleBitmap, mMatrix, mbitmapPaint);//绘制球
mbitmapPaint.setColor(Color.WHITE);
//绘制实心小圆圈
canvas.drawCircle(pos[0], pos[1], 5, mbitmapPaint);
//启动绘制
postInvalidateDelayed(10);
}
SweepGradient sweepGradient;
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mTotalWidth = w;
mTotalHeight = h;
mCenterX = mTotalWidth / 2;
mCenterY = mTotalHeight / 2;
}
}

总结:

总体实现难度并不大,复习了自定义View和canvas的知识点。

其中需要重视的点在绘图层需要注意给画笔添加覆盖模式:setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP)),将绘制的内容显示在第一次绘制的内容之上,还有一个比较难的点是PathMeasure进行对bitmap的路径收集和方向控制并绘制小星星的过程:

代码语言:javascript
复制
// 创建 PathMeasure
PathMeasure measure = new PathMeasure(orbit, false);
measure.getPosTan(measure.getLength() * 1, pos, tan);
mMatrix.reset();
mMatrix.postScale(2,2);
mMatrix.postTranslate(pos[0] - mLititleBitmap.getWidth() , pos[1] - mLititleBitmap.getHeight() );  // 将图片绘制中心调整到与当前点重合
canvas.drawBitmap(mLititleBitmap, mMatrix, mbitmapPaint);//绘制球
mbitmapPaint.setColor(Color.WHITE);
//绘制实心小圆圈
canvas.drawCircle(pos[0], pos[1], 5, mbitmapPaint);

源码下载:Android实现光点模糊渐变的自旋转圆环特效

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档