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();

总结

  1. HTML 部分:
  • 使用 < div > 元素作为圆形的图形。
  • 通过 CSS 样式设置 border-radius 为 50%,使其成为一个圆形。
  1. JavaScript 部分:
  • 获取圆形元素的引用,通过 getElementById 方法。
  • 设定圆心的初始位置和半径。
  • 使用 Math.cos() 和 Math.sin() 函数来计算圆周运动的 x 和 y 坐标。
  • 使用 requestAnimationFrame() 来实现流畅的动画效果。
  1. 动画实现:
  • animateCircle 函数中计算新的圆心位置,并更新圆形元素的 left 和 top 样式。
  • 使用 requestAnimationFrame() 递归调用 animateCircle 函数,实现持续的动画效果。

这个例子展示了如何利用 JavaScript 和 HTML

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

相关推荐
Asort1 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
真夜1 小时前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
艾小码1 小时前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
干就完了11 小时前
js对象常用方法都在这,使用时想不到?不存在的
前端·javascript
艾小码1 小时前
还在硬邦邦跳转页面?Vue这3招让应用丝滑如德芙!
前端·javascript·vue.js
子兮曰2 小时前
🚀前端依赖配置避坑指南:深度解析package.json中devDependencies的常见误解
前端·javascript·npm
forever_Mamba2 小时前
实现一个高性能倒计时:从踩坑到最佳实践
前端·javascript
小帆聊前端2 小时前
JS 原型链深度解读:从混乱到通透,掌握 90% 前端面试核心
javascript
子兮曰2 小时前
浏览器与 Node.js 全局变量体系详解:从 window 到 global 的核心差异
前端·javascript·node.js
召摇2 小时前
API 设计最佳实践 Javascript 篇
前端·javascript·vue.js