基于PixiJS實(shí)現(xiàn)react圖標(biāo)旋轉(zhuǎn)動(dòng)效
什么是PixiJS
PixiJS是一個(gè)開源的基于web的渲染系統(tǒng)，為游戲、數(shù)據(jù)可視化和其他圖形密集型項(xiàng)目提供了極快的性能。具體細(xì)節(jié)可移步PixiJS官網(wǎng)
PixiJS初探
首先我們?cè)?code>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這個(gè)全局變量暴露了大量的屬性和方法，我們今天只拋磚引玉學(xué)習(xí)其中最最簡(jiǎn)單的部分
PIXI.Application
我們可以使用PIXI.Application來創(chuàng)建一個(gè)app實(shí)例：
let app = new PIXI.Application({ width: 640, height: 360 });然后把app視圖添加到body上：
document.body.appendChild(app.view);
一片漆黑，沒錯(cuò)，就是這樣，我們可以在創(chuàng)建app的時(shí)候配置更多的屬性，比如顏色（顏色必須是16進(jìn)制數(shù)）：
let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0xf8b62a });
ok，我們初步掌控了頁面，下面我們繼續(xù)深入探討其他功能。
PIXI.Sprite
我們可以使用PIXI.Sprite來創(chuàng)建一個(gè)精靈圖，并加到場(chǎng)景里：
let sprite = PIXI.Sprite.from('images/react.svg');
app.stage.addChild(sprite);
為了看著順眼，我們還是用默認(rèn)黑色底圖。是的，我們把react的圖標(biāo)加到我們的場(chǎng)景里了。一切進(jìn)展順利，是否能讓它居中顯示？搞起來！
sprite.x | sprite.y | sprite.anchor
sprite.x = app.screen.width / 2; sprite.y = app.screen.height / 2; sprite.anchor.set(0.5);
這3行代碼的意思就是將精靈圖置于屏幕中間，精靈圖以自生中心點(diǎn)為參照點(diǎn)（默認(rèn)是左上角）。
旋轉(zhuǎn)起來
app.ticker.add((delta) => {
sprite.rotation -= 0.01 * delta;
});
截圖的gif略顯卡頓，實(shí)際上這個(gè)動(dòng)畫是非常絲滑的，不信大家復(fù)制以下完整代碼在本地試試呀：
<!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>到此這篇關(guān)于基于PixiJS實(shí)現(xiàn)react圖標(biāo)旋轉(zhuǎn)動(dòng)效的文章就介紹到這了,更多相關(guān)react圖標(biāo)旋轉(zhuǎn)動(dòng)效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了關(guān)于react useState更新異步問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。2022-08-08
淺談react-native熱更新react-native-pushy集成遇到的問題
下面小編就為大家?guī)硪黄獪\談react-native熱更新react-native-pushy集成遇到的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
React中memo useCallback useMemo方法作用及使用場(chǎng)景
這篇文章主要為大家介紹了React中三個(gè)hooks方法memo useCallback useMemo的作用及使用場(chǎng)景示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助2023-03-03
React項(xiàng)目動(dòng)態(tài)設(shè)置title標(biāo)題的方法示例
這篇文章主要介紹了React項(xiàng)目動(dòng)態(tài)設(shè)置title標(biāo)題的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Javascript React基礎(chǔ)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的同學(xué)可以參考一下2019-06-06
這篇文章主要為大家詳細(xì)介紹了React日期時(shí)間顯示組件的封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了react批量引入svg圖標(biāo)的方法,在批量引入之前,我們需要安裝一個(gè)包并配置到typescript.json文件中,需要的朋友可以參考下2024-03-03
React18之update流程從零實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了React18之update流程從零實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
React項(xiàng)目配置prettier和eslint的方法
這篇文章主要介紹了React項(xiàng)目配置prettier和eslint的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06
懶加載意思是不會(huì)預(yù)加載，而是需要使用某段代碼，某個(gè)組件或者某張圖片時(shí)，才加載他們（延遲加載），這篇文章主要介紹了React懶加載實(shí)現(xiàn)原理2022-11-11