一个利用贝塞尔曲线实现ScrollView滑动到顶部后阴影反馈效果

当ScrollView滑动到顶部后,根据手指在屏幕上继续下拉出现的阴影效果的简单实现方式,仅供学习参考,在实际项目中引用还需慎重!!!

技术点:

1、利用Path中的moveTo() 、quadTo()方法实现的二阶贝塞尔曲线生成阴影

    moveTo()方法就不做过多的介绍了,可以简单的理解为一个起始点。而quadTo()方法是android为开发者提供的一个生成二阶贝塞尔曲线方法,一段曲线用二阶足以!当然,还有三阶贝塞尔曲线生成方法:cubicTo(),然而android也只为我们提供到三阶,因为更高阶的贝塞尔曲线可以通过结合二阶和一阶来实现,其实贝塞尔曲线的核心就在于那个控制点,比如二阶曲线的控制点数量为1,三阶曲线的控制点数量为2... n阶曲线的控制点数量为n-1,以此类推。cubicTo()方法需要四个参数,这四个参数是干什么用的,或者说是怎么去传呢?前两个就是我们所说的核心:控制点坐标x,y,而后两个参数也是需要一个坐标,就是与moveTo()方法之对应的终点坐标,就好比moveTo()方法和lineTo方法成对使用是一个道理,要画一条直线肯定至少需要两个点:moveTo()是起点lineTo()是终点,而画一个二阶贝塞尔曲线也要依赖两个点moveTo()是起点,quadTo()的后两个参数为终点。好了,曲线出来了,那么怎么让曲线以上的部分变成阴影呢?实现也简单,设置好画笔就可以了,利用Paint的setStyle()方法传递Paint.Style.FILL参数即可,最后传入带有透明度的颜色即可,效果如下图


2、如何根据手势滑动来控制这段曲线?

这个问题也是实现此效果的核心,当然也是很简单的,简单的说下思路。首先我们要重写已经玩烂的onTouchEvent()方法,在 ACTION_DOWN中记录下手指按下的Y坐标,在ACTION_MOVE中算出实时的距离:就是当前手指的位置 - 初始按下的位置 ,就像这样

然后我们将上面介绍过的贝塞尔曲线画法封装一下就像这样:

因为需求确定,起始点就定在了屏幕的左上角,终点就定在屏幕的右上角,只需传入控制点即可但是我们如果无限的向屏幕下方滑动那么贝塞尔曲线的弧度也就越大,是不是感觉弧度太大也不是很美观,所以就要对他进行约束。这个约束条件就是当我们滑动Y的距离超过屏幕的1/10时就让这个距离固定在屏幕高度的1/10,如果小于1/10那么就根据我们手指移动的距离来与用户交互。

最后我们在onDraw()方法中调用它就行了,需要强调的是最后一定要调用canvas中的drawPath()方法,这个Path参数就是我们生成的贝塞尔曲线。

3、当手松开时,这段曲线如何平滑过渡到初始位置?

  此处的实现方式应该有很多种,这里我使用的是子线程进行多次计算然后通知主线程刷新UI的方式实现的。当我们在onTouchEvent方法中监听到ACTION_UP时我们就要让这段曲线复原,并且是平滑过渡回初始的位置,先上代码为敬:

这段是执行在子线程中的,可能你发现使用了synchronized关键字,为什么要用它?不用不行吗? 当然,不用也可以,效果没有没么好而已。当我们遇到手指多次去滑动屏幕时我们的onTouchEvent方法就会不断的响应我们,当我们划一次就会开一条子线程去执行release()方法,那么假设我现在划过第一次后线程还没执行完毕,我又划了第二次此时就会有两条线程在运行,而我们的阴影还没有复位又开始了下一次的计算并且更新UI那不乱套才怪呢,用户体验就很差。所以我们要对线程加个锁,当我这条线程没计算完毕时新的线程就休想执行,使用synchronized简单的实现了我们这个复杂的业务需求;剩下的就很简单了就是如何平滑的滚回去?当松开手时计算好的距离又一次派上用场了,因为这段曲线就是从这里平滑的滚回原位,从这个距离开始递减一直到0为止。

最后附上项目地址:https://github.com/415192022/PathDemo

希望能给些star给我一些支持,谢谢大家!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,591评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,448评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,823评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,204评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,228评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,190评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,078评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,923评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,334评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,550评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,727评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,428评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,022评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,672评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,826评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,734评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,619评论 2 354

推荐阅读更多精彩内容

  • 本文主要内容为贝塞尔曲线原理解析并用 SurfaceView 实现其展示动画 关于SurfaceView 的使用,...
    涤生_Woo阅读 13,425评论 5 94
  • 贝塞尔曲线开发的艺术 一句话概括贝塞尔曲线:将任意一条曲线转化为精确的数学公式。 很多绘图工具中的钢笔工具,就是典...
    eclipse_xu阅读 27,708评论 38 370
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,077评论 25 707
  • 什么是贝塞尔曲线,它能够做什么? 贝塞尔曲线的名称来源于一位就职于雷诺的法国工程师Pierre Bézier,他在...
    李晨玮阅读 2,741评论 2 19
  • 都40的人了,我也还不成熟。 跟同学聚在一起时,大家都会说:小冯还跟上学时一样,没变。 我当然明白大家是想说我还很...
    冯四阅读 245评论 0 0