一种弹跳加载效果的实现方法与流程

本发明涉及交互动画效果设计技术领域，具体说是一种弹跳加载效果的实现方法。

背景技术

现有的app，由于各种原因，在启动时、运行中均会出现等待加载的情况。

例如：大多数app都要与服务器进行数据交换，app向服务器发出交互请求，服务器则解析、处理请求后，再向app返回相应数据，app接收数据并进行后续处理，例如：进一步的计算、验证或显示等等，如果没有接收到数据则提示出错信息。

在这个数据交换过程中，由于网络原因，需要花费一定时间，也就是说用户要等待加载完成，这个时候就会出现等待加载的情况。因此会涉及到loading加载机制，该机制用于告诉用户，正在加载数据中，您等待，以便减弱用户的等待焦虑。

再例如：前端框架开发，和后台查数据的语法不成熟，或导致页面加载速度过慢，需要用loading效果来过渡。

又例如：根据loading加载机制的使用时间不同，可大致划分为启动加载页、内容加载页、下载应用加载页三大类。加载页不仅可以缩短实际的等待时间，弥补技术、网络等基础因素的缺陷，同时也承担着产品追求极致体验的重任。是用户体验三要素之。

loading加载机制中，交互动画效果设计是缓解用户的等待焦虑，提升用户体验的方式之一，对交互动画效果进行优化有助于提升用户体验。

技术实现要素：

针对现有技术中存在的缺陷，本发明的目的在于提供一种弹跳加载效果的实现方法，图案模拟上下弹跳效果，且弹跳中图案不断变化形状、颜色等，分散用户的关注度，效果酷炫、体验好，系统资源消耗少，提升app开发效率，可作为标准模块加载到各种项目中，作为加载页使用。

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

一种弹跳加载效果的实现方法，其特征在于，包括如下步骤：

定义控件lodingbounceview，继承android系统提供的线性控件linearlayout，

在该控件中：

在构造方法里加载实际运动的控件view，这是一个自定义控件loadingbouncepath，继承android系统提供的view控件，

设置弹跳的高度dropheight，

初始化运动动画，

在start()方法中，开始执行动画；

定义绘图控件loadingbouncepath，继承android系统提供的view控件，

在该控件中：

在构造方法中定义绘制用的画笔paint对象，用来绘制各种图案，

定义了变化参数初始值为runparam=-1，和不同形状图案之间的标记位初始值，

在ondraw回调中，根据runparam的不同值来进行不同图案的绘制。

在上述技术方案的基础上，每次通过递增或递减50dp来计算出对应的像素值dropheight。

在上述技术方案的基础上，所述初始化运动动画，具体包括：

创建若干下跌的动画dropset,dropset1,dropset2,dropset3，dropva(0,dropheight)，且设置加速下跌的插值器，

定义一个动画列表alist1，

创建一个旋转的动画rolation90，且设置减速的插值器，

创建上升的动画riseset1，上升高度为dropheight，且设置减速的插值器，

调用alist1.playtogether(riseset1,rolation90)，实现同时执行上升动画riseset1和旋转动画rolation90，设置了同样的时间间隔duration；

定义一个动画列表alist2，

创建一个旋转的动画rolation120，且设置减速的插值器，

创建上升的动画riseset2，上升高度为dropheight，且设置减速的插值器，

调用alist2.playtogether(riseset2,rolation120)，实现同时执行上升动画riseset1和旋转动画rolation90，设置了同样的时间间隔duration；

定义一个动画列表alist3，

创建一个旋转的动画rolation180，且设置减速的插值器，

创建上升的动画riseset3，上升高度为dropheight，且设置减速的插值器，

调用alist3.playtogether(riseset3,rolation180)，实现同时执行上升动画riseset1和旋转动画rolation90，设置了同样的时间间隔duration。

在上述技术方案的基础上，所述在start()方法中，开始执行动画，具体步骤为：

首先，调用alist1.start()及view.start()，开始执行alist1动画列表，

然后，执行dropset1下跌动画，

然后，开始执行alist2动画列表，

然后，执行dropset2下跌动画，

然后，开始执行alist3动画列表，

然后，执行dropset3下跌动画，

然后，根据是否继续执行动画的标记play来判断是否继续执行上升动画集合alist1，还是停止动画。

在上述技术方案的基础上，动画集合列表alist1添加了动画完成的监听器，

view调用start()后，在每次执行动画时，runparam的值加一，根据runparam不同的值，调用invalidate()方法刷新界面，进入ondraw()回调中开始执行图案绘制和图案变形。

在上述技术方案的基础上，为画笔paint对象定义了颜色变化的属性动画colorva,valueanimator.ofint(0,255)设置了变化值是从0到255，设置了匀速变化的插值器，颜色变化是均匀变化的。

在上述技术方案的基础上，所述不同形状图案之间的标记位初始值，默认为：

st，表示从正方形变为三角形,

tc，表示从三角形变为圆形,

cs，表示从圆形变为正方形。

本发明所述的弹跳加载效果的实现方法，图案模拟上下弹跳效果，且弹跳中图案不断变化形状、颜色等，分散用户的关注度，效果酷炫、体验好，系统资源消耗少，提升app开发效率，可作为标准模块加载到各种项目中，作为加载页使用（等待加载界面）。

附图说明

本发明有如下附图：

图1本发明的流程图。

具体实施方式

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

如图1所示，本发明所述的弹跳加载效果的实现方法，包括如下步骤：

定义控件lodingbounceview，继承android系统提供的线性控件linearlayout，

在该控件中：

在构造方法里加载实际运动的控件view，这是一个自定义控件loadingbouncepath，继承android系统提供的view控件，

设置弹跳的高度dropheight，

初始化运动动画，

在start()方法中，开始执行动画；

定义绘图控件loadingbouncepath，继承android系统提供的view控件，

在该控件中：

在构造方法中定义绘制用的画笔paint对象，用来绘制各种图案，

定义了变化参数初始值为runparam=-1，和不同形状图案之间的标记位初始值，

在ondraw回调中，根据runparam的不同值来进行不同图案的绘制。

在上述技术方案的基础上，每次通过递增或递减50dp来计算出对应的像素值dropheight。

在上述技术方案的基础上，所述初始化运动动画，具体包括：

创建若干下跌的动画dropset,dropset1,dropset2,dropset3，dropva(0,dropheight)，且设置加速下跌的插值器，

定义一个动画列表alist1，

创建一个旋转的动画rolation90，且设置减速的插值器，

创建上升的动画riseset1，上升高度为dropheight，且设置减速的插值器，

调用alist1.playtogether(riseset1,rolation90)，实现同时执行上升动画riseset1和旋转动画rolation90，设置了同样的时间间隔duration；

定义一个动画列表alist2，

创建一个旋转的动画rolation120，且设置减速的插值器，

创建上升的动画riseset2，上升高度为dropheight，且设置减速的插值器，

调用alist2.playtogether(riseset2,rolation120)，实现同时执行上升动画riseset1和旋转动画rolation90，设置了同样的时间间隔duration；

定义一个动画列表alist3，

创建一个旋转的动画rolation180，且设置减速的插值器，

创建上升的动画riseset3，上升高度为dropheight，且设置减速的插值器，

调用alist3.playtogether(riseset3,rolation180)，实现同时执行上升动画riseset1和旋转动画rolation90，设置了同样的时间间隔duration。

在上述技术方案的基础上，所述在start()方法中，开始执行动画，具体步骤为：

首先，调用alist1.start()及view.start()，开始执行alist1动画列表，

然后，执行dropset1下跌动画，

然后，开始执行alist2动画列表，

然后，执行dropset2下跌动画，

然后，开始执行alist3动画列表，

然后，执行dropset3下跌动画，

然后，根据是否继续执行动画的标记play来判断是否继续执行上升动画集合alist1，还是停止动画。

在上述技术方案的基础上，动画集合列表alist1添加了动画完成的监听器，

view调用start()后，在每次执行动画时，runparam的值加一，根据runparam不同的值，调用invalidate()方法刷新界面，进入ondraw()回调中开始执行图案绘制和图案变形。

例如，可采用如下代码：

alist1.addlistener(newanimend(){

@override

publicvoidonanimationend(animatoranimation){

super.onanimationend(animation);

dropset1.start();

view.nextpath();

}

});

publicvoidnextpath(){

log.i(tag,"nextpath:"+runparam);

runparam++;

if(runparam==6){

runparam=0;

clear();

}

invalidate();

}。

在上述技术方案的基础上，为画笔paint对象定义了颜色变化的属性动画colorva,valueanimator.ofint(0,255)设置了变化值是从0到255，设置了匀速变化的插值器，颜色变化是均匀变化的。

在上述技术方案的基础上，所述不同形状图案之间的标记位初始值，默认为：

st，表示从正方形变为三角形,

tc，表示从三角形变为圆形,

cs，表示从圆形变为正方形。

以此为实施例，具体绘制过程见下。

在上述技术方案的基础上，当runparam=0时，

判断如果属性动画colorva正在移动，就根据colorva的变化值给创建的画笔paint设置对应的颜色值，intd=(integer)colorva.getanimatedvalue()，paint.setargb(255,255-d,d,0);

判断如果属性动画colorva没有移动，就让它开始移动。

在上述技术方案的基础上，根据不同形状图案之间的标记位初始值的默认值，进行如下绘制过程：

开始绘制正方形变为三角形的过程图案：

先定义好路径squetotri，重置path到初始状态,pathsquetotri=newpath()，path是android系统提供的路径api，设置好路径后可以使用画笔绘制路径；

定义相应的属性动画squetotriva；

如果squetotriva==null时，设置标记位st=2,squetotriva=bwvalueanimator.getvalueanimator(0,w/2,500)，先创建出squetotriva，传入的参数为运动的起始值0和自身宽度w的一半，动画的时间间隔500，开启squetotriva动画；

如果squetotriva已经存在，设置标记位st=2，开启squetotriva动画；

如果squetotriva正在移动，获取squetotriva的移动值value,动态计算出value1和value2值，确定出四个变化点的动态值，左下点x1等于value1的值,y1值等于自身的高-value2;右下点x2等自身宽-value1,y2=自身高-value2;顶点左边x3=value,顶点右边=自身的宽度-value；

先把画笔移动到(x1,y1)的位置，然后动态的画了三条直线，最后闭合当前路径；

当squetotriva一直处于移动中时，不断的更新界面，改变图案的形状；

当runparam=1时，表示此刻要绘制三角形：先定义好路径pathtri，重置pathtri到初始状态，把画笔移动到自身宽度的中间，画三条直线，最后闭合当前路径，就画出了三角形；

当runparam=2时：先更改画笔paint的颜色，然后开始绘制三角形变为圆形的过程；先定义好路径tritocir，重置tritocir到初始状态，pathtritocir=newpath()，path是android系统提供的路径api，设置好路径后可以使用画笔绘制路径；

定义相应的属性动画tritocirva；

先定义一个变量num,如果tritocirva==null时，设置标记位tc=2,tritocirva=bwvalueanimator.getvalueanimator(0,num,500)，先创建出tritocirva，传入的参数为运动的起始值0和变量num，动画的时间间隔500，开启tritocirva动画；

如果tritocirva已经存在，设置标记位tc=2，开启tritocirva动画；

如果tritocirva正在移动，获取tritocirva的移动值param,计算出三角形的三个顶点，左下顶点x1=自身宽度/2-之前定义的sqrt3/4*宽度w，y1=0.75f*h;右下顶点为x2=宽度w/2+sqrt3/4*w,y2=0.75f*h;顶部顶点为x3=宽度w/2,y3=0;计算出三个顶点分别向外扩张的调节点，根据三角形一边的垂直平分线函数计算出左上调节点为point1，右上调节点为point2,下部调节点为point3；

先把画笔移动到三角形的顶部顶点(x3,y3)的位置，根据上面计算出来的三个调节点和三个顶点来开始绘制圆滑曲线，tritocir.quadto(point1[0],point1[1],x1,y1)，quadto用来绘制贝塞尔曲线的api，调节点point1[0]、point[1]是控制点，顶点x1、y1是结束点，分别根据三个调节点和对应的顶点来绘制曲线，最后闭合当前路径；

当tritocirva一直处于移动中时，不断的更新界面，改变图案的形状；

当runparam=3时，开始绘制圆形图案：先定义好路径pathcir，重置pathcir到初始状态，开始,pathcir.addcircle(w/2,h/2,h/2,path.direction.ccw)，第一个参数是圆心x轴坐标为宽度w/2,第二个参数是圆心y轴坐标为高度h/2，第三个参数是半径为h/2，第四个参数是画圆的方向，path.direction.ccw是逆时针方向画圆；

当runparam=4时：先更改画笔paint的颜色，然后开始绘制圆形变为正方形的过程；先定义好路径cirtosque，重置cirtosque到初始状态，pathcirtosque=newpath()，path是android系统提供的路径api，设置好路径后可以使用画笔绘制路径；

定义相应的属性动画cirtosqueva；

先定义一个变量num,如果cirtosqueva==null时，设置标记位cs=2,cirtosqueva=bwvalueanimator.getvalueanimator(0.27f*w,num,500)，

先创建出cirtosqueva，传入的参数为运动的起始0.27f*w和变量num，动画的时间间隔500，开启cirtosqueva动画；如果cirtosqueva已经存在，设置标记位cs=2，开启cirtosqueva动画；

如果cirtosqueva正在移动，获取cirtosqueva的移动值param,先确定圆形上下左右四个顶点的坐标值，上顶点x1=宽度w/2,y1=0;右顶点x2=w,y2=高度h/2;下顶点x3=w/2,y3=h;左顶点x4=0,y4=h/2;再计算出出圆形变为正方形过程中的四个调节点，设置调节参数par=0.8f,右上调节点point1,右下调节点point2,左下调节点point3,左上调节点point4；

先把画笔移动到圆形的顶部顶点(x1,y1)的位置，根据上面计算出来的四个调节点和圆形上下左右四个顶点开始绘制圆滑曲线，tritocir.quadto(point1[0],point1[1],x2,y2)，quadto用来绘制贝塞尔曲线的api，调节点point1[0]、point[1]是控制点，顶点x2、y2是结束点，分别根据四个调节点和对应的顶点来绘制曲线，最后闭合当前路径；

当runparam=5时，开始绘制正方形图案：先定义好路径pathsqure，重置pathsqure到初始状态，把画笔移动到（0，0）位置，开始绘制三条直线，最后再回到原点位置闭合整个正方形图案。

综上，在上述绘制过程中，view分别根据runparam的不同数值进行了一系列的“变身”动画，先是由正方形变为三角形、三角形、三角形变为圆形、圆形、圆形变回正方形、最后又回到正方形，其中变形时伴随着自身颜色的变化，同时伴随着lodingbounceview的上下弹跳动画，整个动画效果上下弹跳且自身图案颜色不断变化的动画效果就实现了。

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