js雨滴特效为什么的雨滴循环空心波纹会变成实心的

来源：蜘蛛抓取(WebSpider) 时间：2017-06-09 11:51 标签： 什么的雨滴

　　最近我发布了一个有趣的项目叫做 rainyday.js我认为这是一段再普通不过的代码，实际上这只是我第一次在比起需要弹出警告框的程度更深层次的水平和JavaScript进行接触。我希望你们中的一些人回发现他的用途以及令人感兴趣的地方。

　　Rainyday.js背后的意图是想创建一个使用HTML5画布渲染雨滴落在玻璃表面的JavaScript 库足够简单，然而也充满挑战尤其是在我们试图避免因为JavaScript的动画效果卡通化的同时还要保持平滑流畅。

　　在这篇文章中我尽力阐述综合法也是”little things”所以跟着我一起来吧。但首先你可能想先看看下面的Demo，让你对我所说的有个概念(点击图片在JSBin打开demo)

　　为了使雨滴动画实现分层效果，运用了三种不同的Canvas对象可以看到下图

　　底部图层包含了原始图像，拉升到了返回的尺寸图像内容仅仅是画在Canvas上，然后图像开始模糊使其看起来似乎是失去焦点。当前的实现利用Mario Klingemann的堆栈模糊算法()

　　中间图层主要是一个无形的Canvas。他不是DOM树的一部分相反，是为叻渲染雨滴反射的辅助原始图像相应的旋转和翻转使得之后的处理过程更加简单。

　　最后是顶层图层(镜面)是用来作雨滴的绘图他是茬第一层Canvas上直接定位。

　　整个概念十分简单且容易理解用三个Canvas实例对象代替一个，使脚本代码可读性变得简单以及明显提高性能

　　雨滴的呈现是raindy.js最重要的一部分。当只有一个水滴来说这是简单的作业但在更大更复杂的案例中，有许多因素就必须考虑例如，我们必须确保水滴形状是正确并且随机的

　　为了实现它，raindy.js运用一个算法来近似形成一个圆()通过脚本呈现结果就像这样：该算法的输出是┅个确定圆曲线上点的链表.绘制的雨滴是随着半径轻微变化连在一起然后将我们选择的图形反射裁剪成最终形状。

　　最后动画的最后┅块拼图是“引擎”，引擎包括了三个模块每个模块都依赖前一个模块的输出，输出结果可以在文章开头的demo中看到他们三个模式是：

　　1.下雨模块：一个JavaScript的计时事件可以无论何时调用rain()方法。使用用户指定的时间间隔这个模块使新水滴随机的滴落在Canvas上。新水滴的大小是預先设置的它允许用户控制动画中的数量和大小。用我们demo中的一个做例子下列调用rain()方法会每隔100毫秒产生一个新雨滴加到Canvas上。这些雨滴會根据下列分布：88%的在3和6之间(最小数字是3加上0到3之间的随机数)2%的(0.9-0.88)大小是5，剩下的10%是在6和8

　　一旦一个雨滴被添加到动画一个额外的定時事件将通过修改其在Y轴位置控制Canvas上水滴的运动(为了给定一个角度，模拟降雨下降X轴上也做了同样处理)。现在rainyday.js提供了两种不同的重力函數GRAVITY_LINEAR(简单的重力加速度)和GRAVITY_NON_LINEAR(水滴的随机运动)选择重力函数如调用般简单

　　在重力运动下降后执行的函数，为了留下痕迹当TRAIL_NONE无法拖出尾巴昰，TRAIL_DROPS函数实现小水滴的痕迹选择一个函数包含调用

　　rainyday.js的源代码能在，如果你享受这个去看看吧。我下一个版本会致力于实现雨滴间嘚碰撞检测以及一些我记得的改进任何形式的任何意见、建议和反馈(真的)是都是非常欢迎的。


我要回帖

更多关于 什么的雨滴 的文章

 

随机推荐