酷炫的基于HTML5的2D和3D粒子引擎-Proton

紹

Proton是一個靈活的html5粒子引擎。他默認支持canvas,dom,webgl,easeljs,pixel五種渲染方式，當然你還可以輕易的自定義自己的渲染器。只需10幾行代碼就可以打造你想要的粒子效果。同時具有2D版本和3D版本，適合不同的使用場景！

Github

2D版本:

https://github.com/a-jie/Proton

3D版本:

https://github.com/a-jie/three.proton

快速開始

安裝

npm install proton-js --save
... 
import Proton from 'proton-js';

示例代碼

var proton = new Proton();
var emitter = new Proton.Emitter();
//設置速率
emitter.rate = new Proton.Rate(Proton.getSpan(10, 20), 0.1);
//初始化
emitter.addInitialize(new Proton.Radius(1, 12));
emitter.addInitialize(new Proton.Life(2, 4));
emitter.addInitialize(new Proton.Velocity(3, Proton.getSpan(0, 360), 'polar'));
//增加行為
emitter.addBehaviour(new Proton.Color('ff0000', 'random'));
emitter.addBehaviour(new Proton.Alpha(1, 0));
//設置發(fā)射器位置
emitter.p.x = canvas.width / 2;
emitter.p.y = canvas.height / 2;
emitter.emit(5);
//向proton添加發(fā)射器
proton.addEmitter(emitter);
// 新增canvas渲染器
var renderer = new Proton.CanvasRenderer(canvas);
proton.addRenderer(renderer);
//使用Euler積分計算更準確（默認為false）
Proton.USE_CLOCK = false or true;

PS：3D版本的使用方法類似

DEMO演示

下面通過錄制的Gif來演示一部分效果，上面已經(jīng)有一些了，下面再展示一些：

總結

Proton是一個實現(xiàn)例子效果非常合適的2D和3D例子效果庫，非常簡單實用，從上面的動圖效果也能看出來實現(xiàn)的效果非常的炫酷，而且代碼非常簡單，文檔又非常詳細！

瓜視頻播放器(HTML5)。

最近發(fā)現(xiàn)一個非常強大的播放器，它不僅支持視頻播放，還支持音頻播放。接下來，我們將詳細介紹它的功能和使用方法。

XGPlayer是字節(jié)跳動團隊推出的免費開源HTML5視頻播放組件。我們可以通過npm或cdn的方式導入到項目中使用。作為字節(jié)跳動的產(chǎn)品，XGPlayer的功能非常強大。在這里，我們可以實現(xiàn)西瓜視頻上使用的所有功能，所有功能模塊都設計成了插件。如果你想自定義效果，可以關閉內(nèi)置插件，自己開發(fā)。

個人認為，XGPlayer播放器最大的優(yōu)勢在于支持多種主流的視頻格式，如hls、flv等視頻，以及自適應碼率，為用戶提供更優(yōu)秀的播放體驗。對于一些開發(fā)直播應用的朋友來說，這簡直是福音。

除了這些優(yōu)點，它還擁有完整的產(chǎn)品機制、錯誤監(jiān)控上報和自動的降級處理、強大的mp三音頻、mp四視頻播放控制、點播無縫切換、帶寬節(jié)省顯著等優(yōu)點。

來看一下官方的示例代碼："//sf1-cd我們來看下官方的fe/xgplayer_doc_video/mp4/x。在創(chuàng)建播放器實例之前需要定義一個DOM來占位。

在播放器實例中必須先進行配置參數(shù)，如通過volume定義初始音量，poster設置封面。thumbnail進行進度條預覽圖配置，該配置會用于pc端或者是移動端的拖動預覽。這就是目前的播放效果。

當你設置screenShote的相關參數(shù)后，就會多了一個截圖的功能。關于彈幕功能，comments里面是彈幕的內(nèi)容，支持自定義樣式和彈幕顯示區(qū)域等。

最后是添加倍速的選項，"everybody Rate TIME TIME TIME TIME for back the source。最后是清晰度切換列表的配置，新增清晰度時把視頻路徑加上即可。

當然，以上功能只是它的冰山一角。想要擁有更完整的體驗，可以移步到西瓜視頻或官網(wǎng)。

還有一個fluid屬性值得一看，作用是是否啟用流式布局。開啟之后控制器就跑到了底部，而視頻區(qū)域則在屏幕中間。

onic是開源的移動應用開發(fā)框架，便于構建高質量的本地和網(wǎng)絡技術先進的web應用程序。Ionic是基于Angular，有許多顯著的性能提升，可用性和功能都在不斷的進行改進。只需要會一點前端知識就能玩轉Ionic。

Ionic的應用程序創(chuàng)建開發(fā)主要通過Ionic命令行實用工具(“CLI—命令行界面”)，并使用cordova構建和部署本地應用。建立Ionic項目，您需要安裝最新版本的CLI和cordova。在你這樣做之前，你需要一個node.js的最新版本。這些在我之前的文章有安裝教程。

官網(wǎng)地址：
http://ionicframework.com/
版本更新說明：
https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md

學習ionic需要了解的知識：

HTML5
CSS3
TypeScript（JavaScript）
Angular2+

下面是一些組件的示例，不同系統(tǒng)有不同的樣式，下面展示iOS上的。

動作表單-Action Sheets

時間選擇器-DateTime

浮動的按鈕-Floating Action Buttons

分割按鈕-Segment

Inputs-輸入框

表格布局-Grid

小芯片-Chip

彈窗對話框1-Alert

彈窗對話框2-Popover

想要查看更多的ionic組件示例，可以在App Store和Google Play下載Ionic2Components應用，該APP即為官方所有組件的展示。

組件在線演示地址：
http://ionicframework.com/docs/api/

組件只能作用在用戶與界面交互上，想要調(diào)用原生設備功能就需要cordova，他提供了一組設備相關的API，通過這組API，移動應用能夠以JavaScript訪問原生的設備功能，如攝像頭、麥克風、GPS等。在應用商店下載Ionic Native即可體驗部分插件。

離子原生包裝插件：
http://ionicframework.com/docs/native/

通過以上組件配合使用，即使只懂css3一點皮毛也能做出一個漂亮簡單的HTML5 APP，想要了解更多ionic，可以關注我或者在官網(wǎng)查看最新消息。

在線咨詢

上一篇：常用MAVEN打包方式總結
下一篇：實用Javascript調(diào)試技巧分享

您的項目需求

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

整合營銷服務商

酷炫的基于HTML5的2D和3D粒子引擎-Proton

紹

Github

相關特性

快速開始

DEMO演示

總結

您的項目需求