一:开篇

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

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

(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,
// 隐藏填充,默认false
fill: false,
// 显示边框,即线条效果,默认true
stroke: 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 吧

 

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

  1. 重复造轮子,编写一个轻量级的异步写日志的实用工具类(LogAsyncWriter)

    一说到写日志,大家可能推荐一堆的开源日志框架,如:Log4Net.NLog,这些日志框架确实也不错,比较强大也比较灵活,但也正因为又强大又灵活,导致我们使用他们时需要引用一些DLL,同时还要学习各种用 ...

  2. GitHub Android 最火开源项目Top20 GitHub 上的开源项目不胜枚举,越来越多的开源项目正在迁移到GitHub平台上。基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项目很是必要。利用这些项目,有时能够让你达到事半功倍的效果。

    1. ActionBarSherlock(推荐) ActionBarSherlock应该算得上是GitHub上最火的Android开源项目了,它是一个独立的库,通过一个API和主题,开发者就可以很方便 ...

  3. 动手造轮子:实现一个简单的 EventBus

    动手造轮子:实现一个简单的 EventBus Intro EventBus 是一种事件发布订阅模式,通过 EventBus 我们可以很方便的实现解耦,将事件的发起和事件的处理的很好的分隔开来,很好的实 ...

  4. 别在重复造轮子了,几个值得应用到项目中的 Java 开源库送给你

    我是风筝,公众号「古时的风筝」.文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在里面.公众号回复『666』获取高清大图. 风筝我作为一个野路子开发者,直到 ...

  5. 一起学习造轮子(二):从零开始写一个Redux

    本文是一起学习造轮子系列的第二篇,本篇我们将从零开始写一个小巧完整的Redux,本系列文章将会选取一些前端比较经典的轮子进行源码分析,并且从零开始逐步实现,本系列将会学习Promises/A+,Red ...

  6. 一起学习造轮子(一):从零开始写一个符合Promises/A+规范的promise

    本文是一起学习造轮子系列的第一篇,本篇我们将从零开始写一个符合Promises/A+规范的promise,本系列文章将会选取一些前端比较经典的轮子进行源码分析,并且从零开始逐步实现,本系列将会学习Pr ...

  7. 一起学习造轮子(三):从零开始写一个React-Redux

    本文是一起学习造轮子系列的第三篇,本篇我们将从零开始写一个React-Redux,本系列文章将会选取一些前端比较经典的轮子进行源码分析,并且从零开始逐步实现,本系列将会学习Promises/A+,Re ...

  8. 动手造轮子:实现一个简单的 AOP 框架

    动手造轮子:实现一个简单的 AOP 框架 Intro 最近实现了一个 AOP 框架 -- FluentAspects,API 基本稳定了,写篇文章分享一下这个 AOP 框架的设计. 整体设计 概览 I ...

  9. 想造轮子的时候,ctrl+f一下

    Chardet,字符编码探测器,可以自动检测文本.网页.xml的编码. colorama,主要用来给文本添加各种颜色,并且非常简单易用. Prettytable,主要用于在终端或浏览器端构建格式化的输 ...

随机推荐

  1. 使用file_get_contents() 发送GET、POST请求

    服务器端执行HTTP请求,大家经常使用的就是CURL,curl工具的确是很好的数据文件传输工具,那么除此之外还有其他的工具能实现这个功能吗? 现在为你介绍一个很常见的工具 file_get_conte ...

  2. 一行命令安装docker和docker-compose(CentOS7)

    想快速装好docker和docker-compose ?那就随本文用一次复制粘贴来完成安装: 环境信息 操作系统:CentOS Linux release 7.7.1908 (Core, 操作账号:r ...

  3. Spring boot 梳理 - 代码结构(Main类的位置)

    Spring boot 对代码结构无特殊要求,但有个套最佳实践的推荐 不要使用没有包名的类.没有包名时,@ComponentScan, @EntityScan, or @SpringBootAppli ...

  4. WebGL简易教程(五):图形变换(模型、视图、投影变换)

    [toc] 1. 概述 通过之前的教程,对WebGL中可编程渲染管线的流程有了一定的认识.但是只有前面的知识还不足以绘制真正的三维场景,可以发现之前我们绘制的点.三角形的坐标都是[-1,1]之间,Z值 ...

  5. 冒泡排序--JavaScript描述

    相信凡是编程入门的都接触过冒泡排序算法,排序算法在编程中经常用到. 1. code /** * 冒泡排序 * 1.比较的轮数等于总数 - 1 * 2.比较次数等于要比较的个数 - 1 * --比较从第 ...

  6. 品Spring:真没想到,三十步才能完成一个bean实例的创建

    在容器启动快完成时,会把所有的单例bean进行实例化,也可以叫做预先实例化. 这样做的好处之一是,可以及早地发现问题,及早的抛出异常,及早地解决掉. 本文就来看下整个的实例化过程.其实还是比较繁琐的. ...

  7. ELK 学习笔记之 Kibana安装

    Kibana安装: 安装地址: https://www.elastic.co/downloads/kibana 安装: tar -zxvf kibana-5.6.1-linux-x86_64.tar. ...

  8. android 6.0导航栏 NavigationBar影响视图解决办法

    在开发app的时候会遇到有些测试手机没有物理按钮,比如最近在做的一个app在小米手机上运行显示效果很好,但是在华为P7手机上显示就乱了,底部的NavigationBar直接覆盖在主视图上,导致按钮无法 ...

  9. SpringBootSecurity学习(23)前后端分离版之OAuth2.0 其它模式

    密码模式 前面介绍了授权码模式和刷新令牌两种获取最新令牌的方法,下面来看一下其它模式.首先看密码模式,我们默认配置的三种模式中其实就包含密码模式的支持: 因此我们启动项目,直接使用密码模式即可,访问地 ...

  10. mobaxterm和CRT的文件上传

    版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/submarineas/article/de ...