原标题:Android 自定义优雅的BezierSeekBar 之撸码解析
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 代码实现
泡杯茶&#x