Thanos 灭霸

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

想法与实现

想法来自于看了 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 => 16 和 repetitionCount: 4 => 2