当前位置: 首页 > 编程日记 > 正文

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

一:开篇

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

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

(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

相关文章:

python启动appium服务_python下appium服务的自启动和关闭

最近想把前不久写的webUi框架改写成mobile_Ui,也就是 用于手机端的UI自动化框架,目前已经完成该框架的改写,记录其中一些问题,框架后续会单独写篇幅介绍遇到的第一个问题就是1、python怎么能够自动启动和自动关闭appium服务,这样每…

以太坊源码分析

链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载。 前言:人类正在步入数据时代。如今,全球每天就产生超过500亿GB的数据,据IDC预测,到2025年这一数据将超…

yapi-docker

yapi-docker 转载于:https://www.cnblogs.com/vickey-wu/p/9026153.html

灵活性是原则性基础上的灵活

灵活性是原则性基础上的灵活,没有原则性的灵活是耍流氓。 原则性是质,灵活性是量,灵活性有度的要求,就是不能改变质。转载于:https://www.cnblogs.com/jcode/p/5961867.html

办公室自动化系统_信息化管理建设 公司办公室用自动盖章机贵吗?

办公室自动盖章机的应用我们首先要考虑到底有没有用,之后在考虑贵不贵的问题。自动盖章机也称智能印章,是企业单位建设信息化印章管理方式的一种,过去由于人工盖章和管章效率低,且风险较大,为了避免因印章管理不当引起…

加密货币银行是什么?它又将如何运作?

链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载。 比特币曾经承诺,将帮助每个人拥有“属于自己的 银行 ”。但这里需要强调一点,在了解到银行实际提供的众多服务之后&#xff…

【Python】实现将testlink上的用例指定格式保存至Excel,用于修改上传

背景 前一篇博客记录的可以上传用例到testlink指定用例集的脚本,内部分享给了之后,同事希望能将testlink上原有的用例下载下来,用于下次修改上传,所有有了本文脚本。 具体实现 获取用例信息 def download_testcase():""…

Java随机字符串:随机数字字符串,工具类

Java中生成随机数,字符串的工具类 1. 调用方法需要传入生成字符串的长度和需要的类型 生成随机数字 生成随机字母字符串 生成随机字符串数字等 ......... 2. 总共8种类型,具体看工具类中的注释。 1 import java.util.Date;2 import java.util.Random;3 i…

python怎么查看代码错误_python中的错误如何查看

python常见的错误有1.NameError变量名错误2.IndentationError代码缩进错误3.AttributeError对象属性错误4.TypeError类型错误5.IOError输入输出错误6.KeyError字典键值错误具体介绍1.NameError变量名错误报错:>>> print aTraceback (most recent call last…

Facebook的加密货币即将到来会对整个加密货币领域意味着什么

链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载。 Facebook的加密货币即将到来,它对整个加密货币领域意味着什么?这里不仅涉及到用户采用、节点参与,还涉及到合规、…

threadlocal使用场景_深入剖析ThreadLocal

点击上方 IT牧场 ,选择 置顶或者星标技术干货每日送达朋友们在遇到线程安全问题的时候,大多数情况下可能会使用synchronized关键字,每次只允许一个线程进入锁定的方法或代码块,这样就可以保证操作的原子性,保证对公共资…

zabbix 监控tomcat实例

zabbix 监控tomcat实例环境:CentOS 7.2zabbix-3.0.5 LTSnginx-1.10.1php-7.0.11mariadb-10.1.18tomcat-9请参看zabbix-3.0.x LTS源码安装配置Tomcat7/8/9安装配置tomcat启用jmxhttp://tomcat.apache.org/tomcat-9.0-doc/monitoring.htmlhttp://docs.oracle.com/javase/6/docs/t…

什么是USDT以及如何使用它?

链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载。 什么是USDT? 如果您使用Poloniex或Bittrex交易所交易,那么您可能已经多次见过UDST市场了,您甚至经常使用它。 …

BZOJ3930: [CQOI2015]选数

BZOJ3930: [CQOI2015]选数 Description 我们知道,从区间[L,H](L和H为整数)中选取N个整数,总共有(H-L1)^N种方案。 小z很好奇这样选出的数的最大公约数的规律,他决定对每种方案选出的N个整数都求一次最大公约数&#xf…

the job was canceled什么意思_这些英语短语,因为相差一个“the”导致意思大不相同!...

今天有小伙伴在我文章下面留言,说到了两个短语,同样是因为两者之间相差一个“the”而造成了意义完全不同。分别是“out of question”和“out of the question”,第一个没有“the”意思是“毫无疑问、无疑的”意思。第二个则是“不可能的”。…

php中类和对象的操作

在类中用$this指代对象本身。 用self::指代类本身。 $p1 new Person(michael);//向Person类的构造函数__construct中传名字 echo($p1->name);//获取对象p1的public实例属性name(注意没有$) $p1->speak();//调用对象p1的实例方法speak echo(Person::$sex);//获取类变量(s…

关于区块链的知识

链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载。 1 是什么导致了区块链的出现? 互联网的信任缺失导致了区块链技术的出现 在互联网上最缺乏的就是信任了,1993年《纽约客》…

JavaScript 表单与表单验证

JavaScript 表单 JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成。 以下实例代码用于判断表单字段(fname)值是否存在,如果存在,则弹出信息,否则阻止表单提交: JavaScript 实例 function validateForm() { var x d…

iOS项目的本地化处理(多国语言)

项目的本地化就是:iOS系统在不同语言环境下自动切换语言,从而实现一个app发布到全世界各个国家的AppStore上。 我们不仅仅需要在iOS项目中做本地化处理,在上架iOS APP的时候,也需要做对应的本地化设置哦。 iOS项目中需要处理的本地…

synchronized底层原理_你用过synchronized吗?它的底层原理是什么?Java经典面试题来了...

并发编程已经成为程序员必备技能作为Java程序员,不懂得并发编程显然已经不能满足市场需求了,尤其是在面试过程中将处于被动地位,也有可能面试将就此终结。那么作为Java开发者的你,日常虽然可以基于Java的并发工具包实现并发编程&a…

一个比特币要挖多久?

链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载。 一个比特币要挖多久 比特币怎么挖能赚钱吗比特币要用专门的挖矿机来挖。平均一个挖到的时间几周到几个月不等。要看你的机器的规模了。 一台普通笔…

[UE4]死亡后调整视角

AddLocalOffset:本地坐标偏移。 脱离控制器操作 会影响“OnDie”方法里面的相机移动操作,而函数里面又不允许使用“Delay”方法,但可以使用“Set Timer By Function Name”方法。 转载于:https://www.cnblogs.com/timy/p/9036267.html

git 设置 key 到服务器,同步代码不需要输入用户名和密码

1 ssh-keygen -t rsa 2 vim ~/.ssh/id_rsa.pub 3. 添加到git 服务器,这样同步代码就不需要输入密码转载于:https://www.cnblogs.com/likwo/p/5975809.html

26个音序的正确写法和占格_部编语文汉语拼音音序表,示范朗读+视频教学

部编语文《汉语拼音音序表》♬点击上方绿标收听音频这位老师教的有点喜感,但读得基本是正确的。《汉语拼音方案》给每个字母规定了名称音读法,这是朗读字母表。小学汉语拼音字母表教学中存在两种读法,一种是《方案》规定的名称来读&#xff0…

分布式块存储架构

链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载。 1.块存储简介 块存储,简单来说就是提供了块设备存储的接口。用户需要把块存储卷附加到虚拟机(或者裸机)上后才可以与其交互。…

Tomcat_7.x压缩版_环境变量配置(亲测有效)

自行下载配置JDK, I。下载Tomcat7,解压到合适的目录,文件夹尽量浅,我的Tomcat路径是D:\tom7 II。配置环境变量 1.打开到环境变量,新建变量名:CATALINA_HOME,变量值:D:\tomcat2.打开P…

Atitit 为什么网络会有延时 电路交换与分组交换的区别

Atitit 为什么网络会有延时 电路交换与分组交换的区别 按道理,网络是电子设备联网,应该达到光速才对。。 本质上因为互联网基于分组交换而不是电路交换。 分组交换相当于队列方式,别人发你的数据包先存储在交换机队列里面存储,它空…

python自己做电子词典_python实现电子词典

本文实例为大家分享了python实现电子词典的具体代码,供大家参考,具体内容如下服务端#!/usr/bin/env python3from __future__ import unicode_literals# codingutf-8from socket import *import osimport pymysqlimport timeimport sysimport signalDICT_…

区块链技术开发三个优势

链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载。 区块链技术开发公司目前的开发空间之大难以述清,尤以对产业转型中的应用较为广泛,但由于区块链技术开发公司目前尚正处风口&…

BZOJ4551: [Tjoi2016Heoi2016]树

BZOJ4551: [Tjoi2016&Heoi2016]树 Description 在2016年,佳媛姐姐刚刚学习了树,非常开心。现在他想解决这样一个问题:给定一颗有根树(根为1),有以下两种操作:1. 标记操作:对某个…