網(wǎng)頁設(shè)計(jì)中粒子動(dòng)畫的 10 個(gè)漂亮例子

年前，粒子動(dòng)畫席卷了網(wǎng)絡(luò)，并成功地為自己開辟了一個(gè)利基市場(chǎng)。當(dāng)前對(duì)具有高科技氛圍和幾何裝飾的設(shè)計(jì)的巨大癡迷使它們成為當(dāng)今更受歡迎的解決方案之一。

使用粒子動(dòng)畫給人留下深刻印象
隨著時(shí)間的推移，技術(shù)成熟了。從散落在畫布上的雜亂無章的小白點(diǎn)，它變成了一種潛力巨大的工具。這不是什么特別的東西，但它有一定的令人驚嘆的因素。此外，它完美地為高科技、幾何和商務(wù)美學(xué)做出了貢獻(xiàn)——自然而然地完成了它們。

前提是：粒子動(dòng)畫要給人留下深刻印象。而且，開發(fā)人員始終堅(jiān)持這一假設(shè)，充分利用它。讓我們考慮一下這個(gè)解決方案的真正粉絲創(chuàng)建的一些驚人的代碼片段。

NO.1 Justin Windle 的 30,000 個(gè)粒子

這里的標(biāo)題不言自明。船上有 30,000 個(gè)粒子，您會(huì)期待一些宏偉的東西。賈斯汀溫德爾當(dāng)然達(dá)到了我們的期望。他的概念令人難以置信。用你的鼠標(biāo)到處玩。物理學(xué)只是例外。這個(gè)版本的粒子動(dòng)畫在開發(fā)者中很受歡迎，盡管規(guī)模沒有那么大。

NO.2 Alex Safayan 在水中的魚

Alex Safayan 提出了幾乎相同的解決方案，但在這種情況下，粒子越來越大。鼠標(biāo)光標(biāo)也將這些點(diǎn)推開，形成帶有微妙漣漪效果的痕跡。動(dòng)畫的行為讓人想起魚靠近水面時(shí)的運(yùn)動(dòng)。注意物理學(xué)：點(diǎn)之間的相互作用是經(jīng)過深思熟慮的。

NO.2 浮游生物——Marco Dell'Anna 的粒子生命

獲得 2017 年度最受關(guān)注項(xiàng)目獎(jiǎng)的 Plankton 無疑是值得關(guān)注的。該項(xiàng)目不僅著迷于想法，還著迷于實(shí)現(xiàn)。從像手套一樣適合這里的微妙色彩到看起來令人難以置信的自然的華麗行為，Marco Dell'Anna 對(duì)細(xì)節(jié)有著敏銳的洞察力。

NO.4 Marco Dell'Anna的星塵

我喜歡這里華麗的復(fù)古氛圍、霓虹燈和華麗的色彩。很難把你的眼睛從它身上移開。Stardust 是設(shè)計(jì)和編碼的共生體，是一部鼓舞人心的杰作。

NO.5 Akimitsu Hamamuro 的重力點(diǎn)

Akimitsu Hamamuro 邀請(qǐng)您在他的游樂場(chǎng)添加所謂的“重力點(diǎn)”。它們侵入點(diǎn)的混亂運(yùn)動(dòng)，像磁鐵一樣拉動(dòng)它們。雖然它們不扮演軌道中心的角色；然而，它們形成了迫使粒子向其方向移動(dòng)的焦點(diǎn)。

NO.6 Nate Wiley 的 Particle Orb CSS

如今，球體是英雄區(qū)域非常流行的風(fēng)格選擇。Nate Willey 對(duì)這一趨勢(shì)的看法令人印象深刻。由于微小的顆粒，球體看起來很脆弱，同時(shí)由于經(jīng)過深思熟慮的行為而堅(jiān)固。他分解和重新形成球體的程序非常棒。

NO.7 Kevin Rajaram 的粒子波

Kevin Rajarm 汲取了粒子動(dòng)畫的美麗和優(yōu)雅，并用Three.js的強(qiáng)大來增強(qiáng)它，帶來了一個(gè)精致但真正復(fù)雜的概念。令人驚嘆的海浪景色讓人感覺未來主義、人工和迷人。

非正統(tǒng)用途

還有更令人印象深刻的使用粒子動(dòng)畫的方法。讓我們走出常規(guī)，開箱即用地思考：這種方法很容易使標(biāo)識(shí)和字母等元素受益。

NO.8 Tamino Martinius 的交互式粒子標(biāo)志

Interactive Particle Logo 就是一個(gè)典型的例子。它看起來像是上面提到的 Justin Windle 片段的重新設(shè)想的解決方案。雖然沒有 30,000 個(gè)點(diǎn)，但它由數(shù)量驚人的粒子組成，巧妙地組成了“CODEPEN”這個(gè)詞。這是該概念找到實(shí)際用途的案例之一。

NO.9 Louis Hoebregts 的文本到粒子

Louis Hoebregts 在這支筆中提供了先前解決方案的彩色版本。這里的文本是由一千個(gè)彩色實(shí)心圓圈組成的，這些圓圈通過與上一個(gè)示例相同的交互性來豐富。

NO.10 粒子由 Marco Dell'Anna 書寫文本

雖然這不是一個(gè)戲劇性的入口，但它有一些令人著迷的東西。流暢的動(dòng)畫慢慢揭開人物的面紗，點(diǎn)燃我們的興趣。這個(gè)概念有某種神秘的風(fēng)格，類似于“陌生人”的介紹。

NO.11 馬可·戴爾安娜 (Marco Dell'Anna) 就這樣做

這是Marco Dell'Anna的又一杰作。這一次，粒子動(dòng)畫參與塑造了著名的耐克標(biāo)志。從晦澀、半透明到明快、立體，動(dòng)畫逐漸暴露了標(biāo)志，不顯眼地抓住了整體的注意力。

引人注目的效果

粒子動(dòng)畫是越小越好的情況之一。點(diǎn)越小，可以實(shí)現(xiàn)的效果就越令人印象深刻。一方面，由于涉及幾何和物理，它看起來很復(fù)雜。另一方面，由于精致的形狀，它看起來脆弱而微妙。這種獨(dú)特的融合使粒子動(dòng)畫與眾不同且引人注目。

粒子動(dòng)畫在企業(yè)網(wǎng)站建設(shè)中的運(yùn)用案例

圖片來源：素馬設(shè)計(jì)

習(xí)canvas，javascript的小伙伴，可以跟著我這篇文章的思路一起做一個(gè)小效果出來，代碼都齊全了。

這里還是要說一下我的前端學(xué)習(xí)群：230354270，從我一個(gè)到現(xiàn)在的都是看我每一篇文章來的，可以說都是我們大前端的學(xué)霸啊，不定期分享干貨。想學(xué)到東西的都可以來，歡迎初學(xué)和進(jìn)階中的小伙伴

首先看一下源圖和轉(zhuǎn)換成粒子效果的對(duì)比圖：

左側(cè)圖片為源圖，右側(cè)圖片為粒子效果圖。該效果是在Canvas畫布上制作的。將圖片制作成粒子效果相對(duì)而言是比較簡(jiǎn)單的。重點(diǎn)了解兩個(gè)知識(shí)點(diǎn)即可

1:圖片是通過image對(duì)象形式繪制在畫布上的，然后使用Canvas的getImageData接口，獲取圖像的像素信息。

var imageData=ctx.getImageData(x, y, width, height);

參數(shù)說明：x，y為畫布上的x和y坐標(biāo)

width，height為獲取指定區(qū)域圖像的信息

返回值說明：imageData為返回值，它是一個(gè)對(duì)象，包含三個(gè)屬性

2:了解像素區(qū)域數(shù)據(jù)的排布說明，以上獲取的圖片數(shù)據(jù)像素信息(imageData對(duì)象中的data屬性)為RGBA整型的一維數(shù)組數(shù)據(jù)。一個(gè)像素是有4個(gè)值（R,G,B,A）組成的。也就是說，數(shù)組信息每四個(gè)為一個(gè)像素點(diǎn)。因此，有以下規(guī)則，

第一個(gè)像素信息為：RGBA(data[0],data[1],data[2],data[3])

第二個(gè)像素信息為：RGBA(data[4],data[5],data[6],data[7])

.....

第N個(gè)像素信息為: RGBA(data[(n-1)*4],data[(n-1)*4+1],data[(n-1)*4+2],data[(n-1)*4+3])

.....

另外，像素區(qū)域既然是一個(gè)區(qū)域，它是有寬和高的。上面的推算公式適合單獨(dú)一行使用定位一個(gè)像素點(diǎn)。所以計(jì)算像素點(diǎn)時(shí)要考慮到在整個(gè)圖像區(qū)域內(nèi)定位：

以上圖為例。圖像的寬和高都為200，如果按照每一個(gè)像素為一行一列時(shí)。則該圖像共有200行，200列。所以要取得 i 行第 j 列的像素初始位置信息為：

var pos =[( i-1 )*200]+( j-1 )]*4;

其中，公式中的 i 表示行數(shù)，j 表示列數(shù)。200為圖像的寬度。

demo代碼：

上面如果不理解，對(duì)照代碼運(yùn)行一下試試?yán)斫獍桑?/p>

這次沒能為粒子加上炫酷的動(dòng)態(tài)效果~~下次補(bǔ)上，找一些算法就可以粒子動(dòng)起來的，有興趣可以做做看~

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助

整個(gè)效果的功能都完成了

如果大家想學(xué)習(xí)canvas，JavaScript，可以加群：230354270 群里面有每天都會(huì)上傳視頻供大家學(xué)習(xí)，歡迎學(xué)習(xí)交流的小伙伴過來一起學(xué)習(xí)交流！

如果想看到更加系統(tǒng)的文章和學(xué)習(xí)方法經(jīng)驗(yàn)可以關(guān)注我的微信公眾號(hào)：‘HTML網(wǎng)頁’關(guān)注后回復(fù)可以領(lǐng)取一套完整的學(xué)習(xí)視頻！

言

前幾天在整理書簽時(shí)，發(fā)現(xiàn)收藏了好多寶藏網(wǎng)站，寶藏項(xiàng)目，就光說文字效果，就讓諸位大佬玩出了一萬個(gè)花樣，所以小包準(zhǔn)備跟大家一起來分享和學(xué)習(xí)這些異彩紛呈的創(chuàng)意和寫法。

該文作為《文字到底能玩出多少花樣》的第一篇文章，首先來帶大家學(xué)習(xí) 文字粒子 的實(shí)現(xiàn)。

文字粒子這個(gè)創(chuàng)意最先源自于哪位大佬我也不知道，但我最早發(fā)現(xiàn)這個(gè)效果是 kennethcachia 寫的巨炫酷的文字粒子效果，每次我打開這個(gè) demo ，我都感覺我是個(gè)審美笨比，大佬做的真炫酷，真漂亮。

下面是 shape-shifter 效果的 github 地址和 demo 演示界面:

shape-shifter
Demo演示地址

不多說了，一起進(jìn)入阿包的文字粒子效果吧。

基礎(chǔ)知識(shí)

文章最開始之前，先帶大家了解兩個(gè) canvas 函數(shù)

fillText

語法

ctx.fillText(text, x, y, [maxWidth]);
復(fù)制代碼

參數(shù)

text: 規(guī)定在畫布上輸出的文本。
x: 文本起點(diǎn)的 x 軸坐標(biāo)。
y: 文本起點(diǎn)的 y 軸坐標(biāo)。
maxWidth: 可選,繪制的最大寬度。

可以通過 font 屬性來定義字體和字號(hào)，fillStyle 屬性來定義字體顏色。

getImageData

語法

ctx.getImageData(sx, sy, sw, sh);
復(fù)制代碼

參數(shù)

sx, sy: 要提取圖像的左上角 x y 坐標(biāo)
sw, sh: 要提取圖像的寬高

返回值

返回 ImageData 對(duì)象，該對(duì)象拷貝了指定圖像區(qū)域的像素
對(duì)于圖像中的每個(gè)像素點(diǎn)，都分別存放 RGBA 四方面的信息，所有的像素?cái)?shù)據(jù)以一維數(shù)組形式存放在 data 屬性中

繪制思路

在基礎(chǔ)知識(shí)方面，我首先介紹了兩個(gè)方法: fillText 和 getImageData 。 fillText 可以在畫布上繪制文字，getImageData 可以提取畫布上一定矩形區(qū)域的像素點(diǎn)。也就是說，通過這兩個(gè)方法就可以提取到我們繪制的文字的像素?cái)?shù)據(jù)。那剩下的工作就是怎么處理這些像素?cái)?shù)據(jù)，繪制對(duì)應(yīng)運(yùn)動(dòng)粒子就可以。

下面來分析一下具體實(shí)現(xiàn)思路:

繪制主畫布: 作為文字粒子的渲染畫布
生成副畫布: 作為繪制文字的畫布，不需要添加到頁面中，作為提取繪制文字像素的載體
生成文字粒子: 根據(jù)獲取到的像素點(diǎn)，渲染粒子
文字粒子運(yùn)動(dòng)軌跡: 計(jì)算每個(gè)粒子的移動(dòng)軌跡
啟動(dòng)動(dòng)畫

初始化工作

設(shè)立配置項(xiàng) options 和 textOptions ，分別存放畫布的寬高、速度等信息和副畫布文字的配置。

const options = {
    width: 400,
    height: 400,
    speed: 10
};
const textOptions = {
    words: "戰(zhàn)場(chǎng)小包",
    font: "200px fangsong",
};
復(fù)制代碼

繪制主畫布

主畫布已經(jīng)通過標(biāo)簽添加至頁面中，因此只需要配置它的 width 與 height ，為了方便展示，將 canvas 寬高設(shè)置為瀏覽器寬高

function pointCanvas(canvas, { width, height }) {
    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext("2d");
    return ctx;
}
// pointCavas(canvas, options)
復(fù)制代碼

創(chuàng)建副畫布

副畫布的創(chuàng)建也非常簡(jiǎn)單，只需要通過 JavaScript 創(chuàng)建一個(gè) canvas 節(jié)點(diǎn)，配置副畫布的寬高(與主畫布相同)，不需要添加到 dom 中。

副畫布與主畫布的寬高保持一致，這樣副畫布中的像素點(diǎn)，就可以對(duì)應(yīng)到主畫布中的像素位置，無需進(jìn)行轉(zhuǎn)換

function createVitualCvs({ width, height }) {
    const vitualCvs = document.createElement("canvas");
    vitualCvs.width = width;
    vitualCvs.height = height;
    let vitualCxt = vitualCvs.getContext("2d");
    initCanvas(vitualCxt, options, textOptions);
    return getFontInfo(vitualCxt, options);
}
復(fù)制代碼

初始化副畫布

設(shè)置文字屬性，通過 fillText 繪制文字。通過 (canvas.width - measure.width) / 2 保證在畫布中間繪制文字。

measureText 可以獲取到文字的寬高，更詳細(xì)的參考鏈接: measureText

function initCanvas(ctx, { width, height }, { font, words }) {
    ctx.font = font;
    const measure = ctx.measureText(words);
    ctx.fillText(words, (width - measure.width) / 2, height / 2);
}
復(fù)制代碼

構(gòu)建粒子類

每個(gè)粒子有以下屬性:

x: 粒子最終停留的位置 x 坐標(biāo)
y: 粒子最終停留的位置 y 坐標(biāo)
mx: 初始化時(shí)粒子的 x 坐標(biāo)位置
my: 初始化時(shí)粒子的 y 坐標(biāo)位置
radius: 粒子大小
speed: 粒子移動(dòng)速度

同時(shí)還具備兩個(gè)方法:

draw: 繪制粒子本身的方法
update: 更新粒子位置的方法

這里給出 draw 和 update 方法代碼

draw() {
    ctx.beginPath();
    ctx.fillStyle = this.color;
    ctx.arc(this.mx, this.my, this.radius, 0, Math.PI * 2, false);
    ctx.fill();
    this.update();
}
// 我這里的 update 比較簡(jiǎn)單，如果想要更復(fù)雜更炫酷的效果，可以使用貝塞爾曲線 
update() {
    this.mx = this.mx + (this.x - this.mx) / this.speed;
    this.my = this.my + (this.y - this.my) / this.speed;
}
復(fù)制代碼

獲取文字位置信息，繪制粒子

通過 getImageData 獲取副畫布的像素信息，getImageData 返回值中對(duì)每個(gè)像素點(diǎn)存儲(chǔ) RGBA 四方面信息，因此每四個(gè)數(shù)組元素代表一個(gè)像素點(diǎn)，可以通過 Alpha 來判斷該像素點(diǎn)是否存在文字。

function getWordPxInfo(ctx, { width, height }) {
    let imageData = ctx.getImageData(0, 0, width, height).data;
    const particles = [];
    for (let x = 0; x < width; x += 4) {
        // 為了粒子效果出現(xiàn)，間隔選點(diǎn)
        for (let y = 0; y < height; y += 4) {
        // 判斷當(dāng)前像素點(diǎn)是否有文字
        const pxAlphaIndex = (x + y * width) * 4 + 3;
        if (imageData[pxAlphaIndex] > 0) {
            particles.push(
            new Particle({
                x,
                y,
            })
            );
        }
        }
    }
    return particles;
}
復(fù)制代碼

啟動(dòng)動(dòng)畫

動(dòng)畫是通過 requestAnimationFrame 實(shí)現(xiàn)，每一幀清空畫布，重新繪制所有的粒子。

requestAnimationFrame學(xué)習(xí): 【今天你更博學(xué)了么】一個(gè)神奇的前端動(dòng)畫 API requestAnimationFrame

function init(points, { width, height }) {
    ctx.clearRect(0, 0, width, height);
    points.forEach((value) => {
        value.draw();
    });
    const timer = window.requestAnimationFrame(function () {
        init(points, options);
    });
}
復(fù)制代碼

大功告成

大功告成，摸魚成功。

源碼倉庫

傳送門: 文字粒子

在線咨詢

上一篇：JavaScript-如何使用js獲取當(dāng)前網(wǎng)頁的URL？
下一篇：什么是HTML5+CSS3?

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商