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


Posted in Javascript onMay 06, 2019

写在前面

灭霸打响指的消失效果。效果来源于 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 地址.

总结

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

Javascript 相关文章推荐
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
Vue修改项目启动端口号方法
Nov 07 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
vue如何截取字符串
May 06 #Javascript
用vscode开发vue应用的方法步骤
May 06 #Javascript
微信小程序合法域名配置方法
May 06 #Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 #Javascript
微信小程序上线发布流程图文详解
May 06 #Javascript
ES6的解构赋值实例详解
May 06 #Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 #Javascript
You might like
PHP模板引擎SMARTY
2006/10/09 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
微信小程序入门教程
2016/11/18 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
Python入门篇之数字
2014/10/20 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
Python实现异步IO的示例
2020/11/05 Python
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
EJB的基本架构
2016/09/22 面试题
送给程序员的20个Java集合面试问题
2014/08/06 面试题
公司培训欢迎词
2014/01/10 职场文书
班级口号大全
2014/06/09 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
公司股份合作协议书
2014/12/07 职场文书