PIXI js水滴动画在每个涟漪事件上加速

// 创建PIXI应用程序
const app = new PIXI.Application();

// 创建水滴纹理
const texture = PIXI.Texture.from('waterdrop.png');

// 监听用户交互事件
app.stage.interactive = true;
app.stage.on('pointerdown', createRipple);

// 创建水滴涟漪
function createRipple(event) {
  const ripple = new PIXI.Sprite(texture);
  ripple.anchor.set(0.5);
  ripple.position.set(event.data.global.x, event.data.global.y);
  ripple.scale.set(0);

  // 添加到舞台上
  app.stage.addChild(ripple);

  // 动画效果
  const timeline = new TimelineMax();
  timeline.to(ripple.scale, 0.5, { x: 1, y: 1, ease: Power1.easeOut })
          .to(ripple.scale, 1, { x: 2, y: 2, alpha: 0, ease: Power1.easeInOut });

  // 监听动画完成事件
  timeline.eventCallback('onComplete', () => {
    // 移除水滴涟漪
    app.stage.removeChild(ripple);
  });
}

// 将渲染器添加到HTML页面中
document.body.appendChild(app.view);