热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

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

这篇文章主要为大家详细介绍了Android实现光点模糊渐变的自旋转圆环特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

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

1.渐变色

2.尖端的白点模糊效果

3.路径绘制

最终实现的效果图如下:

完美实现了三点要求。

实现思路:

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

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

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

代码实现:

/**
 * 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的路径收集和方向控制并绘制小星星的过程:

 // 创建 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实现光点模糊渐变的自旋转圆环特效

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


推荐阅读
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • baresip android编译、运行教程1语音通话
    本文介绍了如何在安卓平台上编译和运行baresip android,包括下载相关的sdk和ndk,修改ndk路径和输出目录,以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]
  • 【Windows】实现微信双开或多开的方法及步骤详解
    本文介绍了在Windows系统下实现微信双开或多开的方法,通过安装微信电脑版、复制微信程序启动路径、修改文本文件为bat文件等步骤,实现同时登录两个或多个微信的效果。相比于使用虚拟机的方法,本方法更简单易行,适用于任何电脑,并且不会消耗过多系统资源。详细步骤和原理解释请参考本文内容。 ... [详细]
  • Android Studio Bumblebee | 2021.1.1(大黄蜂版本使用介绍)
    本文介绍了Android Studio Bumblebee | 2021.1.1(大黄蜂版本)的使用方法和相关知识,包括Gradle的介绍、设备管理器的配置、无线调试、新版本问题等内容。同时还提供了更新版本的下载地址和启动页面截图。 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 本文讲述了作者通过点火测试男友的性格和承受能力,以考验婚姻问题。作者故意不安慰男友并再次点火,观察他的反应。这个行为是善意的玩人,旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • Google Play推出全新的应用内评价API,帮助开发者获取更多优质用户反馈。用户每天在Google Play上发表数百万条评论,这有助于开发者了解用户喜好和改进需求。开发者可以选择在适当的时间请求用户撰写评论,以获得全面而有用的反馈。全新应用内评价功能让用户无需返回应用详情页面即可发表评论,提升用户体验。 ... [详细]
author-avatar
ycy1873187
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有