如何用代码实现一个黑洞效果

最新推荐文章于 2022-04-21 11:25:40 发布

阿里巴巴中间件

最新推荐文章于 2022-04-21 11:25:40 发布

阅读量649

点赞数 1

本文链接：https://blog.csdn.net/weixin_39860915/article/details/98863917

版权

640?wx_fmt=jpeg

本文来源于阿里巴巴前端技术专家叶斋在内网的「如何实现某些动画」的系列分享，该系列分享包括如何用代码实现爆炸、黑洞、蜘蛛、扫描等，阿里巴巴中间件受权发布。

- 正文开始 -

因为对动画比较了解的缘故，团队的其他同学时常会找我讨论「如何实现某些动画」，在与同学们的交流过程中，我发现，对大部分前端工程师而言，编写前端动画的难度并不在前端技术本身，而是对动画背后的规律缺乏理解，在尝试用数学语言表达动画时感到困难。

所以，在入门动画的过程中，往往出现这样的情况：即虽然对动画相关的 API 了如指掌，但是一旦遇到实际问题，就显得缺乏思路，无从下手。

其实，掌握动画规律并不困难，甚至可以说是极为简单。而实现各种各样的粒子系统，是一种很好的锻炼动画思路的实践。为此，我尝试推出一个的博文系列「每日一则粒子效果」，每篇文章分析一个简单的小例子，希望能够帮助到大家。

这一篇，我们来看看如何用代码实现一个黑洞效果。点击文末阅读原文，可获取实现代码。

640?wx_fmt=gif

黑洞效果：其实就是粒子一边旋转一边靠近（被吸过去）中心点。在这个粒子中，我们使用极坐标(theta, r)来代替直角坐标(x,y)描述一个点的位置。

640?wx_fmt=jpeg

坐标用来描述点，其含义是，唯一的坐标可以确定唯一的点。在直角坐标中，根据(x,y)两个坐标值就可以（无需其他任何信息）确定该点的位置，而在极坐标下，同样根据(theta, r)两个坐标值，也可以（无需其他任何信息）确定该点的位置。极坐标和直角坐标之间可以进行转化，如图所示：x = r * cos(theta)，y = r * sin(theta)。

这个模型中需要注意的是：在直觉上，黑洞效果的一个显著特点，就是粒子被吸入进去的时候，其速度是越来越快的，当粒子比较接近黑洞中心的时候，粒子是以非常快的速度旋转和逼近黑洞中心，然后消失。这其实与我们所学习的能量守恒定律有类似之处，当粒子越来越靠近黑洞，其旋转半径越来越小，势能就转化为了动能，所以粒子的线速度就越来越快。利用这「近似的能量守恒」，就可以制作出比较逼真的黑洞效果了。

在初始化的时候，为每个粒子生成随机的极坐标 theta 和 radius，然后生成限定在特定区间内的随机速度。

这里需要注意的是，radius 和 speed 需要在特定区间内，才能有比较好的效果，如果粒子的速度过快或半径过大，在真实环境下是可能逃离黑洞的，制作动画时强行使其被吸入黑洞，会使动画的效果打折。

points.push({  ...  theta: Math.random() * Math.PI * 2,  radius: RADIUS * (Math.random() * 0.5 + 0.1),  speed: SPEED * (Math.random() * 0.6 + 0.2)})

每一帧粒子位置的逻辑如下：

var theta = p.theta;var radius = p.radius;var speed = p.speed;var dTheta = speed * step / radius;var dRadius = (8000 / (radius * radius) - speed * speed) * step / 10;var dSpeed = Math.sqrt(dRadius) / 500;p.theta += dTheta;p.radius -= dRadius;p.speed += dSpeed;