CN108628655A - 一种按钮波纹动画效果的实现方法 - Google Patents

Abstract

本发明涉及一种按钮波纹动画效果的实现方法，步骤如下：（1）自定义按钮波纹动画类WaveDrawable；（2）定义画笔mPaint对象；（3）获取View的宽和高；（4）定义属性动画mValueAnimator对象；（5）定义可选择变量；（6）定义位置记录变量，用于记录点击控件的位置坐标以及用户点击时的横坐标和纵坐标；（7）重新定义绘制draw方法，绘制背景颜色，设置画笔颜色，绘制波纹；（8）重写onBoundsChange方法，获取控件的宽和高，计算水波半径的最大值，定义属性动画动态更新波纹的半径，设置动画的时长。本发明，自定义通用组件，实现按钮波纹动画效果，可定制性好，可扩展性良好，减少了应用的图片资源和安装包大小，同时降低内存,提升性能。

Description

一种按钮波纹动画效果的实现方法

技术领域

本发明涉及UI触摸反馈技术领域，具体说是一种按钮波纹动画效果的实现方法。

背景技术

自从android L（android 5.0）出来后，在界面上有了很大的改动，变得扁平化了，很多控件增加了不错的效果，相信大家对view的点击出现会波纹效果都有所体验吧，点击一个view，然后一个水波纹就会从点击处扩散开来。这常常用于按钮波纹动画，作为触摸反馈的效果之一。

但是，低版本的android不支持按钮波纹动画。同时，按钮波纹动画的可定制性较差，个性化难以凸显。这种波纹效果，android L上提供了一种动画，叫做Reveal效果，其底层是通过拿到view的canvas然后不断刷新view来完成的，这种效果需要view的支持，而在低版本上没有view的支持，因此，Reveal效果没法直接在低版本运行。

所述可定制性包括：波纹的颜色，扩散的时间等等。

发明内容

针对现有技术中存在的缺陷，本发明的目的在于提供一种按钮波纹动画效果的实现方法，自定义通用组件，实现按钮波纹动画效果，可定制性好，可扩展性良好，减少了应用的图片资源和安装包大小，同时降低内存,提升性能。

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

一种按钮波纹动画效果的实现方法，其特征在于，包括如下步骤：

步骤1，自定义按钮波纹动画类WaveDrawable，继承android系统提供的可绘制物类Drawable；

步骤2，定义画笔mPaint对象，用于绘制点击后动画效果，是android系统提供的Paint类型的对象；

步骤3，获取View的宽和高，分别存储于控件宽mViewWidth、控件高mViewHeight两个变量参数中；

步骤4，定义属性动画mValueAnimator对象，用于控制动画，是android系统提供的ValueAnimator类型的对象；

步骤5，定义可选择变量，用于调整钮波纹动画效果；

步骤6，定义位置记录变量，用于记录点击控件的位置坐标以及用户点击时的横坐标和纵坐标；

步骤7，重新定义绘制draw方法，绘制背景颜色，设置画笔颜色，绘制波纹，其中：

调用画布Canvas的drawColor函数，用来绘制背景，

调用画笔Paint的setColor函数，用来设置画笔的颜色，

调用画布Canvas的drawCircle函数，用来绘制圆以形成波纹；

步骤8，重写边界变化onBoundsChange方法，获取控件的宽和高，计算水波半径的最大值，定义属性动画动态更新波纹的半径，设置动画的时长。

在上述技术方案的基础上，步骤5中，可选择变量包括：

半径变量mRadius，是android系统的int类型的变量，用来记录动画中水波扩散的半径，

颜色值变量mStartColor，是android系统的int类型的变量，用来记录动画前的背景颜色，

颜色值变量mEndColor，是android系统的int类型的变量，用来记录波纹扩散的颜色，

颜色值变量startColor，用来记录点击前颜色的色值，

颜色值变量endColor，用来记录点击后颜色的色值，

根据颜色值变量startColor和endColor，设置点击前后颜色的色值，定义setColors(int startColor, int endColor)方法。

在上述技术方案的基础上，步骤6中，具体包括：

坐标变量mClickX和mClickY,是android系统的浮点类型float的变量，用来记录点击控件的位置坐标，

坐标变量clickX和clickY，用来记录用户点击时的横坐标和纵坐标，

根据坐标变量clickX和clickY，设置点击的位置坐标，定义setClickXY(floatclickX, float clickY)方法。

在上述技术方案的基础上，步骤8中，通过Math.abs(bounds.width())和Math.abs(bounds.height())获取资源的宽和高的绝对值，然后存入控件宽mViewWidth、控件高mViewHeight两个变量参数中。

在上述技术方案的基础上，步骤8中，通过Math.sqrt((mViewWidth * mViewWidth+ mViewHeight * mViewHeight)) 来计算波纹的最大半径，然后存入maxRadius参数中；

然后，调用执行属性动画类ValueAnimator，通过属性动画提供的方法ofInt，设定动画变化开始值为0，结束值为波纹的最大半径。

在上述技术方案的基础上，步骤8中，调用执行属性动画类ValueAnimator，通过属性动画提供的方法addUpdateListener，用来监听数值的变化，实现数值的变化对半径mRadius进行修改。

在上述技术方案的基础上，步骤8中，调用执行属性动画类ValueAnimator，通过属性动画提供的方法setDuration，用来设置动画变化的时长。

本发明所述的按钮波纹动画效果的实现方法，自定义通用组件，实现按钮波纹动画效果，可以在任何机型任何版本上实现点击按钮的波纹扩散效果，可定制性好（可以设置波纹的颜色，扩散的时间等等），可扩展性良好，减少了应用的图片资源和安装包大小，同时降低内存,提升性能。

附图说明

本发明有如下附图：

图1本发明的流程图。

具体实施方式

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

如图1所示，本发明所述的按钮波纹动画效果的实现方法，包括如下步骤：

步骤1，自定义按钮波纹动画类WaveDrawable，继承android系统提供的可绘制物类Drawable；

步骤2，定义画笔mPaint对象，用于绘制点击后动画效果，是android系统提供的Paint类型的对象；

步骤3，获取View的宽和高，分别存储于控件宽mViewWidth、控件高mViewHeight两个变量参数中；

步骤4，定义属性动画mValueAnimator对象，用于控制动画，是android系统提供的ValueAnimator类型的对象；

步骤5，定义可选择变量，用于调整钮波纹动画效果；

步骤6，定义位置记录变量，用于记录点击控件的位置坐标以及用户点击时的横坐标和纵坐标；

步骤7，重新定义绘制draw方法，绘制背景颜色，设置画笔颜色，绘制波纹，其中：

调用画布Canvas的drawColor函数，用来绘制背景，

调用画笔Paint的setColor函数，用来设置画笔的颜色，

调用画布Canvas的drawCircle函数，用来绘制圆以形成波纹；

例如，具体代码可如下：

public void draw(@NonNull Canvas canvas) {

canvas.drawColor(mStartColor);

mPaint.setColor(mEndColor);

canvas.drawCircle(mClickX, mClickY, mRadius, mPaint);

}

步骤8，重写边界变化onBoundsChange方法，获取控件的宽和高，计算水波半径的最大值，定义属性动画动态更新波纹的半径，设置动画的时长。

在上述技术方案的基础上，步骤5中，可选择变量包括：

半径变量mRadius，是android系统的int类型的变量，用来记录动画中水波扩散的半径，

颜色值变量mStartColor，是android系统的int类型的变量，用来记录动画前的背景颜色，

颜色值变量mEndColor，是android系统的int类型的变量，用来记录波纹扩散的颜色，

颜色值变量startColor，用来记录点击前颜色的色值，

颜色值变量endColor，用来记录点击后颜色的色值，

根据颜色值变量startColor和endColor，设置点击前后颜色的色值，定义setColors(int startColor, int endColor)方法。

在上述技术方案的基础上，步骤6中，具体包括：

坐标变量mClickX和mClickY,是android系统的浮点类型float的变量，用来记录点击控件的位置坐标，

坐标变量clickX和clickY，用来记录用户点击时的横坐标和纵坐标，

根据坐标变量clickX和clickY，设置点击的位置坐标，定义setClickXY(floatclickX, float clickY)方法。

在上述技术方案的基础上，步骤8中，通过Math.abs(bounds.width())和Math.abs(bounds.height())获取资源的宽和高的绝对值，然后存入控件宽mViewWidth、控件高mViewHeight两个变量参数中。

Math.abs是安卓系统提供的用来获取绝对值的方法，我们用来获取资源的宽和高的绝对值。

在上述技术方案的基础上，步骤8中，通过Math.sqrt((mViewWidth * mViewWidth+ mViewHeight * mViewHeight)) 来计算波纹的最大半径，然后存入maxRadius参数中；

然后，调用执行属性动画类ValueAnimator，通过属性动画提供的方法ofInt，设定动画变化开始值为0，结束值为波纹的最大半径。

Math.sqrt是安卓系统提供的用来获取平方的方法，这里我们用来计算波纹的最大半径。

例如，调用执行属性动画类ValueAnimator具体代码可如下：ValueAnimator.ofInt(0, maxRadius)。我们利用圆的半径变化实现波纹效果这里第一个参数传0，第二个参数传计算的最大半径。

在上述技术方案的基础上，步骤8中，调用执行属性动画类ValueAnimator，通过属性动画提供的方法addUpdateListener，用来监听数值的变化，实现数值的变化对半径mRadius进行修改。

在上述技术方案的基础上，步骤8中，调用执行属性动画类ValueAnimator，通过属性动画提供的方法setDuration，用来设置动画变化的时长。

以上即完成了自定义WaveDrawable并实现波纹效果。

以下根据自定义WaveDrawable，我们自定义TextView把我们定义的带波纹效果的Drawable添加的自定义控件WaveTextView中。

具体步骤为：

步骤1，定义start方法执行动画，mValueAnimator.start()；start是属性动画提供的方法，用来执行动画；

步骤2，定义WaveTextView类，继承android系统提供的TextView；

步骤3，定义mStartColor和mEnd变量，都是android系统的int类型的变量，用来设置WaveTextView控件的背景颜色和波纹颜色；

步骤4，定义mWaveDrawable对象，是前面我们自定义的WaveDrawable类型的对象，用来实现水波动画的效果；

步骤5，重写dispatchTouchEvent方法，监听点击事件，当用户按下时，对mWaveDrawable对象设置点击的坐标位置，再调用mWaveDrawable.start()开启动画效果。

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

Claims (7)

1.一种按钮波纹动画效果的实现方法，其特征在于，包括如下步骤：

步骤1，自定义按钮波纹动画类WaveDrawable，继承android系统提供的可绘制物类Drawable；

步骤2，定义画笔mPaint对象，用于绘制点击后动画效果，是android系统提供的Paint类型的对象；

步骤3，获取View的宽和高，分别存储于控件宽mViewWidth、控件高mViewHeight两个变量参数中；

步骤4，定义属性动画mValueAnimator对象，用于控制动画，是android系统提供的ValueAnimator类型的对象；

步骤5，定义可选择变量，用于调整钮波纹动画效果；

步骤6，定义位置记录变量，用于记录点击控件的位置坐标以及用户点击时的横坐标和纵坐标；

步骤7，重新定义绘制draw方法，绘制背景颜色，设置画笔颜色，绘制波纹，其中：

调用画布Canvas的drawColor函数，用来绘制背景，

调用画笔Paint的setColor函数，用来设置画笔的颜色，

调用画布Canvas的drawCircle函数，用来绘制圆以形成波纹；

步骤8，重写边界变化onBoundsChange方法，获取控件的宽和高，计算水波半径的最大值，定义属性动画动态更新波纹的半径，设置动画的时长。

2.如权利要求1所述的按钮波纹动画效果的实现方法，其特征在于：步骤5中，可选择变量包括：

半径变量mRadius，是android系统的int类型的变量，用来记录动画中水波扩散的半径，

颜色值变量mStartColor，是android系统的int类型的变量，用来记录动画前的背景颜色，

颜色值变量mEndColor，是android系统的int类型的变量，用来记录波纹扩散的颜色，

颜色值变量startColor，用来记录点击前颜色的色值，

颜色值变量endColor，用来记录点击后颜色的色值，

根据颜色值变量startColor和endColor，设置点击前后颜色的色值，定义setColors(int startColor, int endColor)方法。

3.如权利要求1所述的按钮波纹动画效果的实现方法，其特征在于：步骤6中，具体包括：

坐标变量mClickX和mClickY,是android系统的浮点类型float的变量，用来记录点击控件的位置坐标，

坐标变量clickX和clickY，用来记录用户点击时的横坐标和纵坐标，

根据坐标变量clickX和clickY，设置点击的位置坐标，定义setClickXY(floatclickX, float clickY)方法。

4.如权利要求1所述的按钮波纹动画效果的实现方法，其特征在于：步骤8中，通过Math.abs(bounds.width())和Math.abs(bounds.height())获取资源的宽和高的绝对值，然后存入控件宽mViewWidth、控件高mViewHeight两个变量参数中。

5.如权利要求4所述的按钮波纹动画效果的实现方法，其特征在于：步骤8中，通过Math.sqrt((mViewWidth * mViewWidth + mViewHeight * mViewHeight)) 来计算波纹的最大半径，然后存入maxRadius参数中；

然后，调用执行属性动画类ValueAnimator，通过属性动画提供的方法ofInt，设定动画变化开始值为0，结束值为波纹的最大半径。

6.如权利要求5所述的按钮波纹动画效果的实现方法，其特征在于：步骤8中，调用执行属性动画类ValueAnimator，通过属性动画提供的方法addUpdateListener，用来监听数值的变化，实现数值的变化对半径mRadius进行修改。

7.如权利要求6所述的按钮波纹动画效果的实现方法，其特征在于：步骤8中，调用执行属性动画类ValueAnimator，通过属性动画提供的方法setDuration，用来设置动画变化的时长。