基於PixiJS實現react圖示旋轉動效

2022-05-30 18:01:44

什麼是PixiJS

PixiJS是一個開源的基於web的渲染系統，為遊戲、資料視覺化和其他圖形密集型專案提供了極快的效能。具體細節可移步PixiJS官網

PixiJS初探

首先我們在html中引入pixijs，列印PIXI看看都暴露了哪些API

<!doctype html>
<html>
<head>
  <script src="https://pixijs.download/release/pixi.min.js"></script>
</head>
<body>
  <script>
    console.log(PIXI)
  </script>
</body>
</html>

我這隻截了一部分，PIXI這個全域性變數暴露了大量的屬性和方法，我們今天只拋磚引玉學習其中最最簡單的部分

PIXI.Application

我們可以使用PIXI.Application來建立一個app範例：

let app = new PIXI.Application({ width: 640, height: 360 });

然後把app檢視新增到body上：

document.body.appendChild(app.view);

一片漆黑，沒錯，就是這樣，我們可以在建立app的時候設定更多的屬性，比如顏色（顏色必須是16進位制數）：

let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0xf8b62a });

ok，我們初步掌控了頁面，下面我們繼續深入探討其他功能。

PIXI.Sprite

我們可以使用PIXI.Sprite來建立一個精靈圖，並加到場景裡：

let sprite = PIXI.Sprite.from('images/react.svg');
app.stage.addChild(sprite);

為了看著順眼，我們還是用預設黑色底圖。是的，我們把react的圖示加到我們的場景裡了。一切進展順利，是否能讓它居中顯示？搞起來！

sprite.x | sprite.y | sprite.anchor

sprite.x = app.screen.width / 2; 
sprite.y = app.screen.height / 2;
sprite.anchor.set(0.5);

這3行程式碼的意思就是將精靈圖置於螢幕中間，精靈圖以自生中心點為參照點（預設是左上角）。

旋轉起來

app.ticker.add((delta) => {
  sprite.rotation -= 0.01 * delta;
});

截圖的gif略顯示卡頓，實際上這個動畫是非常絲滑的，不信大家複製以下完整程式碼在本地試試呀：

<!doctype html>
<html>
<head>
  <script src="https://pixijs.download/release/pixi.min.js"></script>
</head>
<body>
  <script>
    console.log(PIXI)
    // Create the application helper and add its render target to the page
    let app = new PIXI.Application({ width: 640, height: 360 });
    document.body.appendChild(app.view);
    // Create the sprite and add it to the stage
    let sprite = PIXI.Sprite.from('images/react.svg');
    app.stage.addChild(sprite);
    sprite.x = app.screen.width / 2;
    sprite.y = app.screen.height / 2;
    sprite.anchor.set(0.5);
    // // Add a ticker callback to move the sprite back and forth
    app.ticker.add((delta) => {
      sprite.rotation -= 0.01 * delta;
    });
  </script>
</body>
</html>

到此這篇關於基於PixiJS實現react圖示旋轉動效的文章就介紹到這了,更多相關react圖示旋轉動效內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！