PixiJS如何通过容器包装Sprite实现两个互不冲突的旋转动画

PixiJS 中 PIXI.Container 就是和 HTML div 功能一致的容器元素，你可以通过嵌套容器+Sprite的方式实现两个独立旋转动画，和HTML的父子元素嵌套逻辑完全一致。

关键修改步骤 #

• 新建PIXI.Container实例作为wrapper父容器
• 把Sprite原本的定位参数转移给wrapper，Sprite自身在容器内居中
• 将Sprite添加到wrapper中，再把wrapper添加到舞台
• 两个旋转动画分别绑定给wrapper和Sprite，两者的旋转属性独立不会互相覆盖

完整可运行代码 #

JavaScript #

console.clear()
let app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundAlpha: 0,
  view: document.querySelector("#app"),
  antialias: true,
  autoDensity: true
});

let texture = PIXI.Texture.from("https://picsum.photos/200/100")
// 创建wrapper容器
const wrapper = new PIXI.Container()
// 把原本给sprite的定位挪给wrapper
wrapper.x = 200
wrapper.y = 100

let element = new PIXI.Sprite(texture);
element.anchor.set(0.5);
// sprite在容器内居中
element.x = 0
element.y = 0

// 嵌套结构：wrapper -> sprite，再把wrapper加到舞台
wrapper.addChild(element)
app.stage.addChild(wrapper)

// 两个动画分别绑定不同对象，不会冲突
// 无限360度旋转加给父容器
const tl = gsap.timeline({repeat: -1})
tl.to(wrapper, {angle: 360, duration: 2, ease: "none"})

// 小幅度来回摆动加给子Sprite
const tl2 = gsap.timeline({repeat: -1, yoyo: true})
tl2.fromTo(element, {angle: -10}, {angle: 10, duration: 0.5, ease: "sine.inOut"})

CSS #

* {
  padding: 0;
  margin: 0;
}

#app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

HTML #

<script src="https://pixijs.download/release/pixi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<canvas id="app"></canvas>

你也可以根据需求调整两个动画的绑定对象，把360度旋转加给Sprite、摆动加给wrapper也可以，两者的旋转效果是叠加的，最终表现一致。

内容的提问来源于stack exchange，提问作者Greg--