PixiJS 專案例項以及繪製流程的簡單介紹

NingBo發表於2019-03-06
原文網址 : https://juejin.im/post/5c7f8b206fb9a049c96670d5
JS

前言

在過去的一至兩年當中，動畫類的 H5 很受歡迎，其中滑屏視差類的 H5 自己就做了不少，這其中主要歸功於 PixiJS ，自己也藉助 PixiJS 實現了多種類別的 H5。本文將簡單介紹 PixiJS 的基礎知識與實現流程，希望對大家有所幫助。

版本說明

本文使用 PixiJS 的版本為 4.8.5 。

專案例項

以下列舉幾個自己用 PixiJS 實現的專案，可以掃碼預覽。

視差滑屏類 H5

PixiJS 專案例項以及繪製流程的簡單介紹

畫中畫類 H5

PixiJS 專案例項以及繪製流程的簡單介紹

自定義場景類 H5

PixiJS 專案例項以及繪製流程的簡單介紹

動畫類 H5 與小遊戲類 H5

PixiJS 專案例項以及繪製流程的簡單介紹

PixiJS 簡單介紹

在瞭解 PixiJS 之前，我們先來了解一下硬體加速，這也是為什麼使用 PixiJS 製作的動畫很流暢的原因之一。

為什麼要使用 PixiJS

CSS3 中諸如 translate3d 、rotate3d 、scale3d 、skew3d 、matrix3d 、will-change 等一些屬性開啟了硬體加速來提升頁面效能，使動畫更加流暢的展現給使用者，我們也經常藉助 CSS3 的動畫來豐富我們的頁面效果。但是有一些需求，我們可能需要藉助 Canvas 畫布來實現，Canvas 其實也可以開啟硬體加速。

Canvas 開啟硬體加速的方法

var ctx = canvas.getContext(‘webGL’);
複製程式碼

從上面的程式碼可以看出， Canvas 通過使用 webGL 的方式來開啟硬體加速。我們再來看看官網對 PixiJS 是怎麼介紹的。

什麼是 PixiJS

  • 官網是這樣介紹的： PixiJS 是 HTML5 建立引擎，使用最快最靈活的 2D WebGL 渲染。
  • 也就是說： PixiJS 是使用 2D 的 WebGL 來渲染的。
  • 再簡單的來說： PixiJS 是普通 Canvas 的加速版。這也正是 PixiJS 的優勢之一。

PixiJS 有什麼優勢

  • 渲染速度快
  • 靈活
  • API豐富

通過以上分析，如果要製作複雜動畫的頁面，使用 PixiJS 可以幫助我們加速渲染頁面，從而使動畫更加流暢。

PixiJS 怎麼用

瞭解了 PixiJS 的優勢，如果你想使用 PixiJS 做一個自己的專案，可以先來看一下 PixiJS API 中的一些常見名稱。

常見名稱

  1. Application -> 初始化，建立畫布
  2. Sprite -> 精靈，基礎
  3. Texture -> 紋理，精靈的基礎
  4. Container -> 類似 DIV 巢狀/陣列
  5. AnimatedSprite -> 序列幀
  6. Loader -> 預載入函式
  7. Ticker -> 每秒讓畫布重新渲染 60 次
  8. Mask -> 遮罩
  9. Graphics -> 基礎圖形

參考 Canvas 的繪製來理解

我們在使用 Canvas 製作頁面的時候，首先會建立一個 畫布 ，然後把一些基礎圖形或者 圖片元素 繪製到畫布，這個時候就可以看到頁面了。如果需要新增動畫或者互動，只需要通過 setTimeout 或者 requestanimationframe1 重複繪製頁面就可以了。

在使用 PixiJS 製作頁面的時候，與 Canvas 類似，我們用 Application 建立畫布，然後把 精靈 繪製到畫布，如果要新增動畫，通過內建的 Ticker 或者 requestanimationframe 重複繪製頁面就可以了。

PixiJS 專案例項以及繪製流程的簡單介紹

接下來，參考 Canvas 的繪製過程，我們來用 PixiJS 實現：

畫布 -> Application

Application 會自動建立一個Canvas：

let app = new PIXI.Application({ 
	width: 256, // default: 800 
	height: 256, // default: 600
	transparent: false, // default: false
}) ;
document.body.appendChild(app.view); // 把畫布新增到頁面
複製程式碼

drawImage -> 精靈(Sprite)

var sprite = PIXI.Sprite.fromImage(imageUrl) // 建立一個精靈
app.stage.addChild(sprite); // 把精靈新增到畫布
// app.stage 為畫布的根容器 
複製程式碼

requestanimationframe -> Ticker

使用 Ticker 可以在 1 秒鐘繪製 60 次畫布。

let ticker = new PIXI.ticker.Ticker();
ticker.add(()=>{
	sprite.rotation += Math.PI/180; // 給精靈新增旋轉的動畫
});
ticker.start();
複製程式碼

總結

以上，就可以簡單的理解 PixiJS 的繪製過程了，理解了實現過程，可以學習一下 官方的示例 與 API，再結合專案的實際需求，就可以製作出流暢的動畫了。

常見問題與開發技巧

  1. <Canvas> 旋轉後，點選位置會發生偏移，建議通過 旋轉畫布內的元素 來實現效果；
  2. 紋理（Texture）只有在 loader 之後才可以讀取寬高等資訊；
  3. 使用 webGL 渲染時，如果想要使用 toDataURL 匯出圖片,需新增如下程式碼：gl = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});)
  4. 使用圖片蒙版時，黑色和透明均視為透明；
  5. anchor 與 pivot 屬性使改變圓心的位置，position 加上相同的值既可以恢復到原來的位置。

相關文章