尝试用 vue 实现灭霸打响指英雄消失的效果 demo

栏目: Html5 · 发布时间: 5年前

内容简介:灭霸打响指的消失效果。效果来源于 Google 搜索“灭霸” 或者 “thanos”。算是蹭热度的一个可以点击下面的链接体验一下

灭霸打响指的消失效果。效果来源于 Google 搜索“灭霸” 或者 “thanos”。算是蹭热度的一个 Feature , 我通过 F12 试图去查看是如何实现的,也抠了一些音频、图片资源下来。后来在 github 上找到了一个现有的项目 Thanos_Dust , 所以参考了部分它的代码。 其实它的代码已经算比较完善了,在它的基础上,我用 vue 来写了一下,加了一些英雄,修复了一些 bug ,加了一些效果之类的。

尝试用 vue 实现灭霸打响指英雄消失的效果 demo
尝试用 vue 实现灭霸打响指英雄消失的效果 demo

demo

  • 点击一下手套,伴随音效和响指的动画,会有一半的英雄消失。
  • 消失之后,再点一下,消失的英雄又会回来。

可以点击下面的链接体验一下

demos

尝试用 vue 实现灭霸打响指英雄消失的效果 demo

细节

  • 随机选取一半的英雄,是通过下面的算法进行选取的:

    arr.sort(function() {
      return 0.5 - Math.random();
    });
    复制代码
  • 被选中的英雄灰飞烟灭的效果解释:

    1. 使用html2canvas 库将每一个英雄所在的 dom 节点渲染为一个 canvas 节点
    2. 通过 generateFrames 方法,将整块的 canvas 画布图像按像素分割成许多块
    3. 创建一个跟选中的英雄所在的 dom 节点同一个位置、同样的大小的容器覆盖原 dom 节点
    4. 把第二步创建的块绘制到新的画布上,并都通过 appendChild 方法添加到第三步创建的父容器中
    5. 随机设置每一块的 rotate 角度和 translate 像素,就能完成灰飞烟灭的效果
    6. 将被覆盖的英雄的 dom 节点设置为不可见的,就完成了响指操作。
  • 翻转时间,英雄又回来的效果是将原来的 dom 节点设置为可见的,并加了回复动画。( google 的原版恢复动画是将 color 设置为 green ,因为这里没什么文字效果并不明显,就设置成了 background-color

最后

整个过程其实跟 vue 没什么关系,无论用什么前端技术栈都可以。以前也没有接触过 canvas ,似乎觉得还有点意思, 后面可能慢慢还会做一些改动,会继续学习 canvas 。最后附上 github 地址 .


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

高等应用数学问题的MATLAB求解

高等应用数学问题的MATLAB求解

薛定宇、陈阳泉 / 清华大学出版社 / 2008-10 / 49.00元

薛定宇和陈阳泉编著的《高等应用数学问题的MATLAB求解》首先介绍了MATLAB语言程序设计的基本内容,在此基础上系统介绍了各个应用数学领域的问题求解,如基于MATLAB的微积分问题、线性代数问题的计算机求解、积分变换和复变函数问题、非线性方程与最优化问题、常微分方程与偏微分方程问题、数据插值与函数逼近问题、概率论与数理统计问题的解析解和数值解法等,还介绍了较新的非传统方法,如模糊逻辑与模糊推理、......一起来看看 《高等应用数学问题的MATLAB求解》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

SHA 加密
SHA 加密

SHA 加密工具