JavaScript实战 - 一个能够做圆周运动的模型
一个能够做圆周运动的模型
- HTML 文件
- JavaScript 文件
- 总结
作者：
逍遥Sean
简介：一个主修Java的Web网站\游戏服务器后端开发者
主页：https://blog.csdn.net/Ureliable
觉得博主文章不错的话，可以三连支持一下~ 如有需要我的支持，请私信或评论留言！
下面是一个简单的示例，展示如何使用 HTML 和 JavaScript 来实现一个圆周运动的动画效果。这个例子将创建一个圆形图形，在页面上以圆周运动的方式移动。
HTML 文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Circle Motion Animation</title><style>#circle {width: 50px;height: 50px;background-color: blue;border-radius: 50%;position: absolute;}</style>
</head>
<body><div id="circle"></div><script src="circleAnimation.js"></script>
</body>
</html>
JavaScript 文件
// 获取圆形元素的引用
const circle = document.getElementById('circle');// 设定初始位置和速度
let centerX = 150; // 圆心初始 x 坐标
let centerY = 150; // 圆心初始 y 坐标
const radius = 100; // 圆的半径
let angle = 0; // 初始角度
const speed = 0.02; // 角速度// 定义动画函数
function animateCircle() {// 计算新的位置const x = centerX + radius * Math.cos(angle);const y = centerY + radius * Math.sin(angle);// 更新圆的位置circle.style.left = x + 'px';circle.style.top = y + 'px';// 增加角度，以产生圆周运动angle += speed;// 通过 requestAnimationFrame() 实现动画循环requestAnimationFrame(animateCircle);
}// 调用动画函数开始动画
animateCircle();
总结
- HTML 部分：
- 使用 < div > 元素作为圆形的图形。
- 通过 CSS 样式设置 border-radius 为 50%，使其成为一个圆形。
- JavaScript 部分：
- 获取圆形元素的引用，通过 getElementById 方法。
- 设定圆心的初始位置和半径。
- 使用 Math.cos() 和 Math.sin() 函数来计算圆周运动的 x 和 y 坐标。
- 使用 requestAnimationFrame() 来实现流畅的动画效果。
- 动画实现：
- animateCircle 函数中计算新的圆心位置，并更新圆形元素的 left 和 top 样式。
- 使用 requestAnimationFrame() 递归调用 animateCircle 函数，实现持续的动画效果。
这个例子展示了如何利用 JavaScript 和 HTML
来创建一个简单的圆周运动动画。你可以根据需要修改半径、速度、初始位置等参数，以及添加更多的样式和交互效果来丰富这个例子。