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

写在前面

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

demo

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

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

demos

细节

随机选取一半的英雄，是通过下面的算法进行选取的：

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 地址.

总结

以上所述是小编给大家介绍的使用 vue 实现灭霸打响指英雄消失的效果附,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 使用 vue 实现灭霸打响指英雄消失的效果附demo

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

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

  • vue项目中扫码支付的实现示例(附demo)

    vue项目中扫码支付的实现示例(附demo)

    目录 需求背景 思路分析 UI展示 开始使用 一 编写支付组件模板 二 支付组件的JS相关代码和说明 附:组件JS完整的源码 需求背景 市场报告列表展示的报告有两种类型,一种是免费报告,另一种是付费报告.免费报告用户可以直接查看,付费报告需要用户购买之后才能查看. 思路分析 点击查看为付费报告,弹出支付二维码. 创建订单,二维码进行倒计时,其展示5秒后开始监听支付回调结果,频次为五秒一次. 倒计时第一次倒数到0秒,提醒二维码过期让用户点击刷新二维码. 继续倒计时并开始监听支付回调结果. 刷新之后

  • vue中使用极验验证码的方法（附demo）

    前言: vue中使用极验验证码,最好是在页面渲染的时候(mounted)进行验证码的初始化,然后在初始化回调中绑定触发弹出验证码的事件.这样在点击按钮或者进行特定操作时能够快速的弹出验证码. 关键代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt

  • Python+PyQt5实现灭霸响指功能

    之前给大家分享过灭霸命令GitHub地址:https://github.com/hotvulcan/Thanos.sh,本文使用Python+PyQt5实现灭霸响指,实现过程较简单,上效果图~ GUI实现代码如下: # -*- coding: utf-8 -*- from PyQt5 import QtCore, QtGui, QtWidgets class Ui_MainWindow(object): def setupUi(self, MainWindow): MainWindow.setO

  • vue 导航菜单刷新状态不消失,显示对应的路由界面操作

    使用vue element-ui框架构建公共导航栏(https://element.eleme.cn/#/zh-CN/component/menu) 按F5刷新就会返回默认定义的路由,使用 "$route.path" 刷新后还是在最新的一个路由: <el-menu :default-active="$route.path"></el-menu> 补充知识:vue 动态菜单 刷新空白 解决方案 1.先确认自己在route.js 或者 main.

  • vue 和vue-touch 实现移动端左右导航效果（仿京东移动站导航）

    vue 和vue-touch 实现移动端左右导航效果（仿京东移动站导航）

    先给大家展示下效果图,感觉还不错请参考实现代码: 使用技术:vue2.0 webpack vue-touch 一些简单的javascript; (注意:vue-touch 使用的是2.0.0版本 需要与vue2.0.0兼容) vue-touch(地址:https://github.com/vuejs/vue-touch 注意是next 分支) 左侧导航可滑动(右侧视图窗因为和左逻辑一样 就没写) var VueTouch = require('vue-touch') Lib.Vue.use(Vu

  • elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo

    调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- import CSS --> <link rel="stylesheet" href="https://u

  • Vue实现鼠标经过文字显示悬浮框效果的示例代码

    需求 在所做的Vue项目中,需要在鼠标移动文字框的时候显示一些详细信息.最终实现的效果如下: 鼠标经过button的时候,可以在光标附近显示出一个悬浮框,显示框里面显示时间和值的信息,鼠标移出button元素的时候,这个显示框会消失. 分析 涉及到鼠标的移动事件. 鼠标事件有下面这几种: 1.onclick(鼠标点击事件) box.onclick = function(e){ console.log(e) } 2.onmousedown(鼠标按下事件) box.onmousedown = fun

  • 利用Vue.js实现checkbox的全选反选效果

    前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码 <template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'

  • 基于Vue.js 2.0实现百度搜索框效果

    使用Vue.js 2.0 模仿百度搜索框效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum

随机推荐