11

一:开篇

哈哈哈,感谢标题党的莅临~

虽然标题有点夸张的感觉,但实际上,插件库确实是简洁,高效,轻量级,酷炫酷炫的咯。
废话不多说,先来看个标配例子吧:

http://codepen.io/barrior/pen...

是吧,应该是酷炫酷炫的吧,不喜欢的话可以向下看更多的例子哦~

二:说说我(们)的理念:

厌倦市场上眼花缭乱,百花齐放,百鸟争鸣的繁荣景象,我心憔悴...
像我这种头脑简单,四肢也简单的人就适合简单的API,简单人和物 (。・_・)/~~~
好吧,还是说回代码吧,API设计希翼"The Write Less, Do More""Keep it Simple and Stupid"的形式,拒绝绕弯子API,崇尚简洁,简约!
所以你会跟作者一样,使用起这个插件会感觉到很爽,很轻松,嘎嘎嘎~ 不信看看接下来的所有效果展示。

三:所有效果展示

目前插件库提供了三种特效:粒子无序运动,波浪运动,雪花飘落特效。
当然,配置不同的API参数值,或许可以得到挺多不同的特效呢!
上面已经演示过标配的粒子无序运动啦,下面演示后面两种。

1、波浪运动·标配

http://codepen.io/barrior/pen...

js代码(效果参考QQ电话):

new Particleground.wave( '#demo', {
    num: 3,
    // 三条线依次的颜色
    lineColor: ['rgba(0, 190, 112, .5)', 'rgba(0, 190, 112, .7)', 'rgba(0, 190, 112, .9)'],
    // 三条线依次的宽度
    lineWidth: [.5, .7, .9],
    // 三条线依次的向左偏移值
    offsetLeft: [2, 1, 0],
    // 三条线都向上偏移容器高度的0.75倍
    offsetTop: .75,
    // 三条线依次的波峰高度
    crestHeight: [10, 14, 18],
    // 三条线都只有两个波峰(波纹)
    rippleNum: 2,
    speed: .1,
    // 隐藏填充,默认false
    fill: false,
    // 显示边框,即线条效果,默认true
    stroke: true
});

如果你英语可以的话,相信看属性名结合效果就大概知道配置是什么意思啦,不然的话你可以看看官网对这几个API的描述,戳这里哈

2、波浪运动·loading动画

http://codepen.io/barrior/pen...

这个js代码就不贴啦,需要自己写加载的进度,然后设置到效果上哈。

3、雪花飘落特效

http://codepen.io/barrior/pen...

极简单的js代码:

new Particleground.snow('#demo');

四:解释标题

好啦,效果看完啦,现在解释一下标题的那几个宣传字眼,虽然好像并没有什么用图片描述...

简洁:
  • 就像前面的粒子运动例子,只需要一行简单的代码 new Particleground.particle('#demo') 就可以实现啦。

  • 然后就是“洁”:这个需要阅读源码咯,相信从源码中你会看到代码的简洁优雅的,具体请戳这里啦~

  • 当然,特效也是简洁美观的啦,对不起视觉的效果为什么还要用代码去实现它呢图片描述...

高效:
  • 在作者的能力基础之上,代码能优化的地方作者都想尽了方法去优化它(包括性能的优化,代码的简化)。

  • 比如:this关键字的在另一个函数内储存成变量参数使用,多次使用到的深度属性或方法储存成变量使用,既达到压缩时可减少体积,又达到减少变量查找的耗时。

  • 比如:粒子无序运动的连线功能处理,嵌套for循环,O(n²)的问题,作者优化了三次(git commit有记录咯),最后使用(学习借鉴)了《HTML5+JavaScript动画基础》这本书的一个思想和优化方式,达到既不冗余代码或占用内存,又提升了一倍的执行效率。具体可点击这里,源码第160行哦

轻量级:
  • 由于前面说到的两点,轻量级自然就孕育而生啦。

  • 另一个就是特效之间都是以独立的插件形式使用的,不存在相互依赖的问题,只依赖一个公共的功能文件,这样就可以达到想加载什么就加载什么,按需加载的不臃肿体验啦,也可以偷懒直接使用包含所有特效的压缩包文件咯。

五:最后

  • 一个良好的官网及文档是一个良好的开始,插件库官网:particleground.duapp.com, 先用着这个域名咯,等时机成熟了,再换回正式的 pjs.barrior.me 域名~

  • 贡献总是受欢迎的,无论它多么大或小!只要你与作者的观念,理念,志同道合的话,那就太希望你加入组织的怀抱啦,做一件自己喜欢的事,做一个自己都喜欢自己的人。

  • 如果你喜欢这个插件库并能帮助到你的实际工作中,希望它能发展的更好,提供更多有趣实用的特效,支持我(们),烦请点个 Star图片描述

你可能感兴趣的

11 条评论
轻键快码 · 2016年10月14日

666 已经star了 好棒啊 我要研究下你的源码

回复

Barrior 作者 · 2016年10月14日

欢迎阅读哈,官网里有交流群,不理解的欢迎提问~

回复

jzwb · 2016年10月14日

不错不错,我喜欢具有人文气质的开源项目

回复

Barrior 作者 · 2016年10月14日

哈哈

回复

暗隐清风 · 2016年10月15日

不错不错

回复

Hello_594886 · 2016年10月19日

好东西,star一个!

回复

艾尼菲楠 · 2016年10月20日

666666

回复

爱足易王求 · 2016年10月21日

好东西,已在github上start了。但是我还是想问作者,您的这个库是否大量借鉴了这个canvas库https://github.com/jnicol/par...
如果真的借鉴了,最好还是隆重声明一下,也算是对像您这样的开源库的作者的一种尊重吧。

回复

Barrior 作者 · 2016年10月24日

名字确实是来自这个,不过我还没看过这个的源码,有机会可以把这个特效顺便加进去。源码借鉴过库或思想都标注在源码里了,不过源码我都是自己思考验证重写的,从来不是直接copy别人的代码

回复

Barrior 作者 · 2016年10月24日

起初写这个库确实是来自这个库的第一个特效,这个特效的创意和源码都来自别人,我也是意外看见,感兴趣就研究这个最后做出这个插件库的,不过这个特效来自谁,一直没有标注,原始的代码也是很急速的写成的吧,作者也没留下什么信息。如果原作者看到这条信息,欢迎私信,砸门畅谈一下人生畅谈一下理想,哈哈哈

回复

爱足易王求 · 2016年10月24日

评论不能发表情,给你手动点个赞吧

回复

载入中...