Pixi js 对一个元素进行两次旋转（如何添加包装器之类的东西）

Question

如何将精灵包裹在容器之类的东西中类似于 HTML:

<div class="wrapper">
  <div class="mysprite"></div>
</div>

我尝试将一个元素旋转两次，所以我需要包装器之类的东西：

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

//https://picsum.photos/200/300
let texture = PIXI.Texture.from("https://picsum.photos/200/100")
let element = new PIXI.Sprite(texture);
element.anchor.set(0.5);
element.x = 200;
element.y =100;
app.stage.addChild(element)

tl = gsap.timeline({repeat: -1})
tl.to(element, {angle: 360, duration: 2})

// i need to add one more rotation animation to this element, but main rotaion does not need to stop

/**
This is does not working
let tl2 = gsap.timeline()
tl2.fromTo(element, {angle: -10}, {angle: 10})
**/

* {
  padding: 0;
  margin: 0;
}

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

<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>

在 HTML 中，您可以只向元素添加一个旋转，向包装器（父元素）添加第二个旋转，我如何在 PIXI 中做到这一点？

Answer 1

使用 PIXI.Container.

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

let container = new Container();

//https://picsum.photos/200/300
let texture = PIXI.Texture.from("https://picsum.photos/200/100")
let element = new PIXI.Sprite(texture);
element.anchor.set(0.5);
element.x = 200;
element.y =100;

container.addChild(el

app.stage.addChild(container)

tl = gsap.timeline({repeat: -1})
tl.to(element, {angle: 360, duration: 2})

let tl2 = gsap.fromTo(container, {angle: -10}, {angle: 10})

* {
  padding: 0;
  margin: 0;
}

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

<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>

Pixi js 对一个元素进行两次旋转（如何添加包装器之类的东西）

Pixi js two rotations to one element (how to add something like wrapper)

gsap

pixi.js