drop.js模拟水滴下拉刷新效果

下拉刷新--模仿水滴设计

下拉刷新—模仿水滴这种拟物设计曾经广泛应用于iOS的界面中，上图的下拉刷新效果正是模仿自苹果的Podcast（播客）。随着系统扁平化设计的普及，这种让人一目了然的小动画逐渐被更加标准的旋转菊花图标所替代。至于拟物与扁平设计谁更优，已经不再重要。仅想通过Web技术再次实现这个神奇的水滴效果，作为对经典设计的致敬。

在效果中，圆圈随着手势的变化被拉长，并且在回弹时速度由快变慢，呈现出一种橡皮的感觉。速度的缓慢变化可以通过tween.js中的缓动函数来实现。而变形的圆圈使用CSS3实现较为困难，因此采用了canvas直接绘制。此外，还可以使用SVG，其与canvas的主要区别在于渲染方式不同，但圆圈的坐标和半径等参数是相同的。经过仔细分析，决定将变形的圆圈分为三个部分：上下两个圆圈，以及中间一个向内凹陷的矩形。