JavaScript实战 - 一个能够做圆周运动的模型

一个能够做圆周运动的模型

- [HTML 文件](#HTML 文件)
- [JavaScript 文件](#JavaScript 文件)
- 总结

作者：逍遥Sean

简介：一个主修Java的Web网站\游戏服务器后端开发者

主页：https://blog.csdn.net/Ureliable

觉得博主文章不错的话，可以三连支持一下~ 如有需要我的支持，请私信或评论留言！

下面是一个简单的示例，展示如何使用 HTML 和 JavaScript 来实现一个圆周运动的动画效果。这个例子将创建一个圆形图形，在页面上以圆周运动的方式移动。

HTML 文件

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 文件

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

来创建一个简单的圆周运动动画。你可以根据需要修改半径、速度、初始位置等参数，以及添加更多的样式和交互效果来丰富这个例子。