十分钟实现灭霸打响指灰飞烟灭的效果
看过复仇者联盟的都知道,灭霸作为计划生育政策的坚定支持者和执行者,一个响指清除了宇宙中二分之一的生命。电影中被清除的生命灰飞烟灭的镜头很是酷炫,所以在复联4上映后,那个不存在的网站google,推出了一个彩蛋,如果在搜索框搜索灭霸,会出现一个手套的按钮,点击后会让网页搜索结果消失一半。
恩~这很谷歌。
效果虽然酷炫但其实并不复杂,这里带着大家一起来实现一下,网上也已经有了一些教程(Thanos Snap Effect JavaScript Tutorial)。
这里稍微加点东西,灭霸的响指毕竟是真的打而不是用鼠标点按钮,所以我会加上音量检测,当检测到响指的声音(其实是超过某个音量预值)就触发效果,然后就可以愉快的向朋友装逼了。
准备开始
我们这里只用一个图片元素,HTML结构如下
动画的实现
1、将html转成canvas,为后面处理做准备。这里我们使用html2canvas库,可以将html中的dom节点绘制成canvas,相当于对这个dom节点进行截图,使用很简单,代码如下(网页生成海报图片就可以用这个库来做)。
2、这里我们拿到了包含了图片信息的canvas后,要通过canvas的getImageData来获取到canvas画布上的每个像素的信息。
图像信息被存储在一个Uint8ClampedArray(8位无符号整型固定数组)中。
这个数组中的值为0到255的整数,按图片中像素从左到右从上到下的顺序,每4个数字表示一个像素信息,这4个数字分别表示rgba(r-红色,g-绿,b-蓝色,a-透明度)的四个值。 比如这样一个图片
它的像素信息即为
3、接下来是最关键的一步,创建多个同等长度的数组,填充上透明像素信息(数组中的值全是0即可),然后将之前拿到的图像像素信息“随机”分布到这些数组中,这些数组就包含了原图像的部分内容,原教程里面用到了一个随机数生成的库chance来控制随机数出现概率,直接使用完全随机数也没有问题。
当canvasCount为3时效果如下:
原始图片canvas
生成的包含原图部分像素的3个canvas
canvasCount越大,生成的canvas越多,分配到每个canvas上面的像素就越少,飘的就越散。
4、接下来就非常简单了,隐藏掉原始图像,为生成的canvas添加飘散动画就可以了,飘散动画主要组成就是高斯模糊,位移,旋转,透明度变化,具体代码这里就不写了,可以在demo源代码中看到,最终效果如下。
响指触发
灰飞烟灭的动画已经完成,接下来是如何触发这段动画,文章开始就说过谷歌搜索上的原始效果是通过点击按钮触发,而我们通过麦克风实时检测输入音量,当打响指时(音量达到一定大小)触发动画。
1、首先要确保你的设备有麦克风等声音输入装置,然后监测并获取设备,如果有麦克风设备,网页上会弹出授权提示。
2、音频处理代码
最后
一切搞定,就这么简单可以拿去装逼了~~
来源于
https://juejin.im/post/5cd2b57ef265da039f0f292c
十分钟实现灭霸打响指灰飞烟灭的效果相关推荐
- 微博html5版灭霸,十分钟实现灭霸打响指灰飞烟灭的效果
看过复仇者联盟的都知道,灭霸作为计划生育政策的坚定支持者和执行者,一个响指清除了宇宙中二分之一的生命.电影中被清除的生命灰飞烟灭的镜头很是酷炫,所以在复联4上映后,那个不存在的网站google,推出了 ...
- 十分钟实现灭霸打响指灰飞烟灭的效果,android路由器app
//处理canvas的代码 const ctx = canvas.getContext('2d'); const imageData = ctx.getImageData( 0, 0, canvas. ...
- 尝试用 vue 实现灭霸打响指英雄消失的效果 demo
写在前面 灭霸打响指的消失效果.效果来源于 Google 搜索"灭霸" 或者 "thanos".算是蹭热度的一个 Feature, 我通过 F12 试图去查看是 ...
- Vue灭霸打响指效果
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/GreekMrzzJ/article/details/89821464 </div>< ...
- python偷回灭霸的宝石_Python视频处理案例:反转灭霸打响指的视频动画(源代码)!...
<复仇者联盟4:终局之战>的宣传口号是逆转无限(to reserve infinity),在电影中,钢铁侠研究出了可以穿越时间的量子战甲,复仇者联盟人手一件,穿越时空回到过去带回了六颗无限 ...
- Problem C 灭霸打响指
Problem Description 那一天,灭霸终于还是集齐了六枚无限宝石,但在打响指消灭一半生命之前,他决定考一考你. 复仇者联盟有n位成员,每位成员的战斗力是si. 灭霸打响指后会消灭一半复仇 ...
- Chrome 灭霸打响指彩蛋动画 Android实现
github地址 在手机chrome搜索灭霸后,会出现一个手套的图片,点击图片后会出现一个彩蛋,即一半的搜索结果会消失.消失的动画如下图所示: 可以看到这个动画 大致可以理解为:将当前view分为两份 ...
- 十分钟学习自然语言处理概述
十分钟学习自然语言处理概述 摘要:近来自然语言处理行业发展朝气蓬勃,市场应用广泛.笔者学习以来写了不少文章,文章深度层次不一,今天因为某种需要,将文章全部看了一遍做个整理,也可以称之为概述.关于这些问 ...
- erwin模型怎么保存_一行命令启动,十分钟内完成部署,Paddle Serving开放模型即服务功能...
机器之心发布 机器之心编辑部 百度飞桨的 Paddle Serving 能够实现服务器端快速部署,最近,随着飞桨更新到 1.7 版本,Paddle Serving 也有了新变化.更新后的 Paddle ...
最新文章
- java读取dat_使用在eclipse java.io库,以便能的FileInputStream读取dat文件
- [编程笔记] UNICODE和UTF-8和ASCII互转
- SLAM: 图像角点检测的Fast算法(时间阈值实验)
- basename php 中文,php basename不支持中文怎么办
- 移动云TeaTalk(长沙站)| 聚焦“云网一体”发展新机遇
- 161122、BOM 操作写法示例
- 1.3 更多边缘检测内容
- Julia:关于split的用法
- PMP课程笔记:第1-3章 引论 项目运行环境 项目经理
- 远程控制客户端使用教程-multiDesk
- python ctype_Python ctype帮助:使用C unsigned char指针
- 关于机械革命电脑关机后自动重启的解决方案
- Codeforces Round #660 (Div. 2) A. Captain Flint and Crew Recruitment
- 单例模式——解决MDI子窗体实例化的问题
- Redis最详细讲解
- ArcGIS字段计算器中的python函数(转发)
- 视频H.263与H.264的比较
- solution的一知半解
- html网页 swf播放器使用代码
- 云南php整站优化,整站优化:htmljs代码和php代码