canvas實(shí)現(xiàn)網(wǎng)站粒子進(jìn)度條效果

端html5的canvas技術(shù)現(xiàn)在經(jīng)常運(yùn)用到一些圖形中，今天我們就來講解下用canvas來實(shí)現(xiàn)一款網(wǎng)站中的進(jìn)度條效果

canvas實(shí)現(xiàn)網(wǎng)站中粒子特效的進(jìn)度條，效果圖：

實(shí)現(xiàn)代碼：

html:

js代碼：

度條可以用來加載頁面, 拉 Ajax 內(nèi)容, 或者處理像文件上傳這樣的基本用戶輸入任務(wù)。新的 HTML5進(jìn)度條使得在任何頁面上添加這些功能變得非常容易。但是為什么不重新設(shè)計一下呢？有了這些免費(fèi)的插件, 你可以重新設(shè)計你的進(jìn)度條來匹配任何網(wǎng)站的外觀。更不用說你可以添加到頁面上的所有額外功能和自定義動畫。

1. LineProgressbar

是一個超薄和輕量級的免費(fèi)插件。它適用于任何現(xiàn)代的進(jìn)度條元素, 它采取基本選項(xiàng)的總填充長度, 條色, 和高度 / 寬度(除其他功能)。你可以在你自己的網(wǎng)站上使用代碼片段來查看一些示例。對于任何愿意使用 jQuery 的人來說, 這可能是最好的進(jìn)度條插件。這是一個簡單的工作, 它將運(yùn)行在所有主要的瀏覽器。

2. MProgress.js

我真正喜歡的另一個簡單的選擇是 MProgress.js。這是圍繞谷歌的材料設(shè)計風(fēng)格建立起來的, 所以你可能會注意到它非常類似于谷歌的一些加載欄。

它有四種不同類型的加載條和四種不同的動畫風(fēng)格。它們都顯示在主頁上, 所以你可以看到哪個可能適合你的網(wǎng)站。

但是你也可以在 GitHub 回購中找到這些演示的 gif 動畫, 以及安裝說明。超級簡單, 超輕量級。你還能要求什么？

3. ProgressBar.js

我們都看到過橫跨網(wǎng)頁頂部的進(jìn)度條。這些越來越普遍, 它們通常用于動態(tài)加載的頁面。ProgressBar.js是一個免費(fèi)的插件, 可以復(fù)制這個特性。但它不僅僅依賴于頁面頂部的欄桿。

您可以使用這個插件為任何自定義形狀, 從圓圈到三角形和自定義的平行四邊形。

如果你查看主頁, 你會發(fā)現(xiàn)鏈接到通過 JSFiddle 托管的示例。這里有很多內(nèi)容, 這些是在你的頁面上添加裝載器的絕佳模板。

4. goalProgress

插件絕對是最簡單的插件。它主要用于跟蹤輸入字段上的數(shù)字, 但它可以用于任何類似的進(jìn)度條。關(guān)于 GitHub 回購的更多信息顯示了它的功能以及如何安裝。我推薦這個更簡單的起點(diǎn), 非?；镜倪M(jìn)步動畫。對于其他的插件, 請查看這里的其他插件。

5. μProgress

在為這篇文章做研究之前, 我從來沒有聽說過μProgress。然而, 它顯然是網(wǎng)絡(luò)上最好的進(jìn)度條插件之一。這是一個專注于自定義動畫的過時進(jìn)度條。它們都運(yùn)行在計算機(jī)的 GPU 上, 這樣可以釋放其他頁面元素的任務(wù)以更快的渲染。你可以閱讀更多關(guān)于這個過程的信息, 并在文檔中找到安裝細(xì)節(jié)。這是一個非常酷的項(xiàng)目, 有一個完整的插件 API 來添加自定義功能。

6. nanobar.js

如果你正在尋找一個純粹的 JavaScript 進(jìn)度插件, 那么不要再尋找了。使用 nanobar.JS, 你可以得到一個超小的 JS 庫, 它圍繞著進(jìn)度條動畫。當(dāng) gzipped 的時候, 整個東西測量在700字節(jié)以下, 所以它非常小。你可以在主頁上找到一些嵌入在頁面中的條形條的例子, 以及一個固定在全部瀏覽器寬度的頂部加載條。它只能運(yùn)行在一個單一的函數(shù)調(diào)用上, 這使得非 js 程序員以及堅決反對使用 jQuery 的開發(fā)者來說是完美的。

7. progressStep

大多數(shù)進(jìn)度條都會填滿一個百分比或者一個數(shù)字計數(shù)器。但是進(jìn)步是不同的。這個 jQuery 插件可以讓用戶在預(yù)定義的過程中通過不同的步驟來開發(fā)一個 breadcrumb 進(jìn)度條。這個過程可能是在網(wǎng)站上注冊一個新賬戶, 或者跟隨電子商務(wù)流程。不管怎樣, 這都是一個很好的插件, 可以將這種功能添加到你的網(wǎng)站中。它是完全免費(fèi)使用和有一些偉大的文檔在 GitHub 回購。

8. CProgress

Cprogress 是專門為圓形加載桿設(shè)計的。這些絕對不是常態(tài), 尤其是在網(wǎng)站上。但是你可以在不刷新頁面的情況下為 ajax 提供動力的 widgets 提供了便利。它帶有一些不同的外觀和大量可選的功能, 例如自定義速度和數(shù)字限制。您需要知道的所有信息都可以在主頁或者主要的回購中找到, 還有一個下載鏈接。

9. jQuery Circle Progress

這里有一個非常相似的插件, 也建立在 jQuery 庫上。但是使用 jQuery Circle Progress 插件, 你可以獲得更多的選擇。有更多的自定義主題和更多的選項(xiàng)可供選擇。缺點(diǎn)是什么？它可以再重一點(diǎn), 所以它不是每個項(xiàng)目的最佳解決方案。

目前在 v1.2.2中, 這是一個穩(wěn)定的插件, 值得在生產(chǎn)網(wǎng)站上使用。這取決于你是否需要一個設(shè)計成圓圈的進(jìn)度條！

不管你需要什么, 我保證其中的一個插件可以幫助你節(jié)省時間和挫敗感, 避免從頭開始編寫進(jìn)度條。

天我們想向大家展示如何創(chuàng)建一些具有特殊3D外觀的純CSS進(jìn)度條。不妨將本教程當(dāng)作是一個高級的CSS練習(xí)，以更深入地了解更多有趣的3D屬性和著色技術(shù)。僅使用CSS創(chuàng)建UI組件將訓(xùn)練你的創(chuàng)造性思維，并且在本教程中，我們將通過制作進(jìn)度條并動畫化來向大家展示一些如何創(chuàng)建更復(fù)雜形狀的技巧。

注意：某些CSS屬性僅在現(xiàn)代瀏覽器中受支持。IE仍然不支持transform-style：preserve-3d，這是一個用于創(chuàng)建嵌套3D結(jié)構(gòu)的關(guān)鍵屬性；所以進(jìn)度條在IE瀏覽器中將是扁平/無效的。

瀏覽器支持：Chrome Firefox Internet Explorer Safari Opera

源碼下載(http://www.html5tricks.com/jquery-css3-3d-progress-bar.html)

我們將在本教程中使用Sass（與Compass一起使用），因此請確保設(shè)置并了解其基礎(chǔ)知識：

安裝Sass和Sass Basics
安裝Compass Stylesheet Authoring Framework和Compass CSS3

如果你想對動畫進(jìn)度條使用完整的解決方案，那么你應(yīng)該查看Kimmo Brunfeldt的ProgressBar.js或HubSpot的PACE，以獲得出色的頁面加載進(jìn)度條。

為了生成所有必要的前綴，你可以使用像Autoprefixer或用于Sublime Text的插件。

我們將使用許多有趣的CSS屬性，如transform，perspective和box-shadow。我們還將大量使用SASS，以節(jié)省生成進(jìn)度條的位置和外觀所需的很多時間。通過使用相對大?。╡m，百分比），我們可以確保進(jìn)度條的大小易于調(diào)整。

構(gòu)建面

我們先從構(gòu)建一個包含所有六個面的框開始。這個框?qū)⒆鳛槲覀兊闹饕萜鳎脕碓O(shè)置進(jìn)度條的尺寸及其視點(diǎn)。我們還將使用一個包裝器用于透視圖，并且這個包裝器的font-size屬性將允許使用某些em單位魔法的幫助來擴(kuò)展進(jìn)度條。

為了確保所有的面都是我們3D空間的一部分，我們需要將transform-style: preserve-3d應(yīng)用于框。

所以讓我們從初始化一些顏色變量開始來編寫樣式吧：

$light-gray: #e0e0e0;
$magenta: #ec0071;
$white: #f5f5f5;

.perspective {
font-size: 5em; // sets the main scale size
perspective: 12em; // sets the perspective
perspective-origin: 50% 50%;
text-align: center;
}

.bar {
display: inline-block;
width: 1em;
height: 1em;
margin-top: 1em;
position: relative;
transform: rotateX(60deg); // sets the view point
transform-style: preserve-3d; // perspective for the children
}

現(xiàn)在，我們來看看這些面。如果我們想要能夠毫無困難地重新調(diào)整我們的主框，里面包含的面必須得像液體一樣具有流動行為以及具備絕對位置。

.bar {
// -> The SCSS written before
.bar-face {
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background-color: rgba($light-gray, .6); // just to see what is happening
}
}

寫標(biāo)記并且確保它是可以訪問的：

<div class="perspective">
<div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face"/>
<div class="bar-face"/>
<div class="bar-face"/>
<div class="bar-face"/>
<div class="bar-face"/>
<div class="bar-face"/>
</div>
</div>

如果你有興趣了解更多有關(guān)可訪問性的信息，這篇文章（由Gez Lemon撰寫）幫助我了很多：‘Introduction to WAI ARIA’

設(shè)置面

這是非常重要的一部分。進(jìn)度條的面必須準(zhǔn)確定向，這樣當(dāng)我們開始添加百分比填充時，就不會陷入困境。

.bar {
// -> The SCSS from before
.bar-face {
// -> The SCSS from before
transform-origin: 50% 100%;
&.roof {
transform: translateZ(1em);
}
&.front {
transform: rotateX(-90deg);
}
&.right {
left: auto;
right: -.5em;
width: 1em;
transform: rotateX(-90deg) rotateY(90deg) translateX(.5em);
}
&.back {
transform: rotateX(-90deg) rotateY(0deg) translateZ(-1em);
}
&.left {
width: 1em;
transform: rotateX(-90deg)rotateY(-90deg) translateX(-.5em) translateZ(.5em);
}
}
}

<div class="perspective">
<div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face roof"/>
<div class="bar-face front"/>
<div class="bar-face left"/>
<div class="bar-face right"/>
<div class="bar-face back"/>
<div class="bar-face floor"/>
</div>
</div>

好的，這是一個很棒的立方體，但是我們要為進(jìn)度條創(chuàng)建一個矩形。如果你還記得的話，我們已經(jīng)用一種液體化的方法構(gòu)建了面，所以如果我們只是增加.bar類的width，那么這樣就可以。在這個例子中，我們使用了4em的寬度。

構(gòu)建百分比填充

百分比填充將包含在面內(nèi)，并且，為了保持HTML代碼的最小化，我們將使用偽類:before。這樣生成的:before元素將顯示相對于面寬度的百分比。

.bar {
// -> The SCSS from before
.bar-face {
// -> The SCSS from before
&.percentage:before {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 0;
height: 100%;
margin: 0;
background-color: rgba($magenta, .8);
transition: width .6s ease-in-out;
}
}
}

<div class="perspective">
<div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face roof percentage"/>
<div class="bar-face front percentage"/>
<div class="bar-face left"/>
<div class="bar-face right"/>
<div class="bar-face back percentage"/>
<div class="bar-face floor percentage"/>
</div>
</div>

現(xiàn)在我們需要編寫百分比填充樣式。手動編寫一百個類將會非常繁瑣，所以讓我們寫一些可靠的循環(huán)來從HTML中獲取aria-valuenow屬性的所有值。

.bar {
// -> The SCSS from before
.bar-face {
// -> The SCSS from before
}

@for $i from 0 to 101 {
&[aria-valuenow='#{$i}'] {
.percentage:before {
width: $i * 1%;
}
}
}
}

如果你想立竿見影地看到成果，那么只需將HTML中的aria-valuenow屬性從0更改至100。

構(gòu)建皮膚

為了構(gòu)建皮膚，我們將使用Sass mixins。為了得到一個現(xiàn)實(shí)化的外觀，我們將使用box-shadow屬性。這個屬性支持一個數(shù)組的值，并且這個數(shù)組將允許我們模擬照明。我們將在這個屬性中包含地面陰影和面的采光。

@mixin build-skin($color, $name) {
&.#{$name} {
.floor {
box-shadow:
0 -0.2em 1em rgba(0,0,0,.15),
0 0.2em 0.1em -5px rgba(0,0,0,.3),
0 -0.75em 1.75em rgba($white,.6);
}
.left {
background-color: rgba($color, .5);
}
.percentage:before {
background-color: rgba($color, .5);
box-shadow: 0 1.6em 3em rgba($color,.25);
}

}

}
.bar {
// -> The SCSS from before
@include build-skin(#57caf4, 'cyan');
}

<div class="perspective">
<div class="bar cyan" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face roof percentage"/>
<div class="bar-face front percentage"/>
<div class="bar-face left"/>
<div class="bar-face right"/>
<div class="bar-face back percentage"/>
<div class="bar-face floor percentage"/>
</div>
</div>

此外，我們需要一個照亮面的技巧。如果我們以正確的順序輸入面的DOM節(jié)點(diǎn)，我們將看到奇跡：

<div class="perspective">
<div class="bar cyan" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face roof percentage"/>
<div class="bar-face back percentage"/>
<div class="bar-face floor percentage"/>
<div class="bar-face left"/>
<div class="bar-face right"/>
<div class="bar-face front percentage"/>
</div>
</div>

這里發(fā)生了什么？很簡單：當(dāng)瀏覽器渲染一個絕對元素時，默認(rèn)情況下它會添加一個自動遞增的z-index（如果我們不編輯此屬性的話）。所以，如果我們通過先放置底部的面來改變渲染順序，那么它的陰影就會覆蓋在背面的所有面上。這就是我們實(shí)現(xiàn)現(xiàn)實(shí)化陰影的原理。

關(guān)于如何實(shí)現(xiàn)進(jìn)度條就都在這里了！現(xiàn)在，請查看所有DEMO演示和源代碼文件，然后開始構(gòu)建皮膚來訓(xùn)練自己此技能吧。

感謝各位的閱讀，希望本教程能對你有所幫助！