Estoy tratando de cambiar el tamaño de un círculo gráfico haciendo un bucle con el método de escala. El bucle animará la escala del círculo de 1 a 3 y luego de 3 a 1. El siguiente código funciona como pretendía, sin embargo, cuando el círculo se agranda, cambia de tamaño en la dirección de abajo a la derecha. Luego, el círculo cambia de tamaño a su dirección opuesta (arriba a la izquierda) después de alcanzar la escala máxima dada. Aquí está el código:

 const app = new PIXI.Application({ width: 300, height: 300, }); const canvasDiv = document.getElementById('canvasDiv'); canvasDiv.appendChild(app.view); let circle = new PIXI.Graphics(); circle.beginFill(0xffffff); circle.drawCircle(5, 5, 5); circle.x = 150; circle.y = 150; circle.endFill(); app.stage.addChild(circle); let scale = 1, motion = 1; app.ticker.add(() => animateLoop()); function animateLoop(){ if (motion == 1){ if (scale < 3){ scale += 0.2; } else{ motion = 0; } } else{ if (scale > 1){ scale -= 0.2; } else{ motion = 1; } } circle.scale.set(scale,scale); }

Leí el sitio de Pixi y vi la opción pivotar para manejar el centrado de los gráficos durante el cambio de tamaño. Intenté implementarlo y tiene ligeras mejoras. Sin embargo, no puedo centrar exactamente el círculo a pesar de probar múltiples valores de pivote. Aquí está el código agregado:

 /** On Motion 1 */ if (scale < 3){ scale += 0.2; circle.pivot.x += 0.5; circle.pivot.y += 0.2; } /** On Motion 0 */ if (scale > 1){ scale -= 0.2; circle.pivot.x -= 0.5; circle.pivot.y -= 0.2; }

¿Cómo puedo solucionar esto?