用vue实现灭霸消失英雄效果的演示

写在前面

灭霸打响指的消失效果。效果来自谷歌搜索“thanos”或“than OS”。这是一个功能。我试着通过F12看看是怎么实现的，也挖掘了一些音视频资源。后来，我在github上发现了一个现有的项目灭霸_粉尘，所以我参考了它的一些代码。其实它的代码还是比较完善的。在此基础上，我用vue写的，增加了一些英雄，修复了一些bug，增加了一些效果。

演示

点击手套，随着音效和手指的动画，一半的英雄会消失。消失后，再次点击，消失的英雄会回来。你可以点击下面的链接来体验一下

民众

细节

一半的英雄通过以下算法随机选出：

arr . sort(function(){ return 0.5-math . random()；});说明所选英雄消失的效果；

使用html2canvas库将每个英雄所在的dom节点渲染为画布节点。通过generateFrames方法，将整个canvas画布图像按照像素划分为多个块，并创建一个与所选英雄的dom节点位置和大小相同的容器来覆盖原始的dom节点。在第二步中创建的块被绘制在新的画布上，并且它们都通过appendChild方法被添加到在第三步中创建的父容器中。随机设置每个块的旋转角度和平移像素，即可完成消失的效果。被覆盖英雄的dom节点被设置为不可见，然后环操作完成。翻转时间并返回英雄的效果是将原始dom节点设置为可见，并添加回复动画。(谷歌最初的还原动画是将颜色设置为绿色，因为这里没有明显的文字效果，所以设置为背景色)

最后的

整个过程与vue无关，无论使用什么样的前端技术栈。以前没接触过画布，好像觉得挺有意思的。以后可能会慢慢做一些改变，会继续学习画布。最后，附上github地址。

摘要

以上是边肖介绍的用vue实现英雄消失在灭霸的效果。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！