乐趣区

关于javascript:又来了10分钟实现微信-炸屎大作战

大家好,我是秋风,近日,微信又公布了新性能(更新到微信 8.0.6)。最炽热的非 ” 炸屎 ” 性能莫属了,各种群里纷纷玩起了炸屎的性能。

不晓得大家是否经验过那样一个时候,小时候过年也会看到邻家小孩干这种恶趣味,没想到微信给它做成了一个线上版本。这个性能创造,连发明产品的自己也进行了调侃。然而能做一个性能让全民玩的开心,也不枉产品的呈现的意义了。

之前在微信 8.0 更新的时候,我也写过一篇《教你实现微信 8.0『炸裂』的礼花表情特效》。之前一篇文章中我是用 canvas 来实现的,上次在文章末有人评论,能够通过 lottie 来实现类似的性能,其实我对这个还是挺感兴趣的,然而始终没有尝试,这一次我就想通过新的形式 lottie 来实现一下这性能。

成果体验:

https://example.qiufeng.blue/…

Github 地址:

https://github.com/hua1995116…

步骤拆解

任何一个物体都是由更渺小的物体形成,因而咱们想要实现以上性能,天然也得一步一步地来。我大抵将以上性能拆解成了以下四个步骤。外面的每一个都不会太难,能够说前端小白也能轻松实现。

1. 丢炸弹

这一步,咱们能够用二次函数的常识,来写一个轨迹门路(相似 y = $x^2$),而后通过 tween.js 来做补间动画。

2. 炸弹爆炸

利用lottie 来实现动画。

3. 粑粑被炸开

利用 css 动画实现

4. 所有人触动

利用 css 动画实现

总结

以上咱们大抵想说的思路,兴许你看思路就对其中一些的实现曾经驾轻就熟,那你能够跳过一部分。有了下面的思路后,那咱们就真刀真枪开始实际啦。

具体实现

1. 丢炸弹

咱们通过仔细观察其实能够看到,炸弹的静止轨迹其实就是一个抛物线。咱们想要实现这个性能,很容易地就能够联想到二次函数。

首先咱们先来看看二次函数的定义。

个别地,把形如y=ax²+bx+c(a≠0)(a、b、c 是常数)的函数叫做二次函数。

从图像上来表白就是这样的。

很显然这和咱们想要的轨迹十分的类似。

因为失常的笛卡尔坐标系都是以竖直向上为 y 正轴,横向向右为 x 正轴。而对于 dom 定位而言,左上方为(0,0)横向向右为 x 正轴,竖直向下为 y 正轴。只不过将坐标系沿着 x 轴进行了一个翻转。

因而咱们只有确定一个二次函数,咱们就能失去轨迹。因为二次函数的通项有 3 个未知数,因而,咱们只须要晓得 3 个点就能确定一个二次函数。咱们先假设咱们的二次函数是这样的。

咱们的 3 个点别离为 (0,H),(H,0),(3H, 3H) 咱们通过代入通项能够得出以下公式:

而后解出

失去:

因而,咱们只须要失去这个炸弹最高点间隔 ” 屎 ” 的高度,就能画出整个轨迹。

当初假如咱们的炸弹是一个 10px * 10px 的小方块,设置起始点为(300,300)起点为(0,100)H=100,此时咱们失去的二次函数为:

咱们就能失去以下轨迹动画:

而渲染每一帧动画,咱们则用了驰名的补间动画库 Tween.js 补间 (动画) 是一个概念,容许你以平滑的形式更改对象的属性。你只需通知它哪些属性要更改,当补间完结运行时它们应该具备哪些最终值,以及这须要多长时间,补间引擎将负责计算从起始点到完结点的值。

var coords = {x: 300};  // 起始点 为 x = 300
var tween = new TWEEN.Tween(coords)
    .to({x: 0}, 1000) // 起点为 x = 0, 并且这个动作将在 1 秒内实现
  .easing(TWEEN.Easing.Linear.None)    // 匀速

通过以上定义,咱们就能够在 onUpdate 中,拿到每次变动的 x 值,而后通过下面二次函数失去 y,而后对小方块进行更新。

tween.onUpdate(function() {
    var x = coords.x;
    var y = 1/120 * x * x - 11/6 * x + 100;
        box.style.setProperty('transform', 'translate(' + x + 'px,' + y + 'px)');
})

此时咱们实现的成果还是缺了点货色,就像画画一样,咱们只给他画了骨骼,咱们须要给它包装上色,接下来咱们只须要做以下两件事,而后就能看到成果啦~

1. 将方块换成炸弹然,炸弹的形态很简略,咱们能够通过 ps 将它从图层中抠出来。

2. 批改它静止时候的角度。

本节残缺代码:https://github.com/hua1995116…

2. 炸弹爆炸

而后再谈谈炸弹爆炸的成果,下面也说了,想换成lottie 来写动画,那么lottie 是什么呢?

Lottie 是一个库,能够解析应用 AE 制作的动画(须要用 bodymovin 导出为 json 格局),反对 web、ios、android 和 react native。在 web 侧,lottie-web 库能够解析导出的动画 json 文件,并将其以 svg 或者 canvas 的形式将动画绘制到咱们页面中。

而后我去 https://lottiefiles.com/ 找了一个 json 爆炸的特效文件。

而它的写法非常简单,只须要引入 lottie ,而后调用 bodymovin.loadAnimation 办法。

<script src="https://cdn.bootcdn.net/ajax/libs/lottie-web/5.7.8/lottie.min.js"></script>
</head>
<body>
<div class="bodymovin"></div>
<script>
    const animation = window.bodymovin.loadAnimation({container: document.querySelector('.bodymovin'), // 要蕴含该动画的 dom 元素
        renderer: 'svg', // 渲染形式,svg、canvas、html(轻量版仅 svg 渲染)loop: true, // 是否循环播放
        autoplay: true, // 是否自动播放
        path: './bomb.json', // 动画 json 文件门路
    });
</script>

因而咱们只须要在抛物线实现后再立刻调用爆炸特效,而 tween.js 也给我提供了事件办法onComplete。咱们只须要在onComplete 回调中,让爆炸动画开始。

tween.onComplete(function () {// 写爆炸动画})

本节残缺代码:https://github.com/hua1995116…

3. 粑粑被炸开

3.1 形态

同理炸弹用 PS 抠图把 “ 粑粑 ” 抠出一个通明的图层,就想这样。(略微有点毛刺没关系,理论的粑粑也没这么大, 所以不太容易看到毛刺,也能够通过微调给他修复)

.feces {
  position: absolute;
  background-image: url(./feces.png);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 80px;
  height: 80px;
  transform-origin: center;
}
// 创立一个粑粑元素
function createfeces(scale = 1) {const fece = document.createElement('div');
  fece.className = 'feces';
  // 因为粑粑有大有小,有方向,因而预留了值。const symbol = Math.random() > 0.5 ? 1 : -1;
  fece.style.transform = `scale(${scale * 1.1}) rotate(${symbol * 20 * Math.random()}deg)`
  return fece;
}

3.2 地位

咱们能够看到粑粑是从炸裂的中央飞进去的,飞进去次要是 7 个粑粑,其中两头的最大,其余的随着离核心粑粑越远而越小,排列的形式是相似于一个圆,然而又不是那么法则。

因而咱们能够先通过最简略的形式来实现,就是以一个圆形盘绕。一个圆是 360 °,咱们只须要给它均匀分成 6 等分就好。咱们盘绕的一共是 6 个粑粑,因而,每个之间是 60°。

因为咱们下面的炸弹是大抵是一个 300 * 300 的区域,因而我将 核心的坐标定为(150,150),而后随机生成一个 70 ~ 230 的 x 点,就能算出 y 值,在确定第一个点后,依据每个点之间的角度是 60°,就能计算出其余的 5 个点。

因为用中心点为 (150,150) 为圆心计算比拟麻烦,因而我将中心点移到了 (0, 0) 进行计算,最初再将所有计算出来的点都往 x 轴,y 轴平移 150。

// 计算要生成的多个粑粑的地位
// 传入的参数 num 为要生成的粑粑的数量
function randomPosition(num) {
  const radius = 80; // 圆半径
  const randomX = Math.random() * radius // 任取 0 到半径中的任意一个 x
  const y = Math.round(Math.sqrt(radius * radius - randomX * randomX)); // 确定一个第一象限在圆上的点
  const radian = Math.atan(y / randomX); // 这个点的弧度值

  const step = Math.PI * 2 / num; // 每坨屎间距的弧度值

  return new Array(num).fill(0).map((item, index) => {const r = (index * step + radian)
    // 将弧度为 0 - 2 * PI
    const tr = r > Math.PI * 2 ? r - Math.PI * 2 : r < 0 ? r + Math.PI * 2 : r;
    return {x: radius * Math.sin(tr),
      y: radius * Math.cos(tr),
    }
  })
            
}

而后咱们依照这个思路进行绘制,绘制出 6 个粑粑,再向 x 轴和 y 轴别离平移 150。

randomPosition(6).map(item => ({ x: item.x + 150, y: item.y + 150})) // 此处你也定义多于 6 个

貌似有点那味了,然而所有的都一样大,因而咱们须要解决一下,依据间隔核心远近来缩放大小,大抵写了一个,因为圆的半径为 80,每减少 80,就把粑粑的大小变成原来的 2/3。

const dis = Math.sqrt((end.x - 150) * (end.x - 150) + (end.y - 150) * (end.y - 150)); // 因为此时曾经平移 150,因而须要计算间隔中心点的间隔
const r = Math.pow(2/3, dis / length); // 要缩放的比例

然而实在场景中,咱们摆放地位会更加随机,因而我给每个粑粑的地位减少了一个随机值,并且核心粑粑会更加偏差于左上角,也更加了肯定的随机值。

function randomPosition(num) {
...
return new Array(num).fill(0).map((item, index) => {const r = (index * step + radian)
  const tr = r > Math.PI * 2 ? r - Math.PI * 2 : r < 0 ? r + Math.PI * 2 : r;
  return {
    // 减少随机值
    x: length * Math.sin(tr) + (Math.random() > 0.5 ? 1 : -1) * 10 * Math.random(),
    y: length * Math.cos(tr) + (Math.random() > 0.5 ? 1 : -1) * 10 * Math.random(),}
})
}

3.3 角度

最初们只须要装点一下每个粑粑的角度就能够啦。

function createfeces(scale) {const fece = document.createElement('div');
  fece.className = 'feces';
  const symbol = Math.random() > 0.5 ? 1 : -1; // 生成 -20 ~ 20 之间的随机角度
  fece.style.transform = `scale(${scale}) rotate(${symbol * 20 * Math.random()}deg)`
  fece.style.opacity = '0';
  return fece;
}

3.4 动画

因为这里和丢炸弹相似,我就不具体开展讲了。须要提一下的是,因为粑粑是先从炸弹地位进去,再缓缓下来,这里咱们须要利用两次 Tween 补间动画。

// 一开始的呈现时候的动画,从爆炸口冲进去
function initFece(end) {
    ...
  const start = {x: 0, y: 100, z: 0}; // 爆炸口
  const tween = new TWEEN.Tween(start)
  .to({...end, z: 1}, 100)
  .easing(TWEEN.Easing.Linear.None)
  .onUpdate(function () {fece.style.setProperty('top', `${start.y}px`);
    fece.style.setProperty('left', `${start.x}px`);
    fece.style.setProperty('opacity', `${start.z}`);
  })
  .onComplete(function () {initDown(start, fece).start(); // 冲出实现,进行着落通明动画})
  return tween;
}
// 着落同时变通明动画
function initDown(start, fece) {
  const s = {
    y: start.y,
    o: 1,
  };
  const e = {y: start.y + 80, o: 0};
  const tween = new TWEEN.Tween(s)
  .to(e, 2000 + 500 * Math.random())
  .easing(TWEEN.Easing.Quadratic.In)
  .onUpdate(function () {fece.style.setProperty('top', `${s.y}px`);
    fece.style.setProperty('opacity', `${s.o}`);
  })
  .onComplete(function () {})
  return tween;
}

最初成果

本节残缺代码:https://github.com/hua1995116…

3.5 总结

因为这一节比拟长,总结一下常识

  • 先利用 1 = x² + y² 圆轨迹的个性,建设初步地位
  • 再通过退出随机值,使得整个散布略微不那么规定一些
  • 给粑粑增加随机角度
  • 让核心粑粑更趋向于爆炸口
  • 增加链式动画呈现和着落

4. 所有人触动

这个性能只须要用简略 css 动画就能实现这里就不再具体讲啦,有趣味的小伙伴能够实现一下放到评论里~

结尾

本次纯属于一个对这个成果好奇的摸索,不是 100% 还原动画。自己也不是专门写动画的,上述库也是第一次应用,写的可能不那么业余(有任何问题欢送评论区指出谬误)。然而心愿能给大家提供一个好玩的思路,在做动画的时候能够利用 lottietween 两个库,以及将简单问题简单化,把不法则的货色变成法则的货色,把简单的货色变成简略的,最初再一步步地去深入。同时感激楠溪对本文的校对。

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

  • 2021 前端学习门路书单—自我成长之路:570+点赞量
  • 教你实现微信 8.0『炸裂』的🎉表情特效:400+点赞量
  • 从破解某设计网站谈前端水印 (具体教程):790+ 点赞量
  • 从王者光荣里我学会的前端老手指引:260+点赞量
  • 一文带你层层解锁「文件下载」的神秘:140+点赞量
  • 10 种跨域解决方案(附终极大招):940+点赞量

结语

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

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

退出移动版