使用 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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
IE与firefox之jquery用法区别
Oct 03 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
vue axios用法教程详解
Jul 23 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 Javascript
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
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
Python最小二乘法矩阵
2019/01/02 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
Python接口开发实现步骤详解
2020/04/26 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
九年级化学教学反思
2014/01/28 职场文书
赔偿协议书范本
2014/09/12 职场文书
会议接待欢迎标语
2014/10/08 职场文书
交通事故案件代理词
2015/05/23 职场文书
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技
vscode内网访问服务器的方法
2022/06/28 Servers