🌌 Thanos Image Web Component

这是一个实现了灭霸消失效果的 Web Component，可以在任何框架（Vue、React、Angular等）中使用。

功能上只有一个文件，packages/ThanosImage/thanos-image.ts ，使用的是 lit 开发的 web component，没有其他依赖库。单文件 7k 左右，加上 lit 打包进去 28k 左右。 要是想更加精简，可以考虑使用原生 js 开发，这样体积会更小。

Inspiration

• Thanos Snap Effect

⚡️ 安装

npm install thanos-image

📝 属性

| 属性名 | 类型 | 描述 | 默认值 | |--------|--------|----------|--------| | src | string | 图片URL | - |

🎮 事件

| 事件名 | 描述 | 参数 | |-------------|------------------|------| | disappeared | 图片消失动画完成时触发 | - |

🛠 方法

| 方法名 | 描述 | 返回值 | |--------------------------|-------------|--------| | playImageDisappearAnimation | 触发消失动画 | Promise |

🎯 示例

查看完整的示例代码：

• HTML 示例
• Vue 示例
• React 示例

🌍 浏览器支持

• ✅ Chrome
• ✅ Firefox
• ✅ Edge
• ⚠️ Safari（基础功能支持，动画效果简化）

⚠️ 注意事项

1. 在 Safari 浏览器中，由于滤镜支持的限制，会使用简化的消失效果
2. 如果需要在动画完成后更新图片，建议使用以下模式：

const thanosImage = document.querySelector('thanos-image');
const playButton = document.querySelector('button');

// 预加载图片函数
function preloadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = src;
    img.onload = resolve;
    img.onerror = reject;
  });
}

// 播放动画并更新图片
playButton.addEventListener('click', () => {
  playButton.disabled = true;
  playButton.textContent = 'Animating...';
  
  thanosImage.playImageDisappearAnimation().then(async () => {
    console.log('Animation finished!');
    // 隐藏原图片
    thanosImage.style.display = 'none';
    // 生成新的图片地址（这里使用随机图片作为示例）
    const newSrc = `https://picsum.photos/id/${Math.floor(Math.random() * 1000) + 1}/300/300`;
    // 预加载新图片
    await preloadImage(newSrc);
    // 更新图片源
    thanosImage.src = newSrc;
    thanosImage.style.display = 'block';
    // 恢复按钮状态
    playButton.disabled = false;
    playButton.textContent = 'Play Animation';
  });
});

📄 许可证

MIT © [Arvin]