簡(jiǎn)介

由于群友的號(hào)召，清明時(shí)節(jié)得空，所以仿知乎登錄頁面，基于canvas實(shí)現(xiàn)了一個(gè)粒子(Particle)隨機(jī)運(yùn)動(dòng)的動(dòng)畫效果。

Demo

Demo源碼

獨(dú)立包

安裝 npm i zhihu-particle --save #使用npm安裝復(fù)制代碼 yarn add zhihu-particle #使用yarn安裝復(fù)制代碼

基本使用

在CommonJS環(huán)境下： import Particle from 'zhihu-particle';

new Particle(document.getElementById('canvas-wrapper'));復(fù)制代碼

簡(jiǎn)單來說，在CommonJS下引入Particle類后，傳入一個(gè)DOM節(jié)點(diǎn)作為第一個(gè)參數(shù)即可完成創(chuàng)建，一句話實(shí)現(xiàn)知乎效果。

API說明 import Particle from 'zhihu-particle'; //Particle為當(dāng)前庫的Class， 可用于多次實(shí)例化

new Particle(,);復(fù)制代碼

Html Dom Element

當(dāng)前參數(shù)為即將插入的Html Dom容器，或簡(jiǎn)單來說可以認(rèn)為是一個(gè)Div。例如 document.getElementById('#canvasWrapper');復(fù)制代碼

為了可拓展，Zhihu-Particle所創(chuàng)建的canvas會(huì)插入指定的Div中，canvas的大小會(huì)自動(dòng)跟隨該Div大小變化而變化，所以指定的Div請(qǐng)自行設(shè)置大小。 這樣做的目的是可以讓用戶更加自定義的選擇動(dòng)畫區(qū)域而不必全屏，同時(shí)也自動(dòng)實(shí)現(xiàn)了響應(yīng)式。詳細(xì)可以參考本庫的知乎React Demo。

ParticleOption

當(dāng)前參數(shù)為粒子選項(xiàng)，可選，有默認(rèn)的配置。

context屬性

類型

例子

說明

atomColor

string

#eeeeee

原子顏色，默認(rèn)值為#E4E5E6

interactive

boolean

true

是否允許鼠標(biāo)點(diǎn)擊交互，默認(rèn)值為true

density

number或string

medium

密度，取值范圍為1000~50000, low, high, medium。

這里可以理解成atoms數(shù)量=canvas寬*canvas高/密度。

這樣的設(shè)計(jì)是為了在全站響應(yīng)式的情況下，小屏幕會(huì)生成相應(yīng)少的原子，大屏幕則會(huì)生成較多的原子，所以更符合日常需求。

velocity

number或string

.8

原子移動(dòng)速度，取值范圍為0~1，fast，slow，none，medium，默認(rèn)為medium

效果圖

兼容性

任何支持Canvas的瀏覽器，如常見的：

IE9+

Firefox

Chrome

Safari

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。