0x0 前言

某设计网经常会有很多优秀漂亮的交互设计作品，有一天，偶遇这样的效果，动画流畅，交互自然，于是埋头自己解剖其中的元素，做了个开源控件，十来天有了一百来个star，觉得很受欢迎，今天专门写这潦草几笔，分享案发经过，希望对同行有所帮助。

0x1 准备

效果图

preview 效果分析 曲线部分

两个三阶贝塞尔曲线

1、默认状态：直线，首尾标注，默认值标注。
2、手指按下：曲线动画执行，标识小圆规则地放大，值的标注根据曲线波峰相对位置不变，向上同速移动，同时，标注背景渐变加深，动画结束。
3、手指拖动效果：曲线、小圆形、标注三者同时跟随触摸点移动，同时更新标注值。
4、手指离开屏幕：曲线收回动画执行，标识小圆规则缩小到默认状态，选中的值跟随波峰下沉到默认状态，标注背景渐变消失，动画结束。

圆形指示器部分

缩放效果

拆解状态三部分：默认状态、触摸过程中、触摸后状态。其中默认状态下指示器很小的圆形，距离水平曲线下方一个约定距离，当按下过程中，圆最下方坐标不变，圆直径逐渐增大，圆顶部与曲线的距离不变，直到动画结束。

功能分析

1、控件内元素：标尺、标注用的小圆、选中值，均可配置各自的颜色，
2、可配置值范围，
3、可配置默认值，
4、可实时监听选中的值。
5、可显示单位。

技术分析

曲线部分

通过静态截图可知本控件主要元素为触摸触发的曲线和其伸缩效果。让我们来简单分析一下曲线部分的结构：
//这里展示曲线拆解图
拆解后，触摸部分为六阶贝塞尔曲线，五个基准点，四个控制点，我们将它拆分成两个三阶曲线即可。其中，首尾基准点的Y坐标固定，X坐标随着触摸位置相对移动，剩下的基准点X坐标相对固定，Y坐标根据动画规律升降。再说控制点，为保障默认状态下，曲线部分为水平，首尾两个控制点的Y坐标固定，X坐标相对固定，中间两个控制点Y坐标和中间那个基准点一致，X相对中间基准点固定。
（通过上面的拆解，可以让曲线在默认状态下是一条水平直线，并且在按下状态下，与水平位置、波峰位置，能有比较自然的过度弧形，不至于那么生硬。）

圆形指示器部分

普通圆形，相对自身底部向上变大、向下缩小还原。

动画部分

按下时的动画采用普通的ValueAnimator，匀速LinearInterpolator。另外还有个选中值的背景变化，根据动画进度改变画笔Alpha值即可。
//这里写点动画代码啰。

0x2 代码实现

泡杯茶，挽起袖子开撸！
继承View：

先绘制出曲线效果：

改变其Y坐标，让曲线恢复默认状态：
绘制完整线条：

添加Touch事件拦截，按下时显示曲线：

添加动画效果：

绘制圆形指示器，根据动画进度改变其大小：

 canvas.drawCircle(this.fingerX, (float) 2 * height / 3 + spaceToLine + circleRadius, circleRadius, ballPaint);

添加其它辅助元素后，配置通用属性，抛出公共方法：

最后，测试一下:

完美 :) !