一:开篇

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

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

(codepen在线演示编辑:http://codepen.io/barrior/pen/XjEEBz)

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

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

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

三:所有效果展示

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

1、波浪运动·标配

(效果参考QQ电话,codepen在线演示编辑:http://codepen.io/barrior/pen/BLAAPa)

js代码:

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,// 隐藏填充,默认falsefill: false,// 显示边框,即线条效果,默认truestroke: true
});

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

2、波浪运动·loading动画

(codepen在线演示编辑:http://codepen.io/barrior/pen/rrddQw)

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

3、雪花飘落特效

(codepen在线演示编辑:http://codepen.io/barrior/pen/mAxxdG)

极简单的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 吧

 

转载于:https://www.cnblogs.com/barrior/p/5944909.html

开源造轮子:一个简洁,高效,轻量级,酷炫的不要不要的canvas粒子运动插件库...相关推荐

  1. github可视化工具_Github标星2.6K!微软开源的可视化工具,未免太酷炫了吧

    开源最前线(ID:OpenSourceTop) 猿妹编译 链接:https://visualstudiomagazine.com/articles/2019/10/14/sanddance.aspx ...

  2. 一个很简短但很炫的html5代码(canvas画布)。。。。。

    最近在网上看到一个<一个很简短但很炫的html5代码>,特意收藏一下: [鼠标移入,酷炫样式] <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  3. linux高手知乎,配置一个简洁高效的 Zsh | Linux 中国

    事实上 oh-my-zsh 并不好用,严重拖慢了 Zsh 的速度,反而让你的工作并不高效. (本文字数:2236,阅读时长大约:3 分钟) Shell 是类 Unix 系统中超级好用的工具,而 Zsh ...

  4. 快速搭建一个简洁高效的跨平台Qt项目工程

    在搭建简单的Qt Demo的时候,我们可以将所有的代码写在一个工程里面,这样操作起来比较简单.但是,如果在一个有很多个开发者参与的大型项目中,这样做肯定就不行了,这时候我们需要对项目进行拆分,拆分成几 ...

  5. 百度重磅开源工业视觉检测工具,太酷炫了!

    各行各业对AI应用需求日益增多, AI与产业结合的场景也越来越深入.越来越专业.在和波士顿咨询公司的联合调研中,我们发现约86%的市场需求需要定制开发业务场景下的AI模型.但是,人工智能的落地是个极其 ...

  6. 一个炫光效果的酷炫登录表单(代码超简单)

  7. 不要重复造轮子 Stop Trying to Reinvent the Wheel

    "Stop Trying to Reinvent the Wheel(不要重复造轮子 )", 可能是每个程序员入行被告知的第一条准则.在公司里面,我也会对团队里面每个新进的成员反复 ...

  8. 照片动感影集制作软件哪个好?如何快速制作精美、酷炫的效果?

    把照片做成动感影集是现在非常流行的照片分享方式.抖音上获得百万赞的照片动感影集,把照片运用上精美酷炫效果后做成的视频.那么,照片动感影集制作软件哪个好?怎么才能快速上手,制作一个效果高大上的动感影集? ...

  9. html实现酷炫好看的个人介绍主页(附源码)

    文章目录 1.设计来源 1.1 主界面 1.2 我的简介界面 1.3 教育经历界面 1.4 我的源码界面 1.5 我的相册界面 1.6 朋友评价界面 1.7 热门文章界面 1.8 联系我界面 2.效果 ...

最新文章

  1. 重读TCP协议(3)
  2. 使用SSH执行远程登录
  3. 《数据结构与算法》课程设计报告——赫夫曼编码/译码器
  4. 卷积,DFT,FFT,图像FFT,FIR 和 IIR 的物理意义
  5. 深入理解计算机系统(3.3)------操作数指示符和数据传送指令
  6. 阶段3 2.Spring_01.Spring框架简介_02.今日课程内容介绍
  7. java实现调查问卷_jsp70516调查问卷自动生成与分析系统 双数据库 mysql版
  8. 孔浩java web_孔浩老师JAVA WebService教程
  9. javascript XMLHttpRequest实现下载文件
  10. 用C语言进行完数的判断(for循环和数组思想)
  11. 计算机数值怎么看大小,笔记本电脑尺寸怎么看_笔记本电脑尺寸查询
  12. 嵌入式linux IIO驱动
  13. jasypt 配置文件加解密
  14. JAVA四大名著(程序员必读)
  15. JDBC Connection [com.mysql.jdbc.Connection@2bbf4094] will not be managed by Spring 的一个可能错误
  16. 关于c中的%x及其它格式化符
  17. OpenStack常用运维命令手册-V1.0-黑夜青儿
  18. vue3条码批量打印
  19. 2022年索尼A7R4A与A7R3A如何选择?
  20. servlet生命周期的理解

热门文章

  1. 查询XML节点 value
  2. java设计一个bank类实现银行_SAP银企直连之平安银行(ECC版)
  3. react 监听组合键_投资组合中需要的5个React项目
  4. 多键开关 android8.0,手机桌面多键开关(SwitchPro Widget )
  5. 安装NodeJS环境报错
  6. react 用html插件,React配置过程中用到的插件汇总
  7. leetcode--无重复字符的最长子串--python
  8. Struts2+spring+jdbc 以xml配置形式整合
  9. Html,Css,Javascript是什么?
  10. 【Spring Security】五、自定义过滤器