CN107315594B - 一种呼吸灯效果的进度条的算法 - Google Patents

Abstract

本发明涉及一种呼吸灯效果的进度条的算法，步骤1，基于布局控件Linearlayout，自定义新的控件类BurnProgressView，在构造函数处增加初始化方法；步骤2，在onSizeChanged回调中，根据控件尺寸，初始化圆环形进度条的尺寸，根据画笔的宽度，确定内圈和外圈的区域，以便在进度条两边绘制渐变弧度线；步骤3，开启呼吸灯变化的线程，循环切换画笔模糊过滤器半径的值；改变波纹线条的高度标记，使其与呼吸灯节奏一致；步骤4，在onDraw回调中，顺序动态绘制进度及各个效果。本发明，通过圆环形进度条及呼吸灯效果的环绕，实现了具美感、个性化、直观易懂的进度条展现，算法效率高，占用资源少，通用性好，适合于Android系统中使用。

Description

一种呼吸灯效果的进度条的算法

技术领域

本发明涉及进度条计算及呈现技术领域，具体说是一种呼吸灯效果的进度条的算法。

背景技术

Android输入控件是一种用于人机交互的元件，Android SDK为此提供了各种各样的输入控件，包括：

原生控件，例如：文本域(TextView)、按钮(Button)、编辑框(EditText)、单选按钮(RadioButton)、列表控件(ListView)以及显示图片控件(ImageView)等，

布局控件，例如：Linearlayout、Relativelayout、Framelayout以及不太常用的TableLayout等等。

利用这些基础的输入控件，能实现普通的布局展示，但对于特殊的应用场景，比如复杂的动画展示，或者特别的图形图像要求，利用这些基础的输入控件无法实现，因此就需要自定义控件来满足特别的需求。

在Android系统中，自定义控件，主要包括两类：

第一类，组合自定义控件，是指使用系统提供的各种界面控件，通过自定义封装成包括多个系统控件的自定义控件，代码在内部处理各子控件的交互，简化使用。

第二类，自绘制控件，是指通过继承系统提供的各种界面控件，在控件的测量、布局、绘制三个方法中，使用代码进行测量、绘制、处理交互事件的自定义控件。自绘制控件能提供比系统控件更新颖的界面、更丰富的交互方式。

新买的耳机，为了获得良好的听感，大多需要通过专业软件进行煲机，增加耳机寿命。煲机是指：通过播放一段时间特殊音频，让耳机达到最佳效果。而通常煲机过程持续时间很长，10～100小时不等，因此在堡机过程中，需要一个智能的体验好的煲机进度的展示，如果动画处理的不当，会导致内存持续增加，CPU和GPU负担过重，进而导致手机发热，耗电严重，甚至应用崩溃。

发明内容

针对现有技术中存在的缺陷，本发明的目的在于提供一种呼吸灯效果的进度条的算法，通过圆环形进度条及呼吸灯效果的环绕，实现了具美感、个性化、直观易懂的进度条展现，算法效率高，占用资源少，通用性好，适合于Android系统中使用。

为达到以上目的，本发明采取的技术方案是：

一种呼吸灯效果的进度条的算法，其特征在于，包括如下步骤：

步骤1，基于布局控件Linearlayout，自定义新的控件类BurnProgressView，在构造函数处增加初始化方法，包括：构造200个画笔模糊过滤器，设置好圆环形进度条的半径，初始化绘制进度以及用于绘制背景的画笔；

步骤2，在onSizeChanged回调中，根据控件尺寸，初始化圆环形进度条的尺寸，根据画笔的宽度，确定内圈和外圈的区域，以便在进度条两边绘制渐变弧度线，达到凹凸立体效果；

步骤3，开启呼吸灯变化的线程，根据设定好的刷新频率，按以下方式循环切换画笔模糊过滤器半径的值：

当达到最大值时，需要从最大值基础上递减，

当达到最小值时，需要从最小值基础上递增；

同时，改变波纹线条的高度标记，使其与呼吸灯节奏一致，所述波纹线条作为背景图案，波纹线条由若干从左到右依次排列、互相平行的竖线构成；

步骤4，在onDraw回调中，顺序动态绘制进度及各个效果；

步骤5，停止进度动画。

在上述技术方案的基础上，自定义新的控件类BurnProgressView，具体包括：

进度条的画笔宽度mStrokeWidth，

绘制进度的画笔mProgressPaint

画笔的角度渐变器mGradient30_100，

绘制背景以及进度条的区域mRect、mOutRect及mRectInner1，

绘制波纹线条的高度数组mHeight，

给呼吸灯画笔设置的模糊过滤器mArrayFilterBlur。

在上述技术方案的基础上，步骤1中，还包括：

将任务划分为若干阶段，并对每个阶段界面绘制的界面刷新频率进行设定。

在上述技术方案的基础上，所述任务为煲机任务，整个煲机进度分为4个阶段，每个阶段界面绘制的界面刷新频率为160、90、40和20，单位是毫秒。

在上述技术方案的基础上，4个阶段分别对应四段弧线，四段弧线首位相接构成圆环形进度条，

四段弧线的最高高度分别为20、35、40和40，单位是像素。

在上述技术方案的基础上，步骤3的具体步骤为：

步骤3.1，定义线程的Runnable接口mLightRunnable，设定同步对象锁mObject，在单次绘制过程中防止其他线程的访问，保证单次绘制的完整性；

步骤3.2，设置线程等待时间；

步骤3.3，绘制半径达到最大时，开始由最大值递减；

步骤3.4，绘制半径达到最小时，开始由最小值递增；

步骤3.5，当绘制暂停时，刷新界面，线程锁定，进入等待唤醒阶段，当再次开启时，解除锁定，重新开始绘制。

在上述技术方案的基础上，步骤4的具体步骤为：

步骤4.1，绘制圆环形进度条深色背景；

步骤4.2，绘制圆环形进度条左右两侧的渐变圆弧，达到凹凸效果的展示；

步骤4.3，实现呼吸灯效果；

步骤4.4，绘制跟随进度显示的进度文字；

步骤4.5，绘制位于圆环形进度条中心的描述文字，当文字超过绘制的区域后，设置为向左匀速循环滚动。

在上述技术方案的基础上，步骤5的具体步骤为：

通过设置isPaused暂停标记，来控制界面进度的刷新，如果isPaused为true，表示执行了暂停逻辑，绘制最后一帧界面，根据步骤3.1的mObject同步锁进入线程等待流程，当设置isPaused标记为false以及执行唤醒线程流程之后，界面重新开始绘制。

本发明所述的呼吸灯效果的进度条的算法，通过圆环形进度条及呼吸灯效果的环绕，实现了具美感、个性化、直观易懂的进度条展现，算法效率高，占用资源少，通用性好，适合于Android系统中使用。

本发明所述的呼吸灯效果的进度条的算法，在煲机（例如耳机的煲机）过程中，圆环形进度条和呼吸灯效果协调展现，尤为适用。针对煲机时间久的特殊场景，根据不同阶段，展示不同的呼吸节奏，优化内存使用，效率更高，体验更佳。

附图说明

本发明有如下附图：

图1本发明的流程图。

图2呼吸灯效果的进度条示例。

具体实施方式

以下结合附图对本发明作进一步详细说明。

如图1、2所示，本发明所述的呼吸灯效果的进度条的算法，包括如下步骤：

步骤1，基于布局控件Linearlayout，自定义新的控件类BurnProgressView，在构造函数处增加初始化方法，包括：构造200个画笔模糊过滤器，设置好圆环形进度条的半径，初始化绘制进度以及用于绘制背景的画笔；

步骤2，在onSizeChanged回调中，根据控件尺寸，初始化圆环形进度条的尺寸，根据画笔的宽度，确定内圈和外圈的区域，以便在进度条两边绘制渐变弧度线，达到凹凸立体效果；

步骤3，开启呼吸灯变化的线程，根据设定好的刷新频率，按以下方式循环切换画笔模糊过滤器半径的值：

当达到最大值时，需要从最大值基础上递减，

当达到最小值时，需要从最小值基础上递增；

同时，改变波纹线条的高度标记，使其与呼吸灯节奏一致，所述波纹线条作为背景图案，波纹线条由若干从左到右依次排列、互相平行的竖线构成；构成波纹线条的竖线，采用中间高两边低的方式呈现波纹效果；

步骤4，在onDraw回调中，顺序动态绘制进度及各个效果；

步骤5，停止进度动画。

在上述技术方案的基础上，步骤1中，自定义新的控件类BurnProgressView，具体包括：

进度条的画笔宽度mStrokeWidth，

绘制进度的画笔mProgressPaint

画笔的角度渐变器mGradient30_100，

绘制背景以及进度条的区域mRect、mOutRect及mRectInner1，

绘制波纹线条的高度数组mHeight，

给呼吸灯画笔设置的模糊过滤器mArrayFilterBlur。

在上述技术方案的基础上，步骤1中，还包括：

将任务划分为若干阶段，并对每个阶段界面绘制的界面刷新频率进行设定。

在上述技术方案的基础上，所述任务为煲机任务，整个煲机进度分为4个阶段，每个阶段界面绘制的界面刷新频率为160、90、40和20，单位是毫秒。

在上述技术方案的基础上，4个阶段分别对应四段弧线，四段弧线首位相接构成圆环形进度条，

四段弧线的最高高度分别为20、35、40和40，单位是像素。

在上述技术方案的基础上，步骤3的具体步骤为：

步骤3.1，定义线程的Runnable接口mLightRunnable，设定同步对象锁mObject，在单次绘制过程中防止其他线程的访问，保证单次绘制的完整性；

步骤3.2，设置线程等待时间；

步骤3.3，绘制半径达到最大时，开始由最大值递减；

步骤3.4，绘制半径达到最小时，开始由最小值递增；

步骤3.5，当绘制暂停时，刷新界面，线程锁定，进入等待唤醒阶段，当再次开启时，解除锁定，重新开始绘制。

在上述技术方案的基础上，步骤4的具体步骤为：

步骤4.1，绘制圆环形进度条深色背景；

将进度分成四段：0-25%，26-50%,51-75%，76-100%，根据当前进度，将已完成的进度绘制为粗的圆弧，将未完成的进度绘制为细的圆弧，例如：进度值在0%-25%之间，就绘制右边四分之一的圆弧为粗的圆弧，其他三段为细的圆弧，

将已完成的进度使用亮色（例如黄色）的画笔绘制，将未完成的进度使用深色画笔绘制；

步骤4.2，绘制圆环形进度条左右两侧的渐变圆弧，达到凹凸效果的展示；

首先定义弧度渐变变量mGradient30_100，

mGradient30_100=new SweepGradient(mCenterX, mCenterY, new int[]{COLOR_ALPHA_30, COLOR_ALPHA_100, COLOR_ALPHA_30, COLOR_ALPHA_00, COLOR_ALPHA_30}, new float[]{0f, 0.25f, 0.5f, 0.75f, 1f});

上述代码所述渐变表示：

圆环形的0弧度对应点的透明度是30,

圆环形的90弧度对应点的透明度是100,

圆环形的180弧度对应点的透明度是30,

圆环形的270弧度对应点的透明度是0,

圆环形的360弧度对应点的透明度是30；

然后，设置画笔的Shader为角度渐变；

mProgressOutPaint.setShader(mGradient30_100);

再后，设置画笔宽度，设置绘制区域为进度条内外圆区域；

步骤4.3，实现呼吸灯效果；

首先设置200个模糊半径过滤器，

for (int i = 0; i < (RADIUS_FILTER_MAX + 1); i++) { mArrayFilterBlur[i] = new BlurMaskFilter(i+1, BlurMaskFilter.Blur.OUTER);}

再在线程中将模糊过滤器动态设置给画笔对象，

mPaintFilter.setMaskFilter(mArrayFilterBlur[filterRadius]);

在onDraw回调中使用画笔绘制圆形，

canvas.drawCircle(mCenterX, mCenterY, mOutFilterRadius,mPaintFilter);

这样就能实现呼吸灯效果了；

步骤4.4，绘制跟随进度显示的进度文字；

首先设置进度文字为100%，获取文字区域大小，再根据进度值计算旋转的角度，绘制进度文字；例如可采用以下示例：

在圆环形进度条上方绘制进度值为文字的区域，之所以使用100%的文字，是因为进度值大为100%，文字宽度最宽，其他进度值也是绘制再此区域，就能保证绘制完整了；之后计算出每个进度值对应偏移的角度PROGRESS_ANGLE_STEP，需要根据进度条类型来调整，如果是间断的环形进度条，需要将弧度减去间断部分所占的弧度作为结果，除以100，就计算出步进值PROGRESS_ANGLE_STEP了；再根据当前进度计算偏转的角度、步进值和半径，算出偏移的横坐标和纵坐标，将进度值文字绘制到前一步计算出的区域即可；

步骤4.5，绘制位于圆环形进度条中心的描述文字，当文字超过绘制的区域后，设置为向左匀速循环滚动；

先确定文字显示区域和圆环形进度条的左右距离，

再确定文字宽度，当文字宽度超过文字显示区域的宽度后，执行滚动逻辑进行跑马灯文字显示，没有超过就正常显示。

所述执行滚动逻辑进行跑马灯文字显示，是指：超出宽度以后，只需要让绘制文字的横坐标逐渐减小即可，当移动到文字的宽度之后，从右边开始继续往左移动，期间要控制好横坐标，以及第一次展示的时候，是显示在左边。

在上述技术方案的基础上，步骤5的具体步骤为：

通过设置isPaused暂停标记，来控制界面进度的刷新，如果isPaused为true，表示执行了暂停逻辑，绘制最后一帧界面，根据步骤3.1的mObject同步锁进入线程等待流程，当设置isPaused标记为false以及执行唤醒线程流程之后，界面重新开始绘制。

本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。

Claims (7)

1.一种呼吸灯效果的进度条的算法，其特征在于，包括如下步骤：

步骤1，基于布局控件Linearlayout，自定义新的控件类BurnProgressView，在构造函数处增加初始化方法，包括：构造200个画笔模糊过滤器，设置好圆环形进度条的半径，初始化绘制进度以及用于绘制背景的画笔；

步骤2，在onSizeChanged回调中，根据控件尺寸，初始化圆环形进度条的尺寸，根据画笔的宽度，确定内圈和外圈的区域，以便在进度条两边绘制渐变弧度线，达到凹凸立体效果；

步骤3，开启呼吸灯变化的线程，根据设定好的刷新频率，按以下方式循环切换画笔模糊过滤器半径的值：

当达到最大值时，需要从最大值基础上递减，

当达到最小值时，需要从最小值基础上递增；

同时，改变波纹线条的高度标记，使其与呼吸灯节奏一致，所述波纹线条作为背景图案，波纹线条由若干从左到右依次排列、互相平行的竖线构成；

步骤4，在onDraw回调中，顺序动态绘制进度及各个效果；

步骤5，停止进度动画；

步骤4的具体步骤为：

步骤4.1，绘制圆环形进度条深色背景；

步骤4.2，绘制圆环形进度条左右两侧的渐变圆弧，达到凹凸效果的展示；

步骤4.3，实现呼吸灯效果；

步骤4.4，绘制跟随进度显示的进度文字；

首先设置进度文字为100％，获取文字区域大小，再根据进度值计算旋转的角度，绘制进度文字；具体包括：

在圆环形进度条上方绘制进度值为文字的区域，之后计算出每个进度值对应偏移的角度PROGRESS_ANGLE_STEP，需要根据进度条类型来调整，如果是间断的环形进度条，需要将弧度减去间断部分所占的弧度作为结果，除以100，就计算出步进值PROGRESS_ANGLE_STEP了；

再根据当前进度计算偏转的角度、步进值和半径，算出偏移的横坐标和纵坐标，将进度值文字绘制到前一步计算出的区域即可；

步骤4.5，绘制位于圆环形进度条中心的描述文字，当文字超过绘制的区域后，设置为向左匀速循环滚动。

2.如权利要求1所述的呼吸灯效果的进度条的算法，其特征在于：自定义新的控件类BurnProgressView，具体包括：

进度条的画笔宽度mStrokeWidth，

绘制进度的画笔mProgressPaint

画笔的角度渐变器mGradient30_100，

绘制背景以及进度条的区域mRect、mOutRect及mRectInner1，

绘制波纹线条的高度数组mHeight，

给呼吸灯画笔设置的模糊过滤器mArrayFilterBlur。

3.如权利要求1所述的呼吸灯效果的进度条的算法，其特征在于：步骤1中，还包括：

将任务划分为若干阶段，并对每个阶段界面绘制的界面刷新频率进行设定。

4.如权利要求3所述的呼吸灯效果的进度条的算法，其特征在于：所述任务为煲机任务，整个煲机进度分为4个阶段，每个阶段界面绘制的界面刷新频率为160、90、40和20，单位是毫秒。

5.如权利要求4所述的呼吸灯效果的进度条的算法，其特征在于：4个阶段分别对应四段弧线，四段弧线首位相接构成圆环形进度条，

四段弧线的最高高度分别为20、35、40和40，单位是像素。

6.如权利要求1所述的呼吸灯效果的进度条的算法，其特征在于：步骤3的具体步骤为：

步骤3.1，定义线程的Runnable接口mLightRunnable，设定同步对象锁mObject，在单次绘制过程中防止其他线程的访问，保证单次绘制的完整性；

步骤3.2，设置线程等待时间；

步骤3.3，绘制半径达到最大时，开始由最大值递减；

步骤3.4，绘制半径达到最小时，开始由最小值递增；

步骤3.5，当绘制暂停时，刷新界面，线程锁定，进入等待唤醒阶段，当再次开启时，解除锁定，重新开始绘制。

7.如权利要求1所述的呼吸灯效果的进度条的算法，其特征在于：步骤5的具体步骤为：

通过设置isPaused暂停标记，来控制界面进度的刷新，如果isPaused为true，表示执行了暂停逻辑，绘制最后一帧界面，根据步骤3.1的mObject同步锁进入线程等待流程，当设置isPaused标记为false以及执行唤醒线程流程之后，界面重新开始绘制。

Images