《逃离引力》的思路分享

马黑黑

一个简简单单的帖子：逃脱引力 (52qingyin.cn) 或 逃脱引力 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

这里主要分享粒子运动的实现：

（一）运动形态 - 从中间向四周缓缓而行，循环不已

父元素 id="papa" 的CSS选择器 #papa 里有两个语句， display: grid; place-items: center; ，是设定包括粒子在内的子元素的初始位置，都在父元素的中心处。这是父定子位。

CSS关键帧动画：

1. @keyframes moving {
   
2.         from { opacity: 0; transform: translate(0,0); }
   
3.         to { opacity: 1; transform: translate(var(--x0),var(--y0)); }
   
4. }

复制代码

出发时全透明，出发点是父元素的中心；到了目的地，全不透明，移动到 --x0、--y0 处。每一个粒子都按这个 moving 运动。

然后通过 JS，利用三角函数正余弦原理与圆周上的点坐标的关系，计算出 --x0 和 --y0  的值，从而让粒子各自朝向自己的方向行进。

（二）粒子的构建

粒子首先拥有自己的CSS样式，使用自定义选择器mov-ball，对应自定义标签 mov-ball，命名规则是需要一个短连线即可。在实体HTML代码中并没有 mov-ball 的身影，它们由 JS 生成，生成过程追加每一个粒子必须的CSS属性，其中包含有上述的CSS变量值，用 cssText 来完成：

1. let all = 100;
   
2. for(let i = 0; i < all; i++) {
   
3.         let movBall = document.createElement('mov-ball');
   
4.         let hudu = Math.PI / 180 * 360 / all * i;
   
5.         let xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
   
6.         movBall.style.cssText += `
   
7.                 --x0: ${xx}px;
   
8.                 --y0: ${yy}px;
   
9.                 background: #${Math.random().toString(16).substr(-6)};
   
10.                 animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
    
11.         `;
    
12.         papa.prepend(movBall);
    
13. }

复制代码

同时注意一个小技巧的应用， papa.prepend(movBall) ，prepend() 方法和 append() 方法都是追加子元素到父元素中，prepend 是追加到原有子元素的前面，append() 方法是追加到原有子元素的最后面。这里之所以改用 prepend，是为了让被追加的粒子在层级序列上降级，以避免它们干扰交互按钮的操作。当然，用 append 方法也不是不可以，我们过去经常使用，但都得设法提升具有交互点击功能的元素的层级（例如， z-index : 1000; ），改用 prepend 后就不必了。

核心在数学的应用。学好数理化，做个简单帖子谁害怕？

红影

粒子每隔3.6度（为了计算化为了弧度）出发呗，距离取600有点大吧，长边只有512，取这么大，短边上还没来得及变成opacity: 1就飞出去了啊。哦，不对，短边320，长边和短边组成的最长的斜边是603.8，还真的需要取600呢

红影

这个里面还是有不懂的，css里的mov-ball { ........animation: imov 6s infinite; }，这个animation起什么作用？
@keyframes moving 是对应的js里的值，css里的animation是随意设的，要被覆盖的么？不设可以么？

红影

主要是这个里面的animation: imov这个名称没被用到。
比如background: tan;最后被background: #${Math.random().toString(16).substr(-6)};取代，至少名字是对应的啊。

红影

我的问题都比较外行，黑黑别笑话。其实昨天就想问了，后来忘了，正好今天有这个帖子

马黑黑

红影 发表于 2023-12-11 13:53
这个里面还是有不懂的，css里的mov-ball { ........animation: imov 6s infinite; }，这个animation起什么 ...

测试用的，没写JS前调试一下，然后没有删掉。CSS属性，原则上，后面的设置会覆盖前面的设置，所以删不删都行

马黑黑

红影 发表于 2023-12-11 13:46
粒子每隔3.6度（为了计算化为了弧度）出发呗，距离取600有点大吧，长边只有512，取这么大，短边上还没来得 ...

这里是取圆了，其实可以取椭圆。但是从效果上看这个没有多大关系，取圆算法上会简化不少。

马黑黑

红影 发表于 2023-12-11 13:56
我的问题都比较外行，黑黑别笑话。其实昨天就想问了，后来忘了，正好今天有这个帖子

之前说过，CSS的设置，后面新的设置覆盖前面的设置（当然也有防止设置被覆盖的方法）

红影

马黑黑 发表于 2023-12-11 13:57
测试用的，没写JS前调试一下，然后没有删掉。CSS属性，原则上，后面的设置会覆盖前面的设置，所以删不删 ...

哦哦，原来是这样。嗯嗯，现在明白了

红影

马黑黑 发表于 2023-12-11 13:59
这里是取圆了，其实可以取椭圆。但是从效果上看这个没有多大关系，取圆算法上会简化不少。

是的，取圆计算上要简单许多。不过两者相差的确不大，当然越简便越好

红影

马黑黑 发表于 2023-12-11 14:02
之前说过，CSS的设置，后面新的设置覆盖前面的设置（当然也有防止设置被覆盖的方法）

知道了，前面可以随意设置，因为都会被后面的设置覆盖的

冬天的雨

刚看了那个逃离引力帖的效果，就是说小粒子可以自己调试的

千羽

吃瓜群众乙来了……

马黑黑

红影 发表于 2023-12-11 14:37
哦哦，原来是这样。嗯嗯，现在明白了

其实应该早明白的

马黑黑

红影 发表于 2023-12-11 14:39
是的，取圆计算上要简单许多。不过两者相差的确不大，当然越简便越好

由于使用 delay 参数，距离大一点也没关系的

红影

马黑黑 发表于 2023-12-11 19:19
其实应该早明白的

这个.svg貌似很多地方不能上传，我试着修改一下颜色，结果发现没地方传呢

红影

马黑黑 发表于 2023-12-11 19:25
由于使用 delay 参数，距离大一点也没关系的

嗯嗯，效果好看就好

马黑黑

红影 发表于 2023-12-11 20:33
这个.svg貌似很多地方不能上传，我试着修改一下颜色，结果发现没地方传呢

传论坛就好

马黑黑

红影 发表于 2023-12-11 20:35
嗯嗯，效果好看就好

矩形外也看不到

红影

马黑黑 发表于 2023-12-11 22:10
传论坛就好

哦，对的，这也是个办法。试了好多地方都没法传