基于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代码模式分为两种类组件和函数组件(生命周期也有所不同),这篇文章主要介绍了react生命周期(类组件/函数组件),需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了如何利用React+hook+antd实现联动模糊搜索功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
这篇文章主要介绍了React中父组件如何获取子组件的值或方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了React hooks useState异步问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
基于React-Dropzone开发上传组件功能(实例演示)
这篇文章主要介绍了基于React-Dropzone开发上传组件,主要讲述的是在React-Flask框架上开发上传组件的技巧，需要的朋友可以参考下2021-08-08
这篇文章主要介绍了React Store及store持久化的使用教程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
mobx是一个轻量级的状态管理器,所以很简单(单一全局数据使用class)类有get 数据方法,本文通过示例代码介绍react mobx 基本用法,感兴趣的朋友有一起看看2023-11-11
React Hooks之使用useCallback和useMemo进行性能优化方式
这篇文章主要介绍了React Hooks之使用useCallback和useMemo进行性能优化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家详细介绍了React实现评论的添加和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
MobX是一个强大而简单的状态管理工具,它可以帮助我们更好地组织和管理React应用程序中的数据流,本文给大家介绍react如何使用mobx6动态加载数据,感兴趣的朋友跟随小编一起看看吧2024-02-02
最新评论