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(
  "https://p7.itc.cn/images01/20210825/6dae02ab52594d13805694ab6c4921cb.jpeg"
)

// 创建精灵
const sprite = new PIXI.Sprite(texture)

// 锚点
sprite.anchor.set(0.5)

sprite.x = app.screen.width / 2
sprite.y = app.screen.height / 2

sprite.scale.set(0.2)

app.stage.addChild(sprite)

// 添加旋转动画
app.ticker.add(detail => {
  // console.log(detail);
  sprite.rotation += 0.01 * detail
})

3. 为精灵添加事件

• 使用on可以添加事件

// 添加事件前设置为 true, 开启交互
sprite.interactive = true
// 精灵添加点击事件
sprite.on("click", e => {
  console.log(e, "sprite click!")
})
// 鼠标进入修改透明度
sprite.on("pointerenter", () => (sprite.alpha = 0.5))
// 鼠标离开修改透明度
sprite.on("pointerleave", () => (sprite.alpha = 1))

4. 为图形添加事件

// 创建矩形
const rect = new PIXI.Graphics()
rect.beginFill(0x1754ff)
rect.drawRect(300, 300, 150, 150)
rect.endFill()

app.stage.addChild(rect)

rect.interactive = true

// 给矩形添加点击事件
rect.on("click", e => {
  console.log(e, "rect click!")
})