女生做网站编辑怎么样,四川建筑人才招聘网,房地产网站开发公司,什么是百度搜索推广简介由于群友的号召#xff0c;清明时节得空#xff0c;所以仿知乎登录页面#xff0c;基于canvas实现了一个粒子(Particle)随机运动的动画效果。DemoDemo源码独立包安装 npm i zhihu-particle --save #使用npm安装复制代码 yarn add zhihu-particle #使用yarn安装复制代码基…简介由于群友的号召清明时节得空所以仿知乎登录页面基于canvas实现了一个粒子(Particle)随机运动的动画效果。DemoDemo源码独立包安装 npm i zhihu-particle --save #使用npm安装复制代码 yarn add zhihu-particle #使用yarn安装复制代码基本使用在CommonJS环境下 import Particle from zhihu-particle;new Particle(document.getElementById(canvas-wrapper));复制代码简单来说在CommonJS下引入Particle类后传入一个DOM节点作为第一个参数即可完成创建一句话实现知乎效果。API说明 import Particle from zhihu-particle; //Particle为当前库的Class 可用于多次实例化new Particle(,);复制代码Html Dom Element当前参数为即将插入的Html Dom容器或简单来说可以认为是一个Div。例如 document.getElementById(#canvasWrapper);复制代码为了可拓展Zhihu-Particle所创建的canvas会插入指定的Div中canvas的大小会自动跟随该Div大小变化而变化所以指定的Div请自行设置大小。 这样做的目的是可以让用户更加自定义的选择动画区域而不必全屏同时也自动实现了响应式。详细可以参考本库的知乎React Demo。ParticleOption当前参数为粒子选项可选有默认的配置。context属性类型例子说明atomColorstring#eeeeee原子颜色默认值为#E4E5E6interactivebooleantrue是否允许鼠标点击交互默认值为truedensitynumber或stringmedium密度取值范围为1000~50000, low, high, medium。这里可以理解成atoms数量canvas宽*canvas高/密度。这样的设计是为了在全站响应式的情况下小屏幕会生成相应少的原子大屏幕则会生成较多的原子所以更符合日常需求。velocitynumber或string.8原子移动速度取值范围为0~1fastslownonemedium默认为medium效果图兼容性任何支持Canvas的浏览器如常见的IE9FirefoxChromeSafari
