簡介

由于群友的號召，清明時節得空，所以仿知乎登錄頁面，基于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

總結

以上是生活随笔為你收集整理的html dom 知乎,知乎登录页 - 粒子运动效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。