Android高仿path小球刷新效果，类似IOS果冻效果
simon灰灰
8年前
<h2><strong>一.概述</strong></h2> <p>相信用过path app的人都会被其精美的效果给吸引到，作为一名用户，我首先被其吸引都的就是其时间轴下拉刷新后类似于ios的果冻效果。同时作为一名coder，我们更应该好奇它是怎么实现的。于是乎，在百度的指引下，并没有什么斩获，既然如此，那就由我们自己撸出来吧！</p> <p>下面看看我们自己撸出来的效果和path原装效果的区别吧。（注意重点在小球的果冻效果哦O(∩_∩)O）</p> <p><img src="https://simg.open-open.com/show/3cfc73d69ab37252545b69f06d5af1dd.gif"></p> <p>这里写图片描述</p> <p><img src="https://simg.open-open.com/show/1c3aaaac23006b5297b66d754029762c.gif"></p> <p>这里写图片描述</p> <p><img src="https://simg.open-open.com/show/307282a8e0c438cdc06159bbd1bf4da4.gif"></p> <p>这里写图片描述</p> <p>效果还是挺不错的。下面就开始撸代码之旅了~</p> <h2><strong>二.分析</strong></h2> <p>小球是会动来动去的，所以我们肯定不会笨到直接画个圆来代替~那我们应该怎么办呢？这时候就需要三次贝塞尔曲线来画圆啦。</p> <p>画圆的学习我这里就不陈述了。大家可以看看这个大神写的</p> <p>http://www.jianshu.com/p/791d3a791ec2很有帮助！</p> <p>现在接着往下走（我当你已经学会画圆的技巧了`( <em>∩_∩</em> )′）<br> OK,假设我们已经有个一个圆<br> ↓↓↓</p> <p><img src="https://simg.open-open.com/show/75a2ebbe3bd23b0acfa0180ed731c7c0.png"></p> <p>这里写图片描述</p> <p>参考path的下拉时效果：</p> <ol> <li> <p>下拉时，如果下拉距离低于某个值则松手会直接复位到正常状态</p> <pre> （下拉过程中竖线上面的宽度变小，下面不变，小球在一定下拉范围内宽度变小） </pre> </li> <li> <p>若下拉距离大于某个值，则小球（圆）向下移动到某一个位置A</p> </li> <li> <p>小球移动到位置A后若继续下拉，则小球与竖线同时向下移动且之间距离不变</p> </li> <li> <p>下拉过程中竖线上面的宽度变小，下面不变</p> </li> </ol> <p>→按照这个思路。说说我们的解决办法吧。<br> 下拉时我们的p1、p1.left、p1.right相关坐标改变 ---->造成小球被拉伸效果<br> p2、p2.left、p2.right、p4.left、p4.right相关坐标改变 ---->造成小球宽度变小，利用简谐振动函数造成小球回弹效果。<br> 要保持小球与竖线同时向下移动且之间距离不变则利用layout来改变即可</p> <p>参考path的复位时效果：</p> <p>小球复位<br> 复位后小球实现回弹抖动的效果</p> <p>其实有了之前下拉的分析，复位也几乎类似，唯一需要注意的是，小球移动到位置A后若继续下拉，则复位的位置不是0而是 （-移动到A位置后继续下拉的距离），这点需要好好注意下。</p> <p>整个逻辑的过程如下。</p> <p><img src="https://simg.open-open.com/show/9bff03969548ac0994b93fff18d8f6ce.jpg"></p> <p>这里写图片描述</p> <h2><strong>三.实现</strong></h2> <p>这里我用的下拉回弹是在网上找到的一个pullscrollview，我做了些小修改（不过不可否认的是这个pullscrollview是有小bug的，这里为了演示就将就了，大家可以换成自己喜欢的下拉刷新库）</p> <p>简要说下pullscrollview大致思路：<br> 主要方法是doActionMove(MotionEvent event)</p> <p><img src="https://simg.open-open.com/show/59620556c3063d2e26e0cfb517ac4cf5.jpg"></p> <p>代码中都有注释，很好理解，不再解释，大家自己下载代码看即可。 这里说明下，在pullscrollview中我定义了三个接</p> <p> </p> <p><img src="https://simg.open-open.com/show/cd03b700e0840873cb1dfa391209d248.png"></p> <p>正是这三个接口传递出的 y 让jellyball能根据滑动的距离做出相应的操作，实现jellyball与任一下拉刷新库的解耦。</p> <p>-----------------------------------此处是分割线-------------------------------------------</p> <p>下面就是今天的主角----jellyball 了！</p> <p>首先是一大堆的变量</p> <p><img src="https://simg.open-open.com/show/b582aec21c8fd8354f42806a973c9414.jpg"></p> <p>这里写图片描述</p> <p><img src="https://simg.open-open.com/show/8c1c98d826b63d3c911fec82951a5bad.png"></p> <p>这里写图片描述</p> <p>然后进行基本初始化得到变量需要的数据</p> <p><img src="https://simg.open-open.com/show/e68380f1cdc79a3b731f78ad7da36e2f.jpg"></p> <p>这里写图片描述</p> <p>下面我们主要来看看setPullHeight、setUpHeight这两个函数<br> 图片中的代码都有注释了，这里就不再描述了（个人感觉图片的展示效果比贴代码的效果更好看，所以代码基本都是贴图片的`( <em>∩_∩</em> )′）</p> <p>setPullHeight方法</p> <p><img src="https://simg.open-open.com/show/29c21c69e96340794bce25703205d9e3.jpg"></p> <p>这里写图片描述</p> <p>setUpHeight方法</p> <p><img src="https://simg.open-open.com/show/d57cf073d7b40e5662715b88223c4a02.jpg"></p> <p>这里写图片描述</p> <p>ondraw绘图方法</p> <p><img src="https://simg.open-open.com/show/c00ddc9c36430255f08c738305039de2.jpg"></p> <p>这里写图片描述</p> <p><img src="https://simg.open-open.com/show/7ee2beefe2c24664a9b45b8aa438de66.jpg"></p> <p>这里写图片描述</p> <p>从上述代码中可以看出连接setPullHeight、setUpHeight与ondraw方法的桥梁就是<br> setType方法，每次设置后都会进行invalidate();进行一次ondraw重绘操作</p> <p><img src="https://simg.open-open.com/show/c78b7cbf52b044de39659bd2254db77a.png"></p> <p>这里写图片描述</p> <p>下面再来看看setType中的startRebounceAnim方法<br> 之所以这里用了动画，主要了想利用applyTransformation方法，该方法会自动计算setDuration中设定的时间此刻的时间流逝比，这样就省去了我们自己去计算的麻烦（当然，你如果不喜欢这种方法，你也可以自己写个定时器，自己计算时间流逝比）</p> <p><img src="https://simg.open-open.com/show/ae8ef4db24a8f8771c4b88801d24e6fe.jpg"></p> <p>这里写图片描述</p> <p>得到rebounceInterpolatedTime后，我们的回弹方法在ondraw方法中的rebounceAction方法中用到。</p> <p><img src="https://simg.open-open.com/show/60b83b6265210473d811dc763da6e4ad.jpg"></p> <p>这里写图片描述</p> <p>该方法又会调用一系列这些方法</p> <p><img src="https://simg.open-open.com/show/0f0feadfe14b0d7578db61cbf66d8cdc.jpg"></p> <p>这里写图片描述</p> <p>这些方法顾名思义可知是为了根据时间流逝比得到回弹的距离。 那么问题来了，怎么样让一个回弹距离是从大到小最后逐渐变为0呢？</p> <p>正弦、余弦函数？NO！看看函数图像就知道，并不会从大到小的变化（虽然最后会变成0） 那么答案是什么呢？ 我的答案是</p> <p>简谐振动函数（我怎么知道的呢？百度....） 地址就是</p> <p>http://www.jcodecraeer.com/IOS/2015/0614/3038.html 大家可以去学习下。</p> <p>这里我贴出主要方法</p> <p><img src="https://simg.open-open.com/show/fe6dd191a2b487816173d5e3cf511ba5.png"></p> <p>这里写图片描述</p> <p><img src="https://simg.open-open.com/show/71bad9c6d522a3677cd8aa4fdc5cd8c7.gif"></p> <p>这里写图片描述</p> <p><img src="https://simg.open-open.com/show/221bfdb78fe56e559bdbbba2dfe9cb0e.jpg"></p> <p>这里写图片描述</p> <p>其中式子中的 5 相当于阻尼系数，数值越小幅度越大；式子中的 30 相当于震荡频率 ，数值越大震荡次数越多。</p> <p><img src="https://simg.open-open.com/show/0dd175af59613d86959acd1781278708.jpg"></p> <p>这里写图片描述</p> <p>大家可以到这里实时根据函数看出图像 https://www.desmos.com/calculator</p> <p>我用到的函数算式是 ((1 - Math.exp(-2 <em>(x + 0.052)) </em> Math.cos(20 <em> </em></p> <p>(x +</p> <p>rebounceX / 3 * 2 之所以x需要+0.052是因为我测试算式时在这个 https://www.desmos.com/calculator网站上看到当x=0.052时，算式得到的值才是0，若x=0，则算式值不是0（也就是我们其实的时候算式值有偏移量，这并不是我们想要的。）</p> <p>而之所以是x+0.052,不是x-0.052，我想这得问你的高中数学老师了::>_<::</p> <p>截图，写代码写了一大串，终于算是撸出来我们想要的效果了！给自己一个赞！❤</p> <h2><strong>四.使用方法</strong></h2> <p>使用方法也超级简单，三行代码轻松搞定。（因为我把逻辑操作全部封装到了jellyball中，大家可以轻松使用到自己的下拉刷新库中了，只需要获取且暴露出自己下拉刷新库下拉和复位和刷新时的接口即可！）<br> 在Mainacitivty中</p> <p><img src="https://simg.open-open.com/show/8cece1cd62d20029b20a8d4bd3d42e42.jpg"></p> <p> </p> <p> </p> <p> </p> <p></p> <p></p>