基于PixiJS实现react图标旋转动效

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

PixiJS是一个开源的基于web的渲染系统，为游戏、数据可视化和其他图形密集型项目提供了极快的性能，这篇文章主要介绍了用PixiJS实现react图标旋转动效,需要的朋友可以参考下

什么是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图标旋转动效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

react学习每天一个hooks useWhyDidYouUpdate
这篇文章主要为大家介绍了react学习每天一个hooks useWhyDidYouUpdate使用示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
react.js使用webpack搭配环境的入门教程
本文主要介绍了react 使用webpack搭配环境的入门教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-08-08
React Suspense解决竞态条件详解
这篇文章主要为大家介绍了React Suspense解决竞态条件详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
React中井字棋游戏的实现示例
本文主要介绍了React中井字棋游戏的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
React网络请求发起方法详细介绍
在编程开发中，网络数据请求是必不可少的，这篇文章主要介绍了React网络请求发起方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-09-09
Redux使用方法和基本原理解读
这篇文章主要介绍了Redux使用方法和基本原理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
浅谈webpack+react多页面开发终极架构
这篇文章主要介绍了浅谈webpack+react多页面开发终极架构，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
从头写React-like框架的工程搭建实现
这篇文章主要介绍了从头写React-like框架的工程搭建实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
React和Vue中实现锚点定位功能
在React中,可以使用useState和useEffect钩子来实现锚点定位功能,在Vue中,可以使用指令来实现锚点定位功能,在React和Vue中实现锚点定位功能的方法略有不同,下面我将分别介绍,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
2024-01-01
React获取组件对应的DOM元素多种实现方法
本文主要介绍了React中获取组件对应DOM元素的多种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-02-02