基于PixiJS實現react圖標旋轉動效

更新時間：2022年05月30日 14:08:43 作者：末世未然

PixiJS是一個開源的基于web的渲染系統，為游戲、數據可視化和其他圖形密集型項目提供了極快的性能，這篇文章主要介紹了用PixiJS實現react圖標旋轉動效,需要的朋友可以參考下

什么是PixiJS

PixiJS是一個開源的基于web的渲染系統，為游戲、數據可視化和其他圖形密集型項目提供了極快的性能。具體細節(jié)可移步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來創(chuàng)建一個app實例：

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

然后把app視圖添加到body上：

document.body.appendChild(app.view);

一片漆黑，沒錯，就是這樣，我們可以在創(chuàng)建app的時候配置更多的屬性，比如顏色（顏色必須是16進制數）：

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

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

PIXI.Sprite

我們可以使用PIXI.Sprite來創(chuàng)建一個精靈圖，并加到場景里：

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圖標旋轉動效內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: