JS：让子元素做圆弧运动

马黑黑 · 发表于 2023-7-15 12:07

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2023-7-15 12:07

代码

<style>
#mydiv {
margin: 20px auto 0;
position: relative;
width: 740px;
height: 460px;
border: 1px solid gray;
}
#ball {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background: lightgreen;
box-shadow: inset 0 0 18px 0 darkgreen;
}
</style>
<div id="mydiv">
<div id="ball"></div>
</div>
<script>
let mx = mydiv.offsetWidth / 2,
my = mydiv.offsetHeight / 2,
bx = ball.offsetWidth / 2,
by = ball.offsetHeight / 2
a = 0
canMove = true
aniId = null;
let circle = () => {
a = a < 360 ? a + 1 : 0;
let x1 = mx + (mx - bx) * Math.cos(a * Math.PI / 180) - bx,
y1 = my + (my - by) * Math.sin(a * Math.PI / 180) - by;
ball.style.cssText += `
left: ${x1}px;
top: ${y1}px;
`;
canMove ? aniId = requestAnimationFrame(circle) : cancelAnimationFrame(aniId);
}
circle();
mydiv.onclick = () => {
canMove = !canMove;
if(canMove) aniId = requestAnimationFrame(circle);
}
</script>

复制代码

马黑黑 · 发表于 2023-7-15 12:15

获得元素在圆周上的XY坐标：

x1 = x0 + r * cos(angle * π /180);
y1 = y0 + r * sin(angle * π /180);

转换成 JS：

x1 = x0 + r * Math.cos(angle * Math.PI / 180);
y1 = y0 + r * Math.sin(angle * Math.PI / 180);

其中，x0、y0 为圆心XY坐标，r 为半径；angle 是夹角，分别转换成弧度，再用余弦、正弦函数进行处理。

要让子元素以内切方式运动，需要半径减去子元素的宽/高的一半，总结果再减去子元素宽/高的一半。

马黑黑 · 发表于 2023-7-15 12:17

设计好 offset-path 路径，也可以使用 CSS 的关键帧动画实现类似功能，而且可以规避过多的编程，效果也更为稳定。

马黑黑 · 发表于 2023-7-15 12:22

代码中，实现运动的依赖在变量 a，它代表 angle（角度）：

a = a < 360 ? a + 1 : 0;

当 a 小于 360 时，a 不断加 1 ，当它超过了 360，则让它变回 0，从头再来。理论上应该变成 1 最好，因为 360 和 0 是重合的，当 a 变为 360度时，它的下一个度数应该 361