html dom 知乎,知乎登录页 - 粒子运动效果

简介

由于群友的号召，清明时节得空，所以仿知乎登录页面，基于canvas实现了一个粒子(Particle)随机运动的动画效果。

Demo

Demo源码

独立包

安装 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属性

类型

例子

说明

atomColor

string

#eeeeee

原子颜色，默认值为#E4E5E6

interactive

boolean

true

是否允许鼠标点击交互，默认值为true

density

number或string

medium

密度，取值范围为1000~50000, low, high, medium。

这里可以理解成atoms数量=canvas宽*canvas高/密度。

这样的设计是为了在全站响应式的情况下，小屏幕会生成相应少的原子，大屏幕则会生成较多的原子，所以更符合日常需求。

velocity

number或string

.8

原子移动速度，取值范围为0~1，fast，slow，none，medium，默认为medium

效果图

兼容性

任何支持Canvas的浏览器，如常见的：

IE9+

Firefox

Chrome

Safari