Pixi.js 图像运动

1. 创建应用

import * as PIXI from "pixi.js"
import pic from "./img/a.png"
// 创建应用
const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0x1099bb,
  resolution: window.devicePixelRatio || 1, // 像素比
  antialias: true, // 抗锯齿
})

document.documentElement.appendChild(app.view as any)

2. 创建纹理

// 创建一个纹理，可以是相对路径，也可以是地址或 import 导入的图片
const texture = PIXI.Texture.from(pic)

3. 创建精灵加载纹理

// 创建一个精灵
const sprite = new PIXI.Sprite(texture)
// 锚点
sprite.anchor.set(0.5)

// 设置精灵位置
sprite.x = app.screen.width / 2
sprite.y = app.screen.height / 2

// 旋转 45°
sprite.rotation = Math.PI / 4

// 设置精灵缩放
sprite.scale.set(2)

// 设置精灵透明度
sprite.alpha = 0.5

// 将精灵添加到舞台
app.stage.addChild(sprite)

4. 实现动画

// ticker 实现动画
app.ticker.add(delta => {
  console.log(delta, sprite.rotation) // 每一帧之间的时间
  // += 增量
  sprite.rotation += 0.01 * delta
})