thanos-image
Version:
Thanos snap effect component built with Lit
100 lines (73 loc) • 2.89 kB
Markdown
<video width="600" controls>
<source src="https://github.com/user-attachments/assets/37617210-6d00-407b-956a-38bbb8fcc8e2" type="video/mp4">
</video>
这是一个实现了灭霸消失效果的 Web Component，可以在任何框架（Vue、React、Angular等）中使用。
功能上只有一个文件，packages/ThanosImage/thanos-image.ts ，使用的是 lit 开发的 web component，没有其他依赖库。单文件 7k 左右，加上 lit 打包进去 28k 左右。
要是想更加精简，可以考虑使用原生 js 开发，这样体积会更小。
- [Thanos Snap Effect](https://codepen.io/Mikhail-Bespalov/pen/yLmpxOG)
```bash
npm install thanos-image
```
| 属性名 | 类型 | 描述 | 默认值 |
|--------|--------|----------|--------|
| src | string | 图片URL | - |
| 事件名 | 描述 | 参数 |
|-------------|------------------|------|
| disappeared | 图片消失动画完成时触发 | - |
| 方法名 | 描述 | 返回值 |
|--------------------------|-------------|--------|
| playImageDisappearAnimation | 触发消失动画 | Promise<void> |
查看完整的示例代码：
- [HTML 示例](playground/html/index.html)
- [Vue 示例](playground/vue/src/App.vue)
- [React 示例](playground/react/src/App.jsx)
- ✅ Chrome
- ✅ Firefox
- ✅ Edge
- ⚠️ Safari（基础功能支持，动画效果简化）
1. 在 Safari 浏览器中，由于滤镜支持的限制，会使用简化的消失效果
2. 如果需要在动画完成后更新图片，建议使用以下模式：
```javascript
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]