js圆周运动动画_js圆周运动详解
首先得感谢segmentfault的回答让我理解了圆周运动，否则我怎么都不明白，我还查了一大堆的资料
好的，那就开始讲讲圆周运动吧，要做圆周运动，就要用到三角函数和角度转弧度的知识。我们先把最基本代码贴上
html代码
圆周运动css代码
* {
margin: 0;
padding: 0;
}
#red {
position: relative;
margin: 200px auto;
width: 400px;
height: 400px;
background: red;
border-radius: 50%;
}
#blue {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: blue;
border-radius: 50%;
}
这上面的代码没问题，对吧，就是布局而已。
那怎么解决呢。咱们先看图，
circle1.png
图中o是圆心，A是大圆上的点，a是角度，点A到圆心O的距离是半径。
由图和经验来讲，我们只需算出每一度的x,y就可以了，我们都知道
sin(a) = y / r,
cos(a) = x / r,
弧度=圆周率π / 180 * 角度a
而Math.sin,cos中用的是弧度， 所以我们可以得出，
Math.sin(圆周率π / 180 * 角度a ) = x / 半径r；
Math.cos(圆周率π / 180 * 角度a ) = y / 半径r；
最后可以推导出
x = Math.sin(圆周率π / 180 * 角度a) * 半径r；
y = Math.cos(圆周率π / 180 * 角度a) * 半径r；
window.onload = function () {
let blue = $("blue");
//起始角度
let degree = 0;
setInterval(function () {
//每个50ms +1个角度
degree += 1;
//计算弧度
let rad = Math.PI / 180 * degree;
//计算大圆上每一个A的x,y
let x = Math.sin(rad) * 200;
let y = Math.cos(rad) * 200;
//
blue.style.left = x + "px";
blue.style.top = y + "px";
}, 50);
}
但是如果我们直接把x，y设置给小圆的x,y是不行的，原因是它默认是围着原点(0，0)旋转，所以你要先指定圆心位置，那这个圆心位置又是多少呢。我布局中的红色圆的width是400，那么圆心就是(200，200)吗？当然不是了，(200，200)确实是红色圆的圆心，但不是蓝色圆围着转的圆的圆心，我们必须减去蓝色圆的半径，即圆心是(150，150)。因为元素定位的时候是按照元素左上角位置定位的，而不是元素的中心定位，所以呢要减去50。如图
circle2.png
图中A的位置是正中心，但是由于元素定位的时候是按照元素左上角位置定位的，所以点B的位置才是真正的圆心，故最后js代码是 ↓↓↓↓↓
window.onload = function () {
let blue = $("blue");
//x,y表示大圆心坐标
let ox = 150;
let oy = 150;
//起始角度
let degree = 0;
setInterval(function () {
//每个50ms +1个角度
degree += 1;
//计算弧度
let rad = Math.PI / 180 * degree;
//计算大圆上每一个A的x,y
let x = Math.sin(rad) * 200;
let y = Math.cos(rad) * 200;
//
blue.style.left = ox + x + "px";
blue.style.top = oy + y + "px";
}, 50);
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！