β

H5 实现酷炫水滴效果

百度搜索用户体验中心 347 阅读

天马行空般的设计甩到面前,含着泪也要做出来

——百度前端工程师的内心独白

之前接到了一个需求,设计师同事想在网页中使用一个类水滴效果的索引条。Duang,Duang,这醉人的需求,抹着泪打开chrome开始摸索。。。

1

(设计师要求效果)

如何能用代码模拟出实际生活中水滴的效果呢?

1)调研

思路来源于生活,我们要知道其所以然。

实际生活中水滴是如何运作的:

http://v.youku.com/v_show/id_XMzA1ODg5MjE2.html

水滴与水源连接桥的渐变过程:

2

(随着水滴逐渐脱离水源,连接桥是越来越细,直至变成一个点)

水滴脱离水源的关键帧:

3

参考文献:《The bifurcation of liquid bridges》 By D. H. PEREGRINE, G. SHOKER (谷歌被墙,大家有兴趣可自行查阅)

2)思考

难点一:水源有个水滴点往下伸出

难点二:连接桥边缘曲线的绘制

难点三:随着水滴远去,连接桥越来越细

难点四:到达临界值,水滴脱离水源

解决方案:普通的dom元素,制作圆滑曲线基本是不可能的,根据以往的积累,我们是可以通过svg中的<path>来描绘贝塞尔曲线,达到实现圆滑曲线的效果。所以,我们决定采用svg来制作整个类水滴的索引组件。

贝塞尔曲线原理: http://baike.baidu.com/link?url=lmPWZe2DM35S6-JS412xtFYTI-9aZsf-JIyQbn3dnEu6mSZg0WF_uSO0d0tl_imz2mssFkN8CM5gpiCRtK75Ea

实现思路:

1. 假设有上下两个圆,分别代表水源和水滴。通过连接两圆的圆周上的点的贝塞尔连线(图中红线表示)来表示连接桥。

4

svg中贝塞尔曲线是需要四个参数的:起始点、参考点1、参考点2、目标点。( http://cubic-bezier.com/#.09,.85,.59,.96 )

想要水滴的曲线尽可能的真实,如何去计算这四个点尤为重要。考虑到物理学中,质量越大,引力越强,所以参考点1、参考2都会接近半径大的那个圆,而我们要尽量去接近真实。

5

2. 现实中当水滴触碰到下面一个水源时,会有一个虹吸现象。我们这时候就需要从下面一个水源也伸出一个水滴点,并且这个水滴和前一个水滴重合,模拟现实中的效果。

6

3.随着初始水滴慢慢融合到新水源中,中间的连接桥会越来越细。然后慢慢断开,回归到最初始的状态。

7

3)案例

贝塞尔曲线制作的弧线效果:

See the Pen bddBpL by dencey ( @dencey ) on CodePen .

实际组件效果:

See the Pen waterdrop by dencey ( @dencey ) on CodePen .

作者:百度搜索用户体验中心
创建搜索引擎的极致用户体验
原文地址:H5 实现酷炫水滴效果, 感谢原作者分享。

发表评论