企业官网建设流程全解析

PixiJS快速上手教程：5分钟用PixiJS v8跑通你的第一个旋转小兔子

【免费下载链接】pixijsThe HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.项目地址: https://gitcode.com/gh_mirrors/pi/pixijs

PixiJS v8 是当前最快、最灵活的 HTML5 2D WebGL 渲染引擎，帮你用几行代码就能在浏览器里跑起动画。本 PixiJS 入门教程带你用 5 分钟搭建项目，加载官方经典的"旋转小兔子"素材，完成你的第一个 PixiJS 动画场景，零图形基础也能轻松上手。

为什么选择 PixiJS 作为你的第一个 2D 引擎

如果你想在网页里做游戏、做交互视觉、做数据可视化，PixiJS 几乎是最省心的选择。相比自己写 Canvas，它帮你处理好了最复杂的部分：

• 🚀双渲染后端：自动使用 WebGL，同时已支持下一代 WebGPU，追求极致性能
• 🎨场景图模型：用"容器 + 精灵"的层级结构组织画面，像搭积木一样直观
• 📦内置资源加载器：一行Assets.load()就能加载图片、音频、精灵表
• ✋完整的事件系统：鼠标、触摸、滚轮开箱即用
• 🖼️动态纹理与滤镜：模糊、位移、混合模式等特效内置齐全

上图中这种"一张大图切出多帧做动画"的精灵表（Sprite Sheet），正是 PixiJS 的核心能力之一，后面你会用到它的简化版——单张图片做旋转动画。

安装 PixiJS：最快配置方法

准备工作只需 30 秒。确保已安装 Node.js，然后在你的项目目录中执行：

npm install pixi.js

如果你打算从零搭建一个完整项目，官方提供了脚手架命令：

npm create pixi.js@latest

💡 如果网络较慢，可以直接克隆本仓库阅读全部源码与官方示例：git clone https://gitcode.com/gh_mirrors/pi/pixijs，所有示例都集中在 examples/ 目录，边读边改是最快的学习方式。

安装完成后，你可以在浏览器控制台确认版本：

import { VERSION } from 'pixi.js'; console.log(VERSION); // "8.x.x"

5分钟跑通：PixiJS v8 第一个旋转小兔子

下面这段代码是整个教程的核心，它和仓库中 sprite_transform_rotation.ts 官方示例完全一致。虽然代码不长，但覆盖了 PixiJS 的四大核心概念：Application、纹理、精灵、Ticker 动画。

import { Application, Assets, Sprite } from 'pixi.js'; (async () => { // 1️⃣ 创建应用并初始化 const app = new Application(); await app.init({ background: '#1099bb', resizeTo: window }); document.body.appendChild(app.canvas); // 2️⃣ 加载小兔子纹理 const texture = await Assets.load('bunny.png'); // 3️⃣ 创建精灵并摆到画面中心 const bunny = new Sprite(texture); bunny.anchor.set(0.5); // 锚点设为中心，绕自身旋转 bunny.x = app.screen.width / 2; bunny.y = app.screen.height / 2; app.stage.addChild(bunny); // 加入舞台 // 4️⃣ 注册每帧回调，让兔子旋转 app.ticker.add((time) => { bunny.rotation += 0.1 * time.deltaTime; }); })();

用 Vite 或任意本地服务器打开页面，一只小兔子就会在屏幕中央平稳地转圈圈 🐰

逐行拆解：四大核心概念

这里有两个 v8 的贴心设计值得注意：

• app.stage自动创建：Application初始化时已自带一个根容器stage，源码见 Application.ts，无需手动 new Container
• await app.init()是异步的：v8 把初始化拆成了"构造 + init"两步，方便按需配置，这是和 v7 最大的用法差异之一

理解 Ticker：让动画平滑的关键

代码里的time.deltaTime容易被新手忽略，但它决定了动画的质量。

deltaTime表示距上一帧的"时间倍数"：60 帧时它约为 1，如果某帧卡顿掉到 30 帧，它就变成 2。把旋转量乘以它，就等于告诉浏览器"这一帧欠的进度补上"，从而得到帧率无关的平滑动画——不同设备上看这只兔子，转起来的体感速度是一致的。

Ticker 的完整实现可以看 Ticker.ts，它还能按优先级注册多个回调，后面做复杂游戏循环时会经常用到。

把兔子放大：调整锚点、缩放与容器

小兔子默认只有 26×37 像素，转起来有点小气？改两行代码就行：

bunny.scale.set(8); // 放大 8 倍 bunny.anchor.set(0.5); // 必须！否则围绕左上角转，飞出去了

📌新手高频坑：anchor不设为0.5就做旋转，对象会绕着自己的左上角公转，而不是自转。

当你需要"背景 + 前景"这样的分层画面时，就引入Container（容器）：把背景图和兔子分别放进同一个容器，再对容器整体做变换，子对象会跟随运动。上图这类横版素材（1024×680）就很适合作为场景背景，仓库中 bg_plane.jpg 可直接参考使用。容器用法完整示例见 container_transform_pivot_basic.ts——那里面用 25 只小兔子排成方阵，整个方阵一起旋转，效果非常酷。

跑起来之后：常见问题排查

Q1：页面空白，控制台报 CORS 错误？本地直接双击 HTML 打开（file://协议）会导致纹理加载失败。请起一个本地服务器，例如：

npx vite

Q2：兔子不转，或转速忽快忽慢？检查是否用了time.deltaTime参与运算；直接写bunny.rotation += 0.1在不同刷新率的屏幕上速度会不一致。

Q3：想换背景色？初始化时改background参数即可，支持'#1099bb'、[r, g, b]数组等形式，颜色值的更多写法见 color/ 模块。

下一步：沿着 PixiJS 示例路线图继续

旋转兔子只是起点。本仓库的 examples/ 目录就是最棒的自学路线图，推荐按这个顺序进阶：

1. 🖼️加载与精灵：assets_async.ts 学会并发加载多种资源
2. 🎮交互事件：events_click.ts、events_dragging.ts 让兔子可点击、可拖拽
3. 🎞️动画序列：animated-sprite_animation.ts 用精灵表播放逐帧动画（就是开头那张战斗机图的玩法）
4. ✍️矢量绘制：graphics_basic_shapes.ts 用代码画图形，不需要任何图片素材
5. 🪄滤镜特效：filters_blur.ts 给兔子加上模糊、发光等效果

更深层的原理，例如渲染循环与场景图架构，仓库的 render-loop.md 和 scene-graph.mdx 两篇概念文档值得通读。

从npm install pixi.js到兔子旋转起来，你只用了 5 分钟——而这 5 分钟里学到的 Application、Texture、Sprite、Ticker 四个概念，正是 PixiJS v8 全部能力的地基。现在，换一张你自己的图片，开始你的第一个 PixiJS 项目吧 🚀

【免费下载链接】pixijsThe HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.项目地址: https://gitcode.com/gh_mirrors/pi/pixijs