iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 1
3

在寫這個主題前,我先問了自己

讓網頁上能看到畫面、動態的方式很多,為什麼會特別選擇PixiJS?

各種表現視覺與動態的做法各有其特性:

靜態圖:
沒有瀏覽器限制,但就是不會動。
可以隨螢幕放大,但是無法調整位置。

Gif:
特性與靜態圖類似,但有檔案較大的問題。

影片:
會動,但手機版瀏覽器預設不會播放,
在不同系統裡,影片播放的行為也不相同。

SVG:
效能與瀏覽器支援性與WebGL為底的 PixiJS 不同,
適合的用途也不同。
如果需求是作表格,我還是會建議 D3.js,
(除了D3.js 擅長分析資料外,D3.js 的 DOM 結構也方便處錯)

three.js:
特性與 PixiJS 類似,由於是3維空間、也另有光源與材質可控制。
學習與使用上會比 PixiJS 複雜,視使用需求而定。

HTML 與 CSS:
實際上並不會直接拿來比較,
PixiJS 運用的是 canvas,上頭可以再加上不同的 DOM 元件,
視不同的使用情境,也不一定整個頁面都使用1組 PixiJS 來完成。

PixiJS
使用 WebGL 在 canvas 上繪製內容與製作動態,
支援多點觸控、遮罩與混合模式、可外加 WebGL 濾等。
但缺點同時也是不支援太過老舊的瀏覽器。

因此,使用 PixiJS 也是一種選擇,有其方便與不便的情形。


alt
這是一個我用 PixiJS 做的動態轉錄成的gif,
這個動態用到了遮罩、父元件與子元件動態
(後續會有這個動態的說明文章)

若覺得這樣的前言還不錯,
那就繼續閱讀後續的文章吧!

系列文章分作三個部分:
第一部分:介紹 PixiJS
由於 PixiJS 也許對不少人來說有點陌生
會花一些篇幅在講 PixiJS 是什麼、特色、使用 PixiJS 的專案與官方相關資源等
以及會有一篇提到我做過的例子,用來銜接第二部分的 PixiJS 功能介紹

第二部分:PixiJS 功能與方法說明
介紹 PixiJS 套件的各種方法、實作與注意事項
如何應用在專案上、專案如何向下相容等

第三部分:PixiJS 實作
從我自身做過的例子來說明 PixiJS 一些效果的實作方式


下一篇
[PixiJS - Day-02] 關於 PixiJS
系列文
PixiJS,方便好用的 WebGL 內容產生工具31

1 則留言

0
King Tzeng
iT邦新手 4 級 ‧ 2017-12-04 11:32:53

一定把前輩的技術偷學起來!!(亂入/images/emoticon/emoticon07.gif

看更多先前的回應...收起先前的回應...

歡迎歡迎,多多交流!

LeoYeh iT邦新手 5 級‧ 2017-12-13 14:55:02 檢舉

好詳細的介紹! 推

感謝 Leo, 只是這是別人家的樓 XD

/images/emoticon/emoticon01.gif

我要留言

立即登入留言