基于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 useState更新异步问题，具有很好的参考价值，希望对大家有所帮助。以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。2022-08-08
浅谈react-native热更新react-native-pushy集成遇到的问题
下面小编就为大家带来一篇浅谈react-native热更新react-native-pushy集成遇到的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
React中memo useCallback useMemo方法作用及使用场景
这篇文章主要为大家介绍了React中三个hooks方法memo useCallback useMemo的作用及使用场景示例，有需要的朋友可以借鉴参考下，希望能够有所帮助2023-03-03
这篇文章主要介绍了React项目动态设置title标题的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Javascript React基础，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的同学可以参考一下2019-06-06
这篇文章主要为大家详细介绍了React日期时间显示组件的封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了react批量引入svg图标的方法,在批量引入之前,我们需要安装一个包并配置到typescript.json文件中,需要的朋友可以参考下2024-03-03
这篇文章主要为大家介绍了React18之update流程从零实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了React项目配置prettier和eslint的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-06-06
懒加载意思是不会预加载，而是需要使用某段代码，某个组件或者某张图片时，才加载他们（延迟加载），这篇文章主要介绍了React懒加载实现原理2022-11-11
最新评论