小球的运动不科学
<style>#mydiv {
margin: 50px auto 0;
width: 240px;
height: 240px;
border-radius: 50%;
background: none;
position: relative;
animation: rotate 10s infinite alternate linear;
--deg1: -120deg;
--deg2: 120deg;
}
#mydiv::before {
content: '';
position: absolute;
left: -20px;
top: -20px;
right: -20px;
bottom: -20px;
border-radius: 50%;
box-shadow: 4px 8px 28px gray, inset 0 0 160px lightgreen;
animation: rotate 10s infinite alternate linear;
--deg1: 120deg;
--deg2: -120deg;
}
li-zi {
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: olive;
animation: move 4s infinite alternate linear;
}
@keyframes move {
from { transform: translate(var(--x1),var(--y1)); }
to { transform: translate(var(--x2),var(--y2)); }
}
@keyframes rotate {
from { transform: rotate(var(--deg1)); }
to { transform: rotate(var(--deg2)); }
}
</style>
<div id="mydiv">
<li-zi></li-zi>
</div>
<script>
let lz = document.querySelector('li-zi');
let r = mydiv.offsetWidth / 2; /* 半径 */
let angle = 45; /* 初始角度 */
/* 计算初始角度下圆周点XY坐标 */
let hudu1 = Math.PI / 180 * angle;
let x1 = r + r * Math.cos(hudu1),
y1 = r + r * Math.sin(hudu1);
/* 计算对应点角度下圆周点XY坐标 */
let hudu2 = Math.PI / 180 * (angle + 180); /* 对应点角度=初始角度+180 */
let x2 = r + r * Math.cos(hudu2),
y2 = r + r * Math.sin(hudu2);
/* 将两个点的坐标值减去小球半径后赋值给CSS变量 */
lz.style.cssText += `
--x1: ${x1 - 20}px;
--y1: ${y1 - 20}px;
--x2: ${x2 - 20}px;
--y2: ${y2 - 20}px;
`;
</script>
代码
<style>
#mydiv {
margin: 50px auto 0;
width: 240px;
height: 240px;
border-radius: 50%;
background: none;
position: relative;
animation: rotate 10s infinite alternate linear;
--deg1: -120deg;
--deg2: 120deg;
}
#mydiv::before {
content: '';
position: absolute;
left: -20px;
top: -20px;
right: -20px;
bottom: -20px;
border-radius: 50%;
box-shadow: 4px 8px 28px gray, inset 0 0 160px lightgreen;
animation: rotate 10s infinite alternate linear;
--deg1: 120deg;
--deg2: -120deg;
}
li-zi {
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: olive;
animation: move 4s infinite alternate linear;
}
@keyframes move {
from { transform: translate(var(--x1),var(--y1)); }
to { transform: translate(var(--x2),var(--y2)); }
}
@keyframes rotate {
from { transform: rotate(var(--deg1)); }
to { transform: rotate(var(--deg2)); }
}
</style>
<div id="mydiv">
<li-zi></li-zi>
</div>
<script>
let lz = document.querySelector('li-zi');
let r = mydiv.offsetWidth / 2; /* 半径 */
let angle = 45; /* 初始角度 */
/* 计算初始角度下圆周点XY坐标 */
let hudu1 = Math.PI / 180 * angle;
let x1 = r + r * Math.cos(hudu1),
y1 = r + r * Math.sin(hudu1);
/* 计算对应点角度下圆周点XY坐标 */
let hudu2 = Math.PI / 180 * (angle + 180); /* 对应点角度=初始角度+180 */
let x2 = r + r * Math.cos(hudu2),
y2 = r + r * Math.sin(hudu2);
/* 将两个点的坐标值减去小球半径后赋值给CSS变量 */
lz.style.cssText += `
--x1: ${x1 - 20}px;
--y1: ${y1 - 20}px;
--x2: ${x2 - 20}px;
--y2: ${y2 - 20}px;
`;
</script>
小球从自己的第一坐标点即内圆周上的（x1,y1）出发，目的地是第二坐标点即内圆周上的（x2,y2），途径圆心，但由于母球的运动（从-120度到120度），小球实际上跟着做了弧形运动，但它实际上是做直线来回运动，每一次都会经过圆心。 好奇怪，本来小球在大球里做无序一样的运动，但是评分后，变成了沿着外环也是260的环上运动了{:4_173:}
评分还有这样的功效？我还没刷新，先看看这个玩。目估一下角度，大约从-10度逆时针走到100度的样子。 马黑黑 发表于 2023-12-26 09:32
小球从自己的第一坐标点即内圆周上的（x1,y1）出发，目的地是第二坐标点即内圆周上的（x2,y2），途径圆心， ...
因为相差180度，所以圆上的2个点形成的是直线。
小圆被大圆的运动带得做了弧形运动，这个能理解，但为什么每次都经过圆心呢？
哦，因为大圆也是绕着圆心转的吧，小圆在圆心点上不受到分力的影响，其他位置上才有分力{:4_204:} 我刷新了一下，现在的形态跟刚进帖子的时候一样了{:4_173:} 这些运动组合能得到各种运动方式，真奇特{:4_199:} 红影 发表于 2023-12-26 10:07
这些运动组合能得到各种运动方式，真奇特
宇宙的运动状态就是如此。我们现在业已知道的知识，还不能很好地解释一些宇宙现象，就是因为我们的模型其实还存在缺陷，不能完美“还原”运动的原本样貌。 红影 发表于 2023-12-26 09:59
好奇怪，本来小球在大球里做无序一样的运动，但是评分后，变成了沿着外环也是260的环上运动了
评 ...
这种现象与评分提交、刷新机制有关，提交评分后，页面是局部刷新，导致帖子的一些机制不完备。 红影 发表于 2023-12-26 10:06
因为相差180度，所以圆上的2个点形成的是直线。
小圆被大圆的运动带得做了弧形运动，这个能理解，但为什 ...
小圆球做的是沿直径运行的路线，一个周期的运动必经过该直线的任意一个点，这叫拓扑原理。圆心是直径上的一个点，所以也必须经过。 红影 发表于 2023-12-26 10:07
我刷新了一下，现在的形态跟刚进帖子的时候一样了
刷新了JS的实现机制就正常了 红影 发表于 2023-12-26 10:06
因为相差180度，所以圆上的2个点形成的是直线。
小圆被大圆的运动带得做了弧形运动，这个能理解，但为什 ...
小球从来不偏移它自身的运动直线，它的奇妙的轨迹是母球旋转造成的。 马黑黑 发表于 2023-12-26 11:41
宇宙的运动状态就是如此。我们现在业已知道的知识，还不能很好地解释一些宇宙现象，就是因为我们的模型其 ...
宇宙里的运动也是受到各种外力的影响吧，宇宙现象除了模拟，可能还需要其他的分析。 马黑黑 发表于 2023-12-26 11:43
这种现象与评分提交、刷新机制有关，提交评分后，页面是局部刷新，导致帖子的一些机制不完备。
原来是这样，反正看到那个变化觉得很奇特{:4_173:} 马黑黑 发表于 2023-12-26 11:45
小圆球做的是沿直径运行的路线，一个周期的运动必经过该直线的任意一个点，这叫拓扑原理。圆心是直径上的 ...
这个直径上的点多了去了，只有圆心是必然经过的啊。 马黑黑 发表于 2023-12-26 11:46
刷新了JS的实现机制就正常了
是的，只是前面没舍得刷新，想观察一下{:4_173:} 马黑黑 发表于 2023-12-26 11:47
小球从来不偏移它自身的运动直线，它的奇妙的轨迹是母球旋转造成的。
嗯嗯，是的，小球本质上一直都是在做直线运动。 红影 发表于 2023-12-26 12:06
嗯嗯，是的，小球本质上一直都是在做直线运动。
这是参照的问题：如果你跟着目前一样旋转，你看到的小球运动是直线的{:4_170:} 红影 发表于 2023-12-26 12:05
这个直径上的点多了去了，只有圆心是必然经过的啊。
所有的点都必须经过 红影 发表于 2023-12-26 12:03
宇宙里的运动也是受到各种外力的影响吧，宇宙现象除了模拟，可能还需要其他的分析。
问题是，我们能观察的范围有限，我们根本不知道宇宙的总运动形态，霍金提出的理论目前也仅是在人类对宇宙的认知范围内去完成的