Javascript移动圆圈

Javascript moving circle

本文关键字：移动 Javascript      更新时间：2023-09-26

我需要编程一个基于html的监控表面。

对于曲面，我需要对从x移动到y的圆进行编码，并且只有当数字xy大于xy时。很难解释，但实际上很相似，就像上的一样

https://www.solarweb.com

点击顶部的"点击立即尝试预览"，然后点击"查看演示"并选择第一个系统"Fronius AT Sattledt Hybrid 2"

请参见左侧的动画。

我仍然能够得到一个从div开始到结束的圆。但只有一圈！有可能在一排中有更多的圆圈做同样的事情吗？

也许有人能帮我：）

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Moving Bullet</title>
    <meta charset="utf8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
    #energieFluss {
    width: 900px;
    height: 500px;
    border: 5px black solid;
    overflow: hidden;
    }
    #bullet {
    position: relative;
    left: 50px;
    top: 25px;
    }
    </style>


<body>
<div id="energieFluss" width="900px" height="500px" color="red">
    <img id="bullet" src="ball-blau.png" height ="25" width= "25">
    </div>
<script>
        var Bullet = document.querySelector ("#bullet");
        var currentPos = 0;
        var requestAnimationFrame = window.requestAnimationFrame ||
                                    window.mozRequestAnimationFrame ||
                                    window.webkitRequestAnimationFrame ||
                                    window.msRequestAnimationFrame;

        function moveBullet () {
            currentPos += 8;

            Bullet.style.left = currentPos + "px";

            if (Math.abs(currentPos) >= 900) {
            currentPos = -50;
            }

            requestAnimationFrame(moveBullet);
        }
        moveBullet ();
</script>
</body>

我认为您在这里想要做的是动态创建图像元素，然后为它们设置动画。您还可以做其他有趣的事情，比如在画布上渲染，或者使用JavaScript渲染库来更有效地进行渲染。

要在飞行中创建元素，请执行以下操作：

var balls = [];
// Run this in a loop to add each ball to the balls array.
var img = document.createElement("img");
img.src = "ball-blau.png";
img.height = 25;
img.width = 25;
document.getElementById("energieFluss").appendChild(img);
balls.push(img)

后期思考：

你可以静态地定义你的图像元素和动画多个元素。如果您已经知道如何为一个元素设置动画，那么您可以将相同的知识应用于多个元素。

相关文章：