Skip to content
/ thanos Public

Disintegrate an element like Thanos snap his fingers.像灭霸一样把元素变为原子尘埃😈

Notifications You must be signed in to change notification settings

zzuu666/thanos

Repository files navigation

Thanos 灭霸 npmnpm

可以像灭霸打响指一样,把元素变为原子尘埃。

想法与实现

想法来自于看了 Google 彩蛋 觉得非常炫酷!

实现的话只想到了需要把元素转化为 canvas,后续动画效果实在没有很好的思路,最终实现参考了这个问题

怎么使用

通过 NPM

1. 安装前置依赖 html2canvas

npm install html2canvas

2. 安装 thanos-boom

npm install thanos-boom --save

3. 引用

import 'thanos-boom/dist/index.css';
import Thanos from 'thanos-boom';

const thanos = new Thanos();

thanos.disintegrate(document.querySelector('.example'));

参数

Thanos 类接受一个参数。

字段名 类型 默认值 说明
frames number 16 将画面拆解为多少层,数值越高越消耗性能。
repetitionCount number 2 画面中的每个像素将被重复几次,数值越高越消耗性能。
cssPrefix string thanos 动画 css 前缀名。
html2canvas object {} html2canvas 初始化时接受的参数。参考 https://html2canvas.hertzen.com/configuration

更新日志

0.1.0

  • 最初版本。

0.1.4

  • 增加 types 文件
  • 调整参数默认值: frames: 32 => 16repetitionCount: 4 => 2