JParticles 2.0 发布，打造炫酷的粒子特效

zxhaaa 发布于2019-08-05 11:25 / 324人阅读

摘要：我们一贯的理念我们我笑哭一贯的理念是信仰和。第一点视差粒子几行代码为了看起来更简洁，定义视差粒子层数的属性就省略了，因为本身它就是层，也挺好的。演示四层，为了让大家能更了解属性的使用方法。又高大上，又可以缓解加载的等待心情。

JParticles 2.0 发布，打造炫酷的粒子特效。
不好意思哈，在这么繁花似锦的世界里，标题不得不取得吸引眼球一点哈，
不然...还是不啰嗦了，我们进入正题吧

简单介绍一下

JParticles 2.0 版本之前还叫 Particleground.js，相信在用的朋友应该不会陌生，关于 1.x 版本的宣传文案可以移步看这里哈，或许可以帮助你了解 JParticles 2.0 的一些东西。

我们一贯的理念

我们（我/笑哭）一贯的理念是信仰："The Write Less, Do More" 和 "Keep It Simple And Stupid"。
希望插件工具什么的使用起来非常的简单便捷，上手快，不耽误人们宝贵的时间，尤其是在变化迅速的前端，
希望我们的 代码写得简洁，简单，易懂，API设计的简洁，简单，易用，最后 强大，易扩展！

此次版本更新日志

看看我们这次版本更新了哪些东西吧，biubiu...贴图：

貌似挺多的，主要我们还是只讲三点吧，剩下的可以看官网慢慢了解，哈哈。

第一点：视差粒子

https://codepen.io/barrior/pe...

几行 JavaScript 代码：

为了看起来更简洁，定义视差粒子层数的属性就省略了，因为本身它就是 3 层，也挺好的。
CodePen 演示四层，为了让大家能更了解属性的使用方法。

new JParticles.particle("#demo", {
  // 开启视差效果
  parallax: true,
  
  // 定义视差强度
  parallaxStrength: 1
});

是不是好少...少到想哭有木有，但是很酷炫~

第二点：模拟语音搜索

学习于京东APP的搜索，上图：

https://codepen.io/barrior/pe...

上 JavaScript 代码：

如果你使用过 1.x, 相信你对 wave 的参数配置很理解，
我们删除了之前的旧方法 setOffsetTop()，添加了新方法：setOptions()，
这个方法就更加强大与自由了，可以控制更多的属性的变化，达到我们想要的效果。
这里我们主要的控制就是这个方法了，只是按住这个自定义事件是用户自己的行为，
所以这里贴上自定义代码把我们简洁的 API，弄的好像很复杂了一样，冤枉~
其实一共就两处，见下面标注。

var settings = {
  crestHeight: [10, 14, 18],
  speed: .1
};

// 这里是第 ① 处
// JParticles.utils.extend 等同于 jQuery.extend，你也可以使用 Object.assign 替代。
var effect = new JParticles.wave(".instance .demo", JParticles.utils.extend({
  num: 3,
  lineColor: ["#e53d27", "#42e527", "#27C9E5"],
  lineWidth: [.7, .9, 1],
  offsetTop: .65,
  rippleNum: 2
}, settings));

// 线条波动效果
document.querySelector(".voice").onmousedown = function () {
  clearInterval(this.timer);
  this.timer = setInterval(function () {
    var crestHeight = settings.crestHeight.map(function (item) {

      // 获取随机波动值
      item += JParticles.utils.limitRandom(20, -20);

      // 处理 (0, 1) 之间的值为整数
      if (item < 1 && item > 0) {
        item = Math.ceil(item);
      }

      return item;
    });

    // 这里是第 ② 处
    // 通过 setOptions() 来控制线条的波动
    effect.setOptions({
      crestHeight: crestHeight,
      speed: [.2, .14, .1]
    });
  }, 100);

  // 复原
  var self = this;
  document.onmouseup = function () {
    document.onmouseup = null;
    clearInterval(self.timer);
    effect.setOptions(settings);
  };
};

第三点：waveLoading 模拟进度条加载

这是一个封装好的，简单易用的模拟加载进度条动画。

1.x 版本是通过 wave 这个波浪运动来手写加载进度条的内容，并不是很方便，参数的控制也麻烦，
于是 2.0 着重封装了这个模拟加载进度条的动画，这个特效在单页应用首次加载什么的还是很需要的吧。
又高大上，又可以缓解加载的等待心情。

现在就来看看是怎么简单的使用这个功能特效吧，我们以加载 baidu.com 首页为示例，貌似其他的不允许 iframe 加载:

https://codepen.io/barrior/pe...

简单的 JavaScript 代码（CodePen 的代码是有对细节进行调整，而核心内容就是下面这么简单）：

var demo = document.querySelector(".demo");

// 生成 loading 动画
var loading = new JParticles.waveLoading(demo);

// 当你告诉 loading 加载完了，loading 就加载结束，并触发这个事件
loading.onFinished(function () {
    
    // 这时，你就可以删除 loading 动画了，让页面显示出来
    demo.parentNode.removeChild(demo);
});

// 加载完，告诉 loading 加载完了，让 loading 结束
// 因为这是模拟进度条，所以你得告诉 loading，它才知道页面此时已经加载完了
window.onload = function () {
    loading.done();
};

致歉

这个还是得致歉，之前承诺的会在新版增加QQ登录背景效果（Delaunay三角的实现），由于时间也挺赶的，
现在还没研究出Delaunay三角的实现，当然其实也可以用等研究好三角函数做出效果来了再发，但是这样就耽误的新版的发布，还不如先把能用的发出来，先用着能用的，后续再慢慢添加其他有意思的东西进来。
此处，对看过更新日志并满怀期待的同志表示深深的歉意！

最后

官网（我想这应该是一个非常棒的文档，因为很用心在写）：jparticles.js.org
如果你喜欢这个插件库并能帮助到你的实际工作中，希望它能发展的更好，提供更多有趣实用的特效，支持作者，烦请点个 Star O(∩_∩)O谢谢~。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/56348.html

JParticles 2.0 发布，打造炫酷的粒子特效

摘要：我们一贯的理念我们我笑哭一贯的理念是信仰和。第一点视差粒子几行代码为了看起来更简洁，定义视差粒子层数的属性就省略了，因为本身它就是层，也挺好的。演示四层，为了让大家能更了解属性的使用方法。又高大上，又可以缓解加载的等待心情。 JParticles 2.0 发布，打造炫酷的粒子特效。不好意思哈，在这么繁花似锦的世界里，标题不得不取得吸引眼球一点哈，不然...还是不啰嗦了，我们进入正题吧s...

tinna 2019-08-20 17:07 评论0 收藏0
js框架或者库

摘要：使用开发富文本编辑器是开源的开发富文本编辑器开发框架。提供了一系列开发富文本编辑器的工具。本文通过开发一些简单的富文本编辑器介绍提供的各种能力简单易用的开源动画图标库如果你用过等图标，你可能会觉得它们很好看，用起来很很方便。使用 flv.js 做直播 flv.js 是来自 Bilibli 的开源项目。它解析 FLV 文件喂给原生 HTML5 Video 标签播放音视频数据，使浏览器在...

Winer 2019-08-22 11:16 评论0 收藏0
three.js实现炫酷的3d影院

摘要：光晕效果必须设置主要的光线还是靠模拟设置光晕的范围后记入门教程源码地址原创不易，辛苦各位大大点个阅读本文章可以获取到的知识创建一个3d的空间粒子效果 three.js点击事件的处理着色器的初步使用实现一个光晕效果 1.创建一个3d的空间可以想象一下我们在房间内，房间是一个立方体，如果你有生活品味，可能会在房间内贴上壁纸，three.js可以很方便的创建一个立方体，并且给...

luckyw 2019-08-22 11:20 评论0 收藏0
前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例

摘要：模拟飞机航班线路动画一款基于的飞机航班线路模拟动画，它模拟了许多航班在不同目的地的起飞降落数量。跳动加载动画可调节参数这是一款基于的跳动加载动画，它的另一个特点是可以动态调节动画参数。 showImg(https://segmentfault.com/img/bVblze6?w=900&h=383); HTML5 动画在Canvas 上得到了充分的发挥，我们 VIP 视频也分享过很多相...

Chao 2019-08-23 14:15 评论0 收藏0
CAEmitterLayer粒子发射器的神奇效果

摘要：就是其中之一，是用于实现基于的粒子发生器系统。决定发射源的大小表示粒子从什么形状发射出来，它并不是表示粒子自己的形状。点模式，发射器是以点的形式发射粒子。计算方式同上粒子的缩放比例系数默认。默认粒子的生命周期的范围，以秒为单位。想必以前QQ空间的点赞效果大家都知道吧，点赞之后按钮周围会有一圈爆裂的小圆点；还有微信的红包雨表情动画等，以及烟花，火焰效果。这些看似很炫酷的动画可能让我们敬...

snowell 2019-06-25 16:38 评论0 收藏0