关于html5:教你实现微信80『炸裂』的????表情特效

写在结尾

最近微信更新了8.0,其中之一最好玩的莫过于表情包的更新了,大家都在群里纷纷玩起了表情包大战。

作为一个前端程序员,这就勾起了我的好奇心,尽管我素来没有实现过这样的动画,然而我还是忍不住想要去实现,最终我花了2天工夫去看一些库的源码到我本人实现一个相似的成果,在这里我总结一下,并且手把手地教大家怎么学习实现。而????有一个本人的名字,叫做五彩纸屑,英文名字叫 confetti

聊天室+五彩纸屑特效 在线地址: https://www.qiufengh.com/#/

聊天室Github地址: https://github.com/hua1995116/webchat

五彩纸屑Github地址: https://github.com/hua1995116/node-demo/tree/master/confetti

特效预览,工夫起因我只实现了平行四边形的黑白小块,其余形态的原理也是相似。

还能够设置方向

后期钻研

在写这个特效前,我简直不会用canvas,尽管说当初也不太会用,很多 API 也不太分明,因而这篇教程也是基于零根底 canvas 写的,大家不必放心这个教程难度太高而被劝退。我会通过零根底 canvas 的根底上来一步步实现的。不过学习这个特效之前须要一点点高中数学的常识,如果你还记得 sin 和 cos 函数,那么以下的内容对于你来说都会非常简单,不会也没关系~

我集体比拟喜爱摸索钻研,对有意思的玩意儿就会去钻研,因而我也是站在伟人的根底上,去 codepen 查了好多个相似的实现进行钻研。

最终将指标定位在了 canvas-confetti ,为什么是这个库呢?因为他的成果对于咱们来说十分能够了,而且它是一个开源库,并且领有了 1.3K star(感觉改天能够剖析剖析大佬实现库的原理了~),保护频率也十分高。

外围实现

切片场景

首先拿到这个库的时候,我有点开心,因为这个库只有一个单文件。

然而,当我关上这个文件的时候,发现不对…1个文件500行代码,我通过剥离层层的一些自定义配置化的代码,最初抽离出单个纸屑的静止轨迹。我就开始一直地在察看它的静止轨迹…有限循环的察看…

能够看到它在做一个相似于抛物线的静止,而后我一一将源码中的变量进行标注,再联合源码。

fetti.x += Math.cos(fetti.angle2D) * fetti.velocity;
fetti.y += Math.sin(fetti.angle2D) * fetti.velocity + fetti.gravity; 

以上代码看不懂也没事,我只是证实一下源码中的写法,并且提供学习源码的一些思路,以下才是真正的开讲实现!

平行四边形的实现

实现这个个性前,咱们须要晓得 canvas 几个函数。更多查看(https://www.runoob.com/jsref/dom-obj-canvas.html)

beginPath

办法开始一条门路,或重置以后的门路。

moveTo

把门路挪动到画布中的指定点,不创立线条。

lineTo

增加一个新点,而后在画布中创立从该点到最初指定点的线条。

closePath

创立从以后点回到起始点的门路。

fill

填充以后绘图(门路)。

fillStyle

设置或返回用于填充绘画的色彩、突变或模式。

既然咱们要实现五彩纸屑,那么我必定得先实现一个纸屑,咱们就来实现一个平行四边形的纸屑吧!

咱们都晓得在 css 中实现平行四边形就是一个div,默认就是一个盒子,而在 canvas 中并没有那么不便,那么怎么实现一个平行四边形呢?

四个点,咱们只须要晓得四个点,就能确定一个平行四边形。而canvas中的坐标系和咱们一般的写网页略有不同,它是从左上角作为起始点,然而并不影响。

我能够来画一个宽为20的平行四边形,(0, 0), (0, 20), (20,20), (20,0)

...(省略了一些前置初始化代码)
var context = canvas.getContext('2d');
// 革除画布
context.clearRect(0, 0, canvas.width, canvas.height);
// 设置色彩并开始绘制
context.fillStyle = 'rgba(2, 255, 255, 1)';
context.beginPath();
// 设置几个点
var point1 = { x: 0, y: 0 }
var point2 = { x: 0, y: 20 }
var point3 = { x: 20, y: 20 }
var point4 = { x: 20, y: 0 }
// 画4个点
context.moveTo(Math.floor(point1.x), Math.floor(point1.y));
context.lineTo(Math.floor(point2.x), Math.floor(point2.y));
context.lineTo(Math.floor(point3.x), Math.floor(point3.y));
context.lineTo(Math.floor(point4.x), Math.floor(point4.y));
// 实现路线,并填充
context.closePath();
context.fill(); 

咱们总结一下,咱们其实只须要一个点就能确定这个平行四边形的初始地位(0, 0),如果再晓得一个角度(90度)、以及平行四边形的变长(20)就能确定整个平行四边形的地位了!(仅仅只须要初中常识就能定位整个平行四边形)。

好了,你学会画这个曾经离胜利迈向了一大步!是不是挺简略的~

大佬们心田OS: 就这?

嗯,就这。

静止轨迹

通过一直地调试 canvas-confetti 每一帧的轨迹静止,发现它始终做的是一个x轴变减速运动(直到速度为0就不持续静止了),而y轴也是一个先变减速运动再是一个均速静止,以下是大抵的轨迹图。

这就是他的静止轨迹,别以为看着挺难的,然而外围代码只有三句。

// fetti.angle2D为一个角度(这个角度确定了静止轨迹 3 / 2 * Math.PI - 2 * Math.PI之间的一个值,因为要让轨迹往左上角挪动,就是都要往负方向静止,因而选了以上范畴),
// fetti.velocity 为一个初始为50长度的值。
// fetti.gravity = 3
fetti.x += Math.cos(fetti.angle2D) * fetti.velocity; // fetti.x 第一个点的x坐标
fetti.y += Math.sin(fetti.angle2D) * fetti.velocity + fetti.gravity; // fetti.y 第一个点的y坐标
fetti.velocity *= 0.8; 

总结起来就是,第一个坐标点的 x 周始终在减少一个负值(Math.cos(3 / 2 Math.PI – 2 Math.PI) 始终为负值),这个值在一直减小。而第一个点的y轴也始终在加一个负值Math.cos(3 / 2 Math.PI – 2 Math.PI) 始终为负值),然而因为 fetti.gravity始终为正值,因而到了某个临界点,y的值会一直减少。

我模仿了以下的坐标,因为为了让大家能明确这个轨迹,以下坐标轴和canvas中相同,数据我也做了相应的解决,进行了反方向解决。

用一个边上为10的正方形,实现轨迹。

const fetti = {
  "x": 445,
  "y": 541,
  "angle2D": 3 / 2 * Math.PI + 1 / 6 * Math.PI,
  "color": {r: 20, g: 30, b: 50},
  "tick": 0,
  "totalTicks": 200,
  "decay": 0.9,
  "gravity": 3,
  "velocity": 50
}
var animationFrame = null;
const update = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = 'rgba(2, 255, 255, 1)';
  context.beginPath();
  fetti.x += Math.cos(fetti.angle2D) * fetti.velocity; // 第一个点
  fetti.y += Math.sin(fetti.angle2D) * fetti.velocity + fetti.gravity; // 第一个点

  var x1 = fetti.x;
  var y1 = fetti.y;

  var x2 = fetti.x;// 第二个点
  var y2 = fetti.y + 10; // 第二个点

  var x3 = x1 + 10;
  var y3 = y1 + 10;

  var x4 = fetti.x + 10;
  var y4 = fetti.y;

  fetti.velocity *= fetti.decay;

  context.moveTo(Math.floor(x1), Math.floor(y1));
  context.lineTo(Math.floor(x2), Math.floor(y2));
  context.lineTo(Math.floor(x3), Math.floor(y3));
  context.lineTo(Math.floor(x4), Math.floor(y4));

  context.closePath();
  context.fill();
  animationFrame = raf.frame(update);
} 

是不是除了色彩和形态,有那味了?

反转特效

那么如何实现让这个着落更加天然,会有一种飘落的感觉呢?

其实,他就是始终在做一个翻转特效.

将他们拆解就是在做绕着一个点的旋转静止,整个过程就是一边自我翻转一边依照静止轨迹进行挪动。

实现这个特效,其实之前在实现正方形的时候提到过,实现一个正方形。满足以下三个点能实现一个平行四边形。

  • 晓得一个点的地位
  • 晓得一个角度
  • 晓得一边边长

目前我能确定的有,一个点的地位很容易确定,就是咱们的起始点,而后咱们边长也晓得,就差一个角度了,只有咱们的角度一直变动,咱们就能实现以上特效。

const update = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = 'rgba(2, 255, 255, 1)';
  context.beginPath();

  fetti.velocity *= fetti.decay;
  fetti.tiltAngle += 0.1 // 一直给这个四边形变动角度

  var length = 10;

  var x1 = fetti.x;
  var y1 = fetti.y;

  var x2 = fetti.x + (length * Math.sin(fetti.tiltAngle));// 第二个点
  var y2 = fetti.y + (length * Math.cos(fetti.tiltAngle)); // 第二个点

  var x3 = x2 + 10;
  var y3 = y2;

  var x4 = fetti.x + length;
  var y4 = fetti.y;


  context.moveTo(Math.floor(x1), Math.floor(y1));
  context.lineTo(Math.floor(x2), Math.floor(y2));
  context.lineTo(Math.floor(x3), Math.floor(y3));
  context.lineTo(Math.floor(x4), Math.floor(y4));

  context.closePath();
  context.fill();
  animationFrame = raf.frame(update);
} 

这样咱们就实现了以上的特效。

组合静止

而后把咱们以上写的组合在一起就是一个残缺的特效啦。

const update = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = 'rgba(2, 255, 255, 1)';
  context.beginPath();
  fetti.x += Math.cos(fetti.angle2D) * fetti.velocity; // 第一个点
  fetti.y += Math.sin(fetti.angle2D) * fetti.velocity + fetti.gravity; // 第一个点

  fetti.velocity *= fetti.decay;
  fetti.tiltAngle += 0.1 // 一直给这个四边形变动角度

  var length = 10;

  var x1 = fetti.x;
  var y1 = fetti.y;

  var x2 = fetti.x + (length * Math.sin(fetti.tiltAngle));// 第二个点
  var y2 = fetti.y + (length * Math.cos(fetti.tiltAngle)); // 第二个点

  var x3 = x2 + 10;
  var y3 = y2;

  var x4 = fetti.x + length;
  var y4 = fetti.y;


  context.moveTo(Math.floor(x1), Math.floor(y1));
  context.lineTo(Math.floor(x2), Math.floor(y2));
  context.lineTo(Math.floor(x3), Math.floor(y3));
  context.lineTo(Math.floor(x4), Math.floor(y4));

  context.closePath();
  context.fill();
  animationFrame = raf.frame(update);
} 

最终状态

如果想要实现最初的状态,就差多个小块突变隐没以及随机色彩了!

设置多少帧隐没,这里搞了两个变量totalTickstick,自定义来管制多少帧后小块隐没。

至于多个小块,咱们只须要搞一个 for 循环。

而随机色彩,搞了一个colors列表。

const colors = [
  '#26ccff',
  '#a25afd',
  '#ff5e7e',
  '#88ff5a',
  '#fcff42',
  '#ffa62d',
  '#ff36ff'
];
var arr = []
for (let i = 0; i < 20; i++) {
  arr.push({
    "x": 445,
    "y": 541,
    "velocity": (45 * 0.5) + (Math.random() * 20),
    "angle2D": 3 / 2 * Math.PI + Math.random() * 1 / 4 * Math.PI,
    "tiltAngle":  Math.random() * Math.PI,
    "color": hexToRgb(colors[Math.floor(Math.random() * 7)]),
    "shape": "square",
    "tick": 0,
    "totalTicks": 200,
    "decay": 0.9,
    "random": 0,
    "tiltSin": 0,
    "tiltCos": 0,
    "gravity": 3,
  })
} 

残缺代码请看

https://github.com/hua1995116/node-demo/blob/master/confetti/残缺demo.html

加点餐

实现多人对战状态的表情大战。在咱们微信中表情的发送并不是单点的,而是多人状态,因而咱们能够持续摸索,利用 websocket 和多彩小块联合。

这里咱们须要留神几个点。(因为篇幅起因就不对 websocket 开展解说了,提一下实现要点)。

  • 咱们能够通过一个 tag 来辨别是历史音讯还是实时音讯
  • 辨别是本人收回的音讯,还是受到他人的音讯,来扭转五彩纸屑方向。
  • 只有为单个 ????的时候才会进行动画。
  • 先进行放大放大的动画,提早200ms再进去特效
if(this.msg === '????' && this.status) {
        this.confetti = true;
        const rect = this.$refs.msg.querySelector('.msg-text').getBoundingClientRect();
        if(rect.left && rect.top) {
          setTimeout(() => {
            confetti({
              particleCount: r(100, 150),
              angle: this.isSelf ? 120 : 60,
              spread: r(45, 80),
              origin: {
                x: rect.left / window.innerWidth,
                y: rect.top / window.innerHeight
              }
            });
          }, 200)
        }
} 

更多摸索

用 canvas 绘制十分十分多方块的时候,会比拟卡顿,这个时候咱们能够利用 web worker 来进行计算,从而进步性能,这个就请读者们自行摸索啦,也能够看 canvas-confetti的源码~

最初

回看笔者往期高赞文章,兴许能播种更多喔!

  • 从破解某设计网站谈前端水印(具体教程):790+点赞量
  • 从王者光荣里我学会的前端老手指引:260+点赞量
  • 一文带你层层解锁「文件下载」的神秘:140+点赞量
  • 10种跨域解决方案(附终极大招):940+点赞量
  • 一文理解文件上传全过程(1.8w字深度解析,进阶必备):260+点赞量

结语

❤️关注+点赞+珍藏+评论+转发❤️,原创不易,激励笔者创作更好的文章

关注公众号秋风的笔记,一个专一于前端面试、工程化、开源的前端公众号

  • 关注后回复简历获取100+套的精美简历模板
  • 关注后回复好友拉你进技术交换群+面试交换群
  • 欢送关注秋风的笔记

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理