PIXI.js

pixi.js 加载单张图片

let texture = PIXI.utils.TextureCache["https://img.alicdn.com/imgextra/i1/O1CN012S2Jmi1Xm10GaViLr_!!6000000002965-2-tps-250-250.png"]
let sprite = new PIXI.Sprite(texture)

PIXI.js 加载精灵图

PIXI.loader.add("https://img.alicdn.com/imgextra/i1/39767794/O1CN01MaR2Eq27RhbWWaDbj_!!39767794.png").load(
      ()=>{
        let texture = PIXI.utils.TextureCache["https://img.alicdn.com/imgextra/i1/39767794/O1CN01MaR2Eq27RhbWWaDbj_!!39767794.png"]
        let rectangle = new PIXI.Rectangle(96,32,64,64)
        texture.frame = rectangle
        let rocket = new PIXI.Sprite(texture)
        rocket.x=50
        rocket.y=50
        stage.addChild(rocket)

        let cat = new PIXI.Rectangle(0,0,32,32)
        texture.frame = cat
        let cat1 = new PIXI.Sprite(texture)
        cat1.x = 20
        cat.y = 20
        stage.addChild(cat1)
      }
    )

// Note: In this example we have two "requestAnimationFrame", PIXI + gsap.
// gsap coordinate his animations (bunnies).

const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb,
});

document.body.appendChild(app.view);

// Create a new texture
const texture = PIXI.Texture.from('examples/assets/bunny.png');

// time animation in seconds
const time = 3;

const bunny1 = new PIXI.Sprite(texture);
app.stage.addChild(bunny1);

gsap.to(bunny1, {
    x: 363, duration: time, repeat: -1, yoyo: true,
});