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

目录

• 什么是PixiJS
• PixiJS初探
• PIXI.Application
• PIXI.Sprite
• sprite.x | sprite.y | sprite.anchor
• 旋转起来

什么是PixiJS

PixiJS是一个开源的基于web的渲染系统，为游戏、数据可视化和其他图形密集型项目提供了极快的性能。具体细节可移步PixiJS官网

PixiJS初探

首先我们在html中引入pixijs，打印PIXI看看都暴露了哪些API

我这只截了一部分，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略显卡顿，实际上这个动画是非常丝滑的，不信大家复制以下完整代码在本地试试呀：

到此这篇关于基于PixiJS实现react图标旋转动效的文章就介绍到这了,更多相关react图标旋转动效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！