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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JParticles 2.0 发布,打造炫酷的粒子特效相关的知识,希望对你有一定的参考价值。

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谢谢~。
















以上是关于JParticles 2.0 发布,打造炫酷的粒子特效的主要内容,如果未能解决你的问题,请参考以下文章

Android 从无到有打造一个炫酷的进度条效果

使用CoordinatorLayout打造各种炫酷的效果

DreamSceneSeven打造炫酷的动态桌面

关于Unity中粒子效果的使用

electron-ui 快速方便的打造炫酷的桌面应用

动态炫酷的js背景特效库集锦