《逃离引力》的思路分享
本帖最后由 马黑黑 于 2023-12-11 13:02 编辑一个简简单单的帖子：逃脱引力 (52qingyin.cn) 或 逃脱引力 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! (huachaowang.com)
这里主要分享粒子运动的实现：
（一）运动形态 - 从中间向四周缓缓而行，循环不已
父元素 id="papa" 的CSS选择器 #papa 里有两个语句， display: grid; place-items: center; ，是设定包括粒子在内的子元素的初始位置，都在父元素的中心处。这是父定子位。
CSS关键帧动画：
@keyframes moving {
from { opacity: 0; transform: translate(0,0); }
to { opacity: 1; transform: translate(var(--x0),var(--y0)); }
}出发时全透明，出发点是父元素的中心；到了目的地，全不透明，移动到 --x0、--y0 处。每一个粒子都按这个 moving 运动。
然后通过 JS，利用三角函数正余弦原理与圆周上的点坐标的关系，计算出 --x0 和 --y0的值，从而让粒子各自朝向自己的方向行进。
（二）粒子的构建
粒子首先拥有自己的CSS样式，使用自定义选择器mov-ball，对应自定义标签 mov-ball，命名规则是需要一个短连线即可。在实体HTML代码中并没有 mov-ball 的身影，它们由 JS 生成，生成过程追加每一个粒子必须的CSS属性，其中包含有上述的CSS变量值，用 cssText 来完成：
let all = 100;
for(let i = 0; i < all; i++) {
let movBall = document.createElement('mov-ball');
let hudu = Math.PI / 180 * 360 / all * i;
let xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
movBall.style.cssText += `
--x0: ${xx}px;
--y0: ${yy}px;
background: #${Math.random().toString(16).substr(-6)};
animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
`;
papa.prepend(movBall);
}同时注意一个小技巧的应用， papa.prepend(movBall) ，prepend() 方法和 append() 方法都是追加子元素到父元素中，prepend 是追加到原有子元素的前面，append() 方法是追加到原有子元素的最后面。这里之所以改用 prepend，是为了让被追加的粒子在层级序列上降级，以避免它们干扰交互按钮的操作。当然，用 append 方法也不是不可以，我们过去经常使用，但都得设法提升具有交互点击功能的元素的层级（例如， z-index : 1000; ），改用 prepend 后就不必了。
核心在数学的应用。学好数理化，做个简单帖子谁害怕？
粒子每隔3.6度（为了计算化为了弧度）出发呗，距离取600有点大吧，长边只有512，取这么大，短边上还没来得及变成opacity: 1就飞出去了啊。哦，不对，短边320，长边和短边组成的最长的斜边是603.8，还真的需要取600呢{:4_173:} 这个里面还是有不懂的，css里的mov-ball { ........animation: imov 6s infinite; }，这个animation起什么作用？
@keyframes moving 是对应的js里的值，css里的animation是随意设的，要被覆盖的么？不设可以么？ 主要是这个里面的animation: imov这个名称没被用到。
比如background: tan;最后被background: #${Math.random().toString(16).substr(-6)};取代，至少名字是对应的啊。 我的问题都比较外行，黑黑别笑话。{:4_173:}其实昨天就想问了，后来忘了，正好今天有这个帖子{:4_173:} 红影 发表于 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属性，原则上，后面的设置会覆盖前面的设置，所以删不删 ...
哦哦，原来是这样。嗯嗯，现在明白了{:4_187:} 马黑黑 发表于 2023-12-11 13:59
这里是取圆了，其实可以取椭圆。但是从效果上看这个没有多大关系，取圆算法上会简化不少。
是的，取圆计算上要简单许多。不过两者相差的确不大，当然越简便越好{:4_204:} 马黑黑 发表于 2023-12-11 14:02
之前说过，CSS的设置，后面新的设置覆盖前面的设置（当然也有防止设置被覆盖的方法）
知道了，前面可以随意设置，因为都会被后面的设置覆盖的{:4_204:} 刚看了那个逃离引力帖的效果，就是说小粒子可以自己调试的 吃瓜群众乙来了……{:4_187:} 红影 发表于 2023-12-11 14:37
哦哦，原来是这样。嗯嗯，现在明白了
其实应该早明白的 红影 发表于 2023-12-11 14:39
是的，取圆计算上要简单许多。不过两者相差的确不大，当然越简便越好
由于使用 delay 参数，距离大一点也没关系的 马黑黑 发表于 2023-12-11 19:19
其实应该早明白的
这个.svg貌似很多地方不能上传，我试着修改一下颜色，结果发现没地方传呢{:4_173:} 马黑黑 发表于 2023-12-11 19:25
由于使用 delay 参数，距离大一点也没关系的
嗯嗯，效果好看就好{:4_187:} 红影 发表于 2023-12-11 20:33
这个.svg貌似很多地方不能上传，我试着修改一下颜色，结果发现没地方传呢
传论坛就好 红影 发表于 2023-12-11 20:35
嗯嗯，效果好看就好
矩形外也看不到 马黑黑 发表于 2023-12-11 22:10
传论坛就好
哦，对的，这也是个办法。试了好多地方都没法传{:4_173:}