H5 实现酷炫水滴效果

2024-05-24 18:58:16

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）案例

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

width="100%" height="300" src="//jsfiddle.net/L6D63/65/embedded/" allowfullscreen="allowfullscreen">

实际组件效果：

width="100%" height="300" src="//jsfiddle.net/L6D63/62/embedded/" allowfullscreen="allowfullscreen">

原文链接：http://ued.baidu.com/?p=4959&from=timeline&isappinstalled=1

H5 实现酷炫水滴效果相关推荐

自定义动画属性java_创建酷炫动画效果的10个JavaScript库
原标题:创建酷炫动画效果的10个JavaScript库 1) Dynamics.jsDynamics.js是设计基于物理规律的动画的重要Java库.它可以赋予生命给所有包含CSS 和SVG属性的DOM ...
Android矢量图动画特效,Android使用SVG矢量图打造酷炫动画效果
一个真正Android使用SVG矢量图打造酷炫动效往往让人虎躯一震,话不多说,咱们先看看效果: 这个效果我们需要考虑以下几个问题: 1. 这是图片还是文字: 2. 如果是图片该如何拿到图形的边沿线坐标 ...
Lottie 站在巨人的肩膀上实现 Android 酷炫动画效果
说到动画效果,一般都会感到很高端,感觉很酷炫:而小菜技术有限,稍复杂的动画效果也需要很多时间处理,但是遇到时间紧任务重的情况该怎么办呢?那就尝试一下 Lottie 吧,酷炫的动画集成却相当简单,还支持 ...
如何把博客园的博客弄出狂拽酷炫的效果
有时候看别人的博客,明明是博客园的为什么有hexo的效果. 内容已经不重要了,效果真叫一个狂拽酷炫吊炸天. 那种风格我本人并不喜欢,但是很好奇.最终找到了一些文章,万一将来想通了还可以改. 如何美化你 ...
android 添加json动画,Lottie 站在巨人的肩膀上实现 Android 酷炫动画效果
说到动画效果,一般都会感到很高端,感觉很酷炫:而小菜技术有限,稍复杂的动画效果也需要很多时间处理,但是遇到时间紧任务重的情况该怎么办呢?那就尝试一下 Lottie 是个啥? Lottie 咋集成?bu ...
tree.js 酷炫的效果，人脸识别签到思路，html5 3D微信头像自动抽奖代码
1.酷炫效果 1.1 网址: https://wow.techbrood.com/fiddle/43962 网址:https://wow.techbrood.com/fiddle/25678 1.2 ...
android+酷炫动画效果,Android简单酷炫点击动画(附源码)
在Android5.0之前, Android的点击效果一直很low, 即使5.0的波纹效果也不尽如人意. 而我之前写过一种比较酷炫的点击效果, 最近抽了点时间完善一下, 把阴影效果加入了进去, 大家先 ...
照片动感影集制作软件哪个好？如何快速制作精美、酷炫的效果？
把照片做成动感影集是现在非常流行的照片分享方式.抖音上获得百万赞的照片动感影集,把照片运用上精美酷炫效果后做成的视频.那么,照片动感影集制作软件哪个好?怎么才能快速上手,制作一个效果高大上的动感影集? ...
mac vscode 背景半透明_vscode 酷炫毛玻璃效果 (超详细)
vscode.jpeg 今天在网上看到 vscode 酷炫毛玻璃的效果,说白了就是添加透明度了,好奇心又让我想尝试一把.好吧.我承认净整些花里胡哨的! 温馨提示,仅限于 macOS 系统 ! 1️⃣ ...

最新文章

热门文章