H5 实现酷炫水滴效果
来源:互联网 发布:淘宝网上的披肩 编辑:程序博客网 时间:2024/04/28 11:50
H5 实现酷炫水滴效果
天马行空般的设计甩到面前,含着泪也要做出来
——百度前端工程师的内心独白
之前接到了一个需求,设计师同事想在网页中使用一个类水滴效果的索引条。Duang,Duang,这醉人的需求,抹着泪打开chrome开始摸索。。。
(设计师要求效果)
如何能用代码模拟出实际生活中水滴的效果呢?
1)调研
思路来源于生活,我们要知道其所以然。
实际生活中水滴是如何运作的:
http://v.youku.com/v_show/id_XMzA1ODg5MjE2.html
水滴与水源连接桥的渐变过程:
(随着水滴逐渐脱离水源,连接桥是越来越细,直至变成一个点)
水滴脱离水源的关键帧:
参考文献:《The bifurcation of liquid bridges》 By D. H. PEREGRINE, G. SHOKER (谷歌被墙,大家有兴趣可自行查阅)
2)思考
难点一:水源有个水滴点往下伸出
难点二:连接桥边缘曲线的绘制
难点三:随着水滴远去,连接桥越来越细
难点四:到达临界值,水滴脱离水源
解决方案:普通的dom元素,制作圆滑曲线基本是不可能的,根据以往的积累,我们是可以通过svg中的来描绘贝塞尔曲线,达到实现圆滑曲线的效果。所以,我们决定采用svg来制作整个类水滴的索引组件。
贝塞尔曲线原理:http://baike.baidu.com/link?url=lmPWZe2DM35S6-JS412xtFYTI-9aZsf-JIyQbn3dnEu6mSZg0WF_uSO0d0tl_imz2mssFkN8CM5gpiCRtK75Ea
实现思路:
1. 假设有上下两个圆,分别代表水源和水滴。通过连接两圆的圆周上的点的贝塞尔连线(图中红线表示)来表示连接桥。
svg中贝塞尔曲线是需要四个参数的:起始点、参考点1、参考点2、目标点。(http://cubic-bezier.com/#.09,.85,.59,.96)
想要水滴的曲线尽可能的真实,如何去计算这四个点尤为重要。考虑到物理学中,质量越大,引力越强,所以参考点1、参考2都会接近半径大的那个圆,而我们要尽量去接近真实。
2. 现实中当水滴触碰到下面一个水源时,会有一个虹吸现象。我们这时候就需要从下面一个水源也伸出一个水滴点,并且这个水滴和前一个水滴重合,模拟现实中的效果。
3.随着初始水滴慢慢融合到新水源中,中间的连接桥会越来越细。然后慢慢断开,回归到最初始的状态。
3)案例
贝塞尔曲线制作的弧线效果:
实际组件效果:
原文链接:http://ued.baidu.com/?p=4959&from=timeline&isappinstalled=1
- H5 实现酷炫水滴效果
- ppt实现水滴效果
- ppt实现水滴效果
- Android_实现水滴效果
- 单点触摸实现水滴效果
- 水滴效果
- Android 露珠/水滴 拖拽 效果实现
- 炫酷的水滴ViewPagerIndicator
- 炫酷的水滴ViewPagerIndicator
- Android 实现IOS上的水滴效果控件
- 下拉水滴效果
- H5实现win10日历效果
- H5实现仿flash效果
- Android 水滴下落效果View
- 从左上角到右下角的水滴效果实现(基于贝塞尔曲线)
- Android 仿IOS版QQ实现下拉刷新水滴的效果
- css实现h5页面滚动效果
- H5使用canvas实现星星闪烁效果
- 压缩字符串
- Android中SQLite应用详解
- Android 判断横屏还是竖屏以及设置方式
- xUtils 使用
- 写给大家看的设计书(第4版)(精装版)——互动出版网
- H5 实现酷炫水滴效果
- gcc、makefile、gdb学习笔记
- iOS TableView实现QQ好友列表(一)
- 机器学习复习——Apriori
- 进入公司第二十个月
- 注意:只有xcode5.1创建的项目会自动适配iphone6,iphone6p
- iOS TableView实现QQ好友列表(二)
- 《Java并发编程从入门到精通》目录
- centos7 glusterfs的安装