一种笑脸样式的开关按钮的生成方法与流程

本发明涉及开关按钮的式样设计及生成算法技术领域，具体说是一种笑脸样式的开关按钮的生成方法。

背景技术：

现有的android系统中，提供了开关按钮togglebutton和switch控件，都继承自compoundbutton这一抽象类。

togglebutton常用的属性很简单就两个：

android:textoff：按钮关闭时显示的文本，

android:texton：按钮开启时显示的文本。

switch的外观分为两种：

滑块外观（switch_bg.xml），定义了三种状态下的图片，一种是state_enable（可用状态）为true时，一种是state_pressed（按下状态时）为true，一种是state_checked（选择状态）为true。每种状态对应不同的背景图片。

滑动轨道（track_bg.xml），定义了两种状态下的图片，一种是可用状态即默认状态下显示track_default图片，一种是不可用状态下，显示track_default图片。

但是，生成的开关按钮都没有自定义样式的效果，个性哈程度不够。

根据设计，拟实现如下样式的开关按钮：开关按钮为一笑脸图，点击开关，开关打开或关闭，笑脸随着开关的打开和关闭有对应的滚动动画执行，例如：

当开关打开的过程中，笑脸由灰色变为蓝色，且笑脸执行眨眼和嘴型变化的动画操作，

当开关关闭的过程中，笑脸由蓝色变为灰色，且笑脸执行嘴型变化的动画。

上述开关按钮，呈现笑脸图案，适合于酷我音乐盒的设置选项中使用，动画效果提升app和用户的亲和程度，而且直观易于辨识。

技术实现要素：

针对现有技术中存在的缺陷，本发明的目的在于提供一种笑脸样式的开关按钮的生成方法，开关按钮为一笑脸图，自定义随着开关的打开和关闭笑脸有相应的动画效果，适合在app的设置界面中使用，动画流畅，提升用户体验。

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

一种笑脸样式的开关按钮的生成方法，其特征在于，包括如下步骤：

定义开关控件funswitch，继承android系统提供的控件view，

在控件的构造函数中，包括以下内容：

设置开关的长宽比例mwidthandheightpercent，定义绘制区域的画笔mpaint对象，用来绘开关和笑脸区域，

在onsizechanged回调中，获取屏幕宽高，然后根据屏幕宽度和高度来设置开关矩形的绘制点，所述绘制点包括上下左右四个坐标点top,left,bottom,right，

设置开关两边弧线的路径和角度，设置好路径后使用画笔绘制路径，

在ondraw回调中，先绘制静态背景的圆弧矩形区域，然后动态绘制最上面的笑脸区域。

在上述技术方案的基础上，定义开关控件funswitch时，同时实现android系统提供的属性动画propertyanimator里的valueanimator的两个监听器animatorupdatelistener和animatorlistener。

在上述技术方案的基础上，所述绘制点默认取值如下：

top和left都等于0，bottom是控件的高度值，right表示控件的宽度，也就是控件的左右边的x坐标值。

在上述技术方案的基础上，所述设置开关两边弧线的路径和角度，默认取值如下：

mbackgroundpath.arcto(backgroundrecf,90,180)，

mbackgroundpath.arcto(backgroundrecf,270,180),

其中：

mbackgroundpath是android系统提供的path路径对象，

backgroundrecf表示控件的区域范围，是android系统提供的rectf变量，

arcto是path对象的绘制弧度的api。

在上述技术方案的基础上，在动画onanimationupdate回调中，

通过执行animation.getanimatedvalue()获取笑脸的移动距离，赋值给变量manimationfraction，来设置画布移动的原点，

通过调用android系统提供的重绘函数invalidate()，触发ondraw回调。

在上述技术方案的基础上，自定义方法getforegroundtransitionvalue()，

然后执行canvas.translate(getforegroundtransitionvalue(),0)，其中：

canvas是android系统提供的画布，用户可以在上面进行绘制，

translate是android提供的移动画布的api，能够把当前画移动到指定的位置，后面画布的操作就都以最新的原点作为参考点；

所述方法getforegroundtransitionvalue()包括：

设定返回值result，

根据boolean类型的变量misopen判断开关的状态，

开关状态为true时，进一步判断变量misduringanimation确定移动笑脸动画是否执行中，

如果执行中，则判断manimationfraction>normal_anim_max_fraction，normal_anim_max_fraction是定义的常量值1，表示动画执行的最大值，

如果大于则result取mtransitionlength，mtransitionlength表示移动的最长距离，值为right-bottom，

如果不大于则result取mtransitionlength*manimationfraction，

如果非执行中，则result取mtransitionlength；

开关状态为false时，进一步判断变量misduringanimation确定移动笑脸动画是否执行中，

如果执行中，则result取mtransitionlength*manimationfraction，

如果非执行中，则result取0。

在上述技术方案的基础上，根据移动数值manimationfraction，进一步绘制眨眼动画，通过对眼睛区域的高度做缩小和放大的处理，模拟出眨眼动画，其中：

设定变量eyerectheight，记录眼睛区域的高度值，

eyerectheight=eyerectheight*manimationfraction，manimationfraction作为缩放控制的变量值，

调用canvas.drawoval(lefteye,mpaint)绘制一个椭圆，其中：

lefteye是左眼睛绘制区域，由控件中心点和偏移量以及eyerectheight计算出来，

mpaint为画笔，

相应的，左眼睛绘制区域替换为右眼睛绘制区域，完成双眼的绘制。

在上述技术方案的基础上，根据移动数值manimationfraction，进一步绘制张嘴的动画，根据manimationfraction的变化值，计算出嘴的中间点的y轴变化，再绘制，就形成了张嘴闭嘴的动画其中：

设定变量path，为android系统提供的线条的变量，

调用path.moveto(mouthleft,mouthtop)将开始点移动到嘴的左上角所表示的坐标点上，其中：

mouthleft和mouthtop分别表示嘴角区域的左上角坐标点，

调用path.quadto(controlx,controly,mouthright,mouthtop)根据中间的控制点和右上角坐标点绘制一条贝赛尔曲线，其中：

controlx和controly是贝赛尔曲线的中间控制点，模拟并控制嘴的曲线，动态控制中间控制点的y坐标，就会达到张嘴闭嘴的动画效果，

mouthright和mouthtop表示嘴区域的右上角坐标点，

调用path.close()构成一个封闭的曲线，

执行canvas.drawpath(path,mpaint)将线条绘制在画布上，呈现嘴的形状。

在上述技术方案的基础上，为了响应用户点击或滑动操作，

设定valueanimator动画对象mvalueanimator的移动范围是1.0f到0之间，

设定mvalueanimator的间隔时长和更新回调函数，以及移动动画开始、结束、重复执行以及取消时的操作。

本发明所述的笑脸样式的开关按钮的生成方法，开关按钮为一笑脸图，自定义随着开关的打开和关闭笑脸有相应的动画效果，适合在app的设置界面中使用，动画流畅，提升用户体验。

本发明所述的笑脸样式的开关按钮的生成方法，适合于酷我音乐盒的设置选项中使用，动画效果提升app和用户的亲和程度，而且直观易于辨识。用户体验良好，动画过渡顺畅，开或者关操作有个动画交互的过程，而不是单一的切换两张图片，不会显的单调和生硬，提升app和同类app间的差异程度，细节设计体现一个公司做产品的态度，而且便于根据美工的设计来进行扩展和修改。

附图说明

本发明有如下附图：

图1本发明的流程图。

具体实施方式

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

如图1所示，本发明所述的笑脸样式的开关按钮的生成方法，包括如下步骤：

定义开关控件funswitch，继承android系统提供的控件view，

在控件的构造函数中，包括以下内容：

设置开关的长宽比例mwidthandheightpercent，定义绘制区域的画笔mpaint对象，用来绘开关和笑脸区域，

在onsizechanged回调中，获取屏幕宽高，然后根据屏幕宽度和高度来设置开关矩形的绘制点，所述绘制点包括上下左右四个坐标点top,left,bottom,right，

设置开关两边弧线的路径和角度，设置好路径后使用画笔绘制路径，

在ondraw回调中，先绘制静态背景的圆弧矩形区域，然后动态绘制最上面的笑脸区域。

在上述技术方案的基础上，定义开关控件funswitch时，同时实现android系统提供的属性动画propertyanimator里的valueanimator的两个监听器animatorupdatelistener和animatorlistener。

在上述技术方案的基础上，在控件的构造函数中，设置开关的默认状态为关闭状态。

在上述技术方案的基础上，所述绘制点默认取值如下：

top和left都等于0，bottom是控件的高度值，right表示控件的宽度，也就是控件的左右边的x坐标值。

在上述技术方案的基础上，所述设置开关两边弧线的路径和角度，默认取值如下：

mbackgroundpath.arcto(backgroundrecf,90,180)，

mbackgroundpath.arcto(backgroundrecf,270,180),

其中：

mbackgroundpath是android系统提供的path路径对象，

backgroundrecf表示控件的区域范围，是android系统提供的rectf变量，

arcto是path对象的绘制弧度的api。

在上述技术方案的基础上，在动画onanimationupdate回调中，

通过执行animation.getanimatedvalue()获取笑脸的移动距离，赋值给变量manimationfraction，来设置画布移动的原点，

通过调用android系统提供的重绘函数invalidate()，触发ondraw回调。

例如，可采用如下代码：

publicvoidonanimationupdate(valueanimatoranimation){

manimationfraction=(float)animation.getanimatedvalue();

invalidate();

}。

在上述技术方案的基础上，自定义方法getforegroundtransitionvalue()，

然后执行canvas.translate(getforegroundtransitionvalue(),0)，其中：

canvas是android系统提供的画布，用户可以在上面进行绘制，

translate是android提供的移动画布的api，能够把当前画移动到指定的位置，后面画布的操作就都以最新的原点作为参考点；

所述方法getforegroundtransitionvalue()包括：

设定返回值result，

根据boolean类型的变量misopen判断开关的状态，

开关状态为true时，进一步判断变量misduringanimation确定移动笑脸动画是否执行中，

如果执行中，则判断manimationfraction>normal_anim_max_fraction，normal_anim_max_fraction是定义的常量值1，表示动画执行的最大值，

如果大于则result取mtransitionlength，mtransitionlength表示移动的最长距离，值为right-bottom，

如果不大于则result取mtransitionlength*manimationfraction，

如果非执行中，则result取mtransitionlength；

开关状态为false时，进一步判断变量misduringanimation确定移动笑脸动画是否执行中，

如果执行中，则result取mtransitionlength*manimationfraction，

如果非执行中，则result取0。

例如，可采用如下代码：

privatefloatgetforegroundtransitionvalue(){

floatresult;

if(misopen){

if(misduringanimation){

result=manimationfraction>normal_anim_max_fraction问号

mtransitionlength:mtransitionlength*manimationfraction;

}else{

result=mtransitionlength;

}

}else{

if(misduringanimation){

result=mtransitionlength*manimationfraction;

}else{

result=0;

}

}

returnresult;

}。上述算法分别根据开关的开启状态和笑脸控件是否移动来动态计算笑脸的移动距离result。

在上述技术方案的基础上，根据移动数值manimationfraction，进一步绘制眨眼动画，通过对眼睛区域的高度做缩小和放大的处理，模拟出眨眼动画，其中：

设定变量eyerectheight，记录眼睛区域的高度值，

eyerectheight=eyerectheight*manimationfraction，manimationfraction作为缩放控制的变量值，

调用canvas.drawoval(lefteye,mpaint)绘制一个椭圆，其中：

lefteye是左眼睛绘制区域，由控件中心点和偏移量以及eyerectheight计算出来，

mpaint为画笔，

相应的，左眼睛绘制区域替换为右眼睛绘制区域，完成双眼的绘制。

在上述技术方案的基础上，根据移动数值manimationfraction，进一步绘制张嘴的动画，根据manimationfraction的变化值，计算出嘴的中间点的y轴变化，再绘制，就形成了张嘴闭嘴的动画其中：

设定变量path，为android系统提供的线条的变量，

调用path.moveto(mouthleft,mouthtop)将开始点移动到嘴的左上角所表示的坐标点上，其中：

mouthleft和mouthtop分别表示嘴角区域的左上角坐标点，

调用path.quadto(controlx,controly,mouthright,mouthtop)根据中间的控制点和右上角坐标点绘制一条贝赛尔曲线，其中：

controlx和controly是贝赛尔曲线的中间控制点，模拟并控制嘴的曲线，动态控制中间控制点的y坐标，就会达到张嘴闭嘴的动画效果，

mouthright和mouthtop表示嘴区域的右上角坐标点，

调用path.close()构成一个封闭的曲线，

执行canvas.drawpath(path,mpaint)将线条绘制在画布上，呈现嘴的形状。

在上述技术方案的基础上，为了响应用户点击或滑动操作，

设定valueanimator动画对象mvalueanimator的移动范围是1.0f到0之间，

设定mvalueanimator的间隔时长和更新回调函数，以及移动动画开始、结束、重复执行以及取消时的操作。

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