開源造輪子:一個簡潔,高效,輕量級,酷炫的不要不要的canvas粒子運動插件庫

来源:http://www.cnblogs.com/barrior/archive/2016/10/14/5944909.html
-Advertisement-
Play Games

一:開篇 哈哈哈,感謝標題黨的蒞臨~ 雖然標題有點誇張的感覺,但實際上,插件庫確實是簡潔,高效,輕量級,酷炫酷炫的咯。廢話不多說,先來看個標配例子吧: (codepen線上演示編輯:http://codepen.io/barrior/pen/XjEEBz) 是吧,應該是酷炫酷炫的吧,不喜歡的話可以向 ...


一:開篇

哈哈哈,感謝標題黨的蒞臨~

雖然標題有點誇張的感覺,但實際上,插件庫確實是簡潔,高效,輕量級,酷炫酷炫的咯。廢話不多說,先來看個標配例子吧:

(codepen線上演示編輯:http://codepen.io/barrior/pen/XjEEBz

是吧,應該是酷炫酷炫的吧,不喜歡的話可以向下看更多的例子哦~

 

二:說說我(們)的理念:

厭倦市場上眼花繚亂,百花齊放,百鳥爭鳴的繁榮景象,我心憔悴... 
像我這種頭腦簡單,四肢也簡單的人就適合簡單的API,簡單人和物 (。・_・)/~~~
好吧,還是說回代碼吧,API設計希翼 "The Write Less, Do More"  "Keep it Simple and Stupid的形式,拒絕繞彎子API,崇尚簡潔,簡約!
所以你會跟作者一樣,使用起這個插件會感覺到很爽,很輕鬆,嘎嘎嘎~ 不信看看接下來的所有效果展示。

 

三:所有效果展示

目前插件庫提供了三種特效:粒子無序運動,波浪運動,雪花飄落特效。 
當然,配置不同的API參數值,或許可以得到挺多不同的特效呢!
上面已經演示過標配的粒子無序運動啦,下麵演示後面兩種。

1、波浪運動·標配

(效果參考QQ電話,codepen線上演示編輯:http://codepen.io/barrior/pen/BLAAPa

js代碼:

new Particleground.wave( '#demo', {
    num: 3,
    // 三條線依次的顏色
    lineColor: ['rgba(0, 190, 112, .5)', 'rgba(0, 190, 112, .7)', 'rgba(0, 190, 112, .9)'],
    // 三條線依次的寬度
    lineWidth: [.5, .7, .9],
    // 三條線依次的向左偏移值
    offsetLeft: [2, 1, 0],
    // 三條線都向上偏移容器高度的0.75倍
    offsetTop: .75,
    // 三條線依次的波峰高度
    crestHeight: [10, 14, 18],
    // 三條線都只有兩個波峰(波紋)
    rippleNum: 2,
    speed: .1,
    // 隱藏填充,預設false
    fill: false,
    // 顯示邊框,即線條效果,預設true
    stroke: true
});

如果你英語可以的話,相信看屬性名結合效果就大概知道配置是什麼意思啦,不然的話你可以看看官網對這幾個API的描述,戳這裡哈

 

2、波浪運動·loading動畫

 

(codepen線上演示編輯:http://codepen.io/barrior/pen/rrddQw

這個js代碼就不貼啦,需要自己寫載入的進度,然後設置到效果上哈。

 

3、雪花飄落特效

(codepen線上演示編輯:http://codepen.io/barrior/pen/mAxxdG

極簡單的js代碼:

new Particleground.snow('#demo');

 

四:解釋標題

好啦,效果看完啦,現在解釋一下標題的那幾個宣傳字眼,雖然好像並沒有什麼用...

簡潔:
  • 就像前面的粒子運動例子,只需要一行簡單的代碼 new Particleground.particle('#demo') 就可以實現啦。

  • 然後就是“潔”:這個需要閱讀源碼咯,相信從源碼中你會看到代碼的簡潔優雅的,具體請戳這裡啦~

  • 當然,特效也是簡潔美觀的啦,對不起視覺的效果為什麼還要用代碼去實現它呢...

高效:
  • 在作者的能力基礎之上,代碼能優化的地方作者都想盡了方法去優化它(包括性能的優化,代碼的簡化)。

  • 比如:this關鍵字的在另一個函數內儲存成變數參數使用,多次使用到的深度屬性或方法儲存成變數使用,既達到壓縮時可減少體積,又達到減少變數查找的耗時。

  • 比如:粒子無序運動的連線功能處理,嵌套for迴圈,O(n²)的問題,作者優化了三次(git commit有記錄咯),最後使用(學習借鑒)了《HTML5+JavaScript動畫基礎》這本書的一個思想和優化方式,達到既不冗餘代碼或占用記憶體,又提升了一倍的執行效率。具體可點擊這裡,源碼第160行哦

輕量級:
  • 由於前面說到的兩點,輕量級自然就孕育而生啦。

  • 另一個就是特效之間都是以獨立的插件形式使用的,不存在相互依賴的問題,只依賴一個公共的功能文件,這樣就可以達到想載入什麼就載入什麼,按需載入的不臃腫體驗啦,也可以偷懶直接使用包含所有特效的壓縮包文件咯。

 

五:最後

  • 一個良好的官網及文檔是一個良好的開始,插件庫官網:particleground.duapp.com, 先用著這個功能變數名稱咯,等時機成熟了,再換回正式的 pjs.barrior.me 功能變數名稱~

  • 貢獻總是受歡迎的,無論它多麼大或小!只要你與作者的觀念,理念,志同道合的話,那就太希望你加入組織的懷抱啦,做一件自己喜歡的事,做一個自己都喜歡自己的人。

  • 如果你喜歡這個插件庫並能幫助到你的實際工作中,希望它能發展的更好,提供更多有趣實用的特效,支持我(們),煩請點個 Star 吧

 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1.什麼是canvas? 可以繪製圖形的標簽。一般用javascript來繪製。 2.創建一個畫布 3.在畫布上繪圖。 4.canvas-路徑 效果: ...
  • javascript<script> window.onload = function(){ var count = 0; document.onmousewheel = function(e){ /*滑鼠滾動的量 下滾是負 上滾是正*/ if(e.wheelDelta < 0){ count ++ ...
  • 開源中國有一篇介紹的很詳細,鏈接:https://my.oschina.net/shunshun/blog/204587 使用這個插件和使用其他Bootstrap內置的插件一樣,需要引入如下文件: 使用實例: jsp代碼 js代碼 $('#data-pagination').bootstrapPag ...
  • JFinal中有個封裝好的事務應用,用起來非常方便簡單。 寫法1: result值為true則操作成功,為false則回滾。 事務DB.tx()本身也返回一個boolean值,表示最終操作結果是否成功,true為成功,false失敗。 寫法2: 在方法前聲明@Before(Tx.class) 今天部 ...
  • 問題描述: ajax往後臺傳json格式數據報415錯誤,如下圖所示 頁面代碼 後臺代碼 錯誤分析:415 (不支持的媒體類型) 請求的格式不受請求頁面的支持 正確的json格式{key:value, key:value}key和value應該都帶雙引號。上面的前臺代碼data中的數據value不帶 ...
  • var assert = require('assert');/*node中,我們可以使用assert模塊來測試代碼。equal()和notEqual()分別作相等性和不等性的判斷,第一個參數是期望值,第二個參數是真實值,第三個參數是異常信息*/// assert.equal(1,2,[consol ...
  • 目錄: 一、前言 二、什麼是React 三、開發環境搭建 四、預備知識 五、最簡單的React小程式 六、基礎語法介紹 七、總結 八、參考資料 目錄: 一、前言 二、什麼是React 三、開發環境搭建 四、預備知識 五、最簡單的React小程式 六、基礎語法介紹 七、總結 八、參考資料 一、前言 近 ...
  • 這是我用原生js寫的放大鏡效果,與各種各樣的框架技術相比,我喜歡使用原生的js,在這裡,想和大家一起談談原生和框架技術的理解與個人喜好。 <!DOCTYPE HTML><html> <head> <title>js放大鏡效果</title> <meta http-equiv="content-typ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...