灭霸打响指的消失效果。效果来源于 Google 搜索“灭霸” 或者 “thanos”。算是蹭热度的一个 Feature
, 我经过 F12
试图去查看是如何实现的,也抠了一些音频、图片资源下来。后来在 github 上找到了一个现有的项目 Thanos_Dust, 因此参考了部分它的代码。 其实它的代码已经算比较完善了,在它的基础上,我用 vue 来写了一下,加了一些英雄,修复了一些 bug ,加了一些效果之类的。html
能够点击下面的连接体验一下前端
demosvue
随机选取一半的英雄,是经过下面的算法进行选取的:git
arr.sort(function() {
return 0.5 - Math.random();
});
复制代码
被选中的英雄灰飞烟灭的效果解释:github
dom
节点渲染为一个 canvas
节点canvas
画布图像按像素分割成许多块dom
节点同一个位置、一样的大小的容器覆盖原 dom
节点appendChild
方法添加到第三步建立的父容器中rotate
角度和 translate
像素,就能完成灰飞烟灭的效果dom
节点设置为不可见的,就完成了响指操做。翻转时间,英雄又回来的效果是将原来的 dom
节点设置为可见的,并加了回复动画。( google
的原版恢复动画是将 color
设置为 green
,由于这里没什么文字效果并不明显,就设置成了 background-color
)算法
整个过程其实跟 vue 没什么关系,不管用什么前端技术栈均可以。之前也没有接触过 canvas ,彷佛以为还有点意思, 后面可能慢慢还会作一些改动,会继续学习 canvas 。最后附上 github 地址.canvas