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

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

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

赞 (0)

相关推荐

  • React实现二级联动效果（楼梯效果）

    React实现二级联动效果（楼梯效果）

    本文实例为大家分享了React实现二级联动效果的具体代码,供大家参考,具体内容如下 模仿饿了么实现一个二级联动的效果: import "../css/Leftrightlinkage.less"; import React, { Component } from "react"; export default class Leftrightlinkage extends Component { constructor(...args) { super(...args

  • react native实现监控手势上下拉动效果

    react native实现监控手势上下拉动效果

    react native实现监控手势进行上下拉动效果,详细核心代码如下: 代码: import {PanResponder} from 'react-native'; var Dimensions = require('Dimensions'); const deviceHeight = Dimensions.get("window").height; const deviceWidth = Dimensions.get("window").width; class

  • React实现动效弹窗组件

    React实现动效弹窗组件

    我们在写一些 UI 组件时,若不考虑动效,就很容易实现,主要就是有无的切换(类似于 Vue 中的 v-if 属性)或者可见性的切换(类似于 Vue 中的 v-show 属性). 1. 没有动效的弹窗 在 React 中,可以这样来实现: interface ModalProps { open: boolean; onClose?: () => void; children?: any; } const Modal = ({open. onClose, children}: ModalProps)

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

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

    目录 什么是PixiJS PixiJS初探 PIXI.Application PIXI.Sprite sprite.x | sprite.y | sprite.anchor 旋转起来 什么是PixiJS PixiJS是一个开源的基于web的渲染系统,为游戏.数据可视化和其他图形密集型项目提供了极快的性能.具体细节可移步PixiJS官网 PixiJS初探 首先我们在html中引入pixijs,打印PIXI看看都暴露了哪些API <!doctype html> <html> <h

  • 基于vue、react实现倒计时效果

    本文实例为大家分享了基于vue.react实现倒计时效果的具体代码,供大家参考,具体内容如下 Vue 方案一:俩个元素 HTML: <div id="example"> <button @click="send"> <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span> <span v-if="!sendMsgDisabled"

  • 基于vue和react的spa进行按需加载的实现方法

    基于vue和react的spa进行按需加载 由于最近打算将所有的管理系统采用同一套登陆方法,然后在登陆后进行系统的切换选择,不需要每个系统都去重新登陆一次,所以前端这边思考将所有的系统用一套spa的应用进行构建,但是各个系统的合并之后,打包后的代码应该是相当大的,单页需要一次性加载所有系统的资源,显得不合实际,所以打算将不同系统的资源进行分离,再选择后在加载该系统的相应资源.自己发现这个业务和每个系统的路由比较类似,因此将系统的配置基于vue-router或者react-router的基础进行按

  • 基于Eclipse中SVN图标不显示的解决方法

    在用Eclipse做开发的时候,用到了svn版本控制器,这天当我打开Eclipse的时候,发现项目里面的所有文件前的版本号以及状态图标都不显示了,即所有的svn图标不显示了,这是怎么回事,关掉Eclipse重新启动了一遍,还是不凑效.可以确认的是当进行文件的更新提交的时候都可以正常进行,但就是不显示文件svn的版本号及状态图标,经过摸索 ,解决方法如下:如果没有汉化是英文版的话,在菜单栏中:windows ->preferences->General->Appearance->La

  • 基于Webpack4和React hooks搭建项目的方法

    面对日新月异的前端,我表示快学不动了:joy:. Webpack 老早就已经更新到了 V4.x,前段时间 React 又推出了 hooks API.刚好春节在家里休假,时间比较空闲,还是赶紧把 React 技术栈这块补上. 网上有很多介绍 hooks 知识点的文章,但都比较零碎,基本只能写一些小 Demo .还没有比较系统的,全新的基于 hooks 进行搭建实际项目的讲解.所以这里就从开发实际项目的角度,搭建起单页面 Web App 项目的基本脚手架,并基于 hooks API 实现一个 rea

  • 详解基于webpack搭建react运行环境

    详解基于webpack搭建react运行环境

    最近由于项目需要,所以尝试使用webpack搭建react运行环境,在克服了一系列困难后,终于能在页面输出"Hello World",特地把整个过程记录下来,利人利己. 首先我创建了一个文件夹webpack-helloworld-demo,之后的大部分操作都会在这个文件夹下进行. 1.初始化文件夹 npm init //初始化一个package.json文件 git init //产生.git文件,便于之后版本提交回退 2.搭建webpack环境 npm install webpack

  • 基于Node的React图片上传组件实现实例代码

    基于Node的React图片上传组件实现实例代码

    写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循React 组件化的思想,我把图片上传做成了一个独立的组件(没有其他依赖),直接import即可. import React, { Component } from 'react' import Upload from '../../components/FormControls/Upload/' /

  • 基于jQuery制作小图标上下滑动特效

    基于jQuery制作小图标上下滑动特效

    一个小图标特效,挺有趣的,代码也很容易懂. jQ小图标上下滑动特效: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <link rel="stylesheet" href="css/normalize.css"> <style&

  • 一个基于react的图片裁剪组件示例

    开始 写了一年多vue,感觉碰到了点瓶颈,学习下react找找感觉.刚好最近使用vue写了个基于cropperJS的图片裁剪的组件,便花费了几个晚上的功夫用react再写一遍.代码地址 项目是使用create-react-app来开发的,省去了很多webpack配置的功夫,支持eslint,自动刷新等功能,使用前npm install并npm start即可.推荐同样是新学习react的人也用用看. 项目写的比较简陋,自定义配置比较差,不过也是完成了裁剪图片的基本功能,希望可以帮助到初学reac

  • React Native实现简单的登录功能(推荐)

    React Native实现简单的登录功能(推荐)

    React Native 简介: React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等. React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验.React Native 把重点放在所有开发人员关心的平台的开发效率上

随机推荐