文件名称：drop.js:水滴下拉刷新
文件大小：237KB
文件格式：ZIP
更新时间：2024-07-23 21:03:24
JavaScript
#下拉刷新--模仿水滴 这种拟物的设计曾经多次用在IOS的设计中，上图的下拉刷新就是模仿自苹果的Podcast(播客)。随着系统扁平化设计的步步深入，这种可以让人心领神会的小动画渐渐的被更加标准的旋转的菊花所代替。拟物扁平孰优孰劣，已经不在重要，这里只是想用web技术再仿制一次这个神奇的小水滴。可能已经再也用不上，仅仅作为向优秀设计的致敬。 效果中的圆圈可以根据手势被拉长，而且在弹回的时候速度由快变慢，有一种橡皮的感觉。速度由快变慢可以使用tween.js中的缓动函数解决，但是变形的圆圈css3有点鞭长莫及，所以我们使用canvas直接绘制。除了canvas我们还可以使用svg，svg与canvas只是圆圈渲染的方式不同，圆圈的坐标、半径等参数都一样，所以我们先研究算法，在绘制部分我会顺便提一下svg的渲染版本。 仔细考虑后将变形的圆圈分成3个部分，上下两个圆圈，加上中间一个向内凹陷的矩形
【文件预览】：
drop.js-master
----images()
--------1-1.jpg(6KB)
--------1.gif(215KB)
--------1-4.jpg(23KB)
--------1-3.jpg(26KB)
--------1-2.jpg(14KB)
--------1-5.jpg(24KB)
--------1-6.gif(110KB)
----index.html(993B)
----js()
--------index.svg.js(1KB)
--------index.js(2KB)
--------drop.svg.js(13KB)
--------drop.js(13KB)
----svg.html(980B)
----README.md(12KB)