如何用CSS/JavaScript实现飞船G力可视化的无限运行加速度计？

绝对可以用CSS和JavaScript实现这个类似地震图的飞船G力可视化效果！我给你准备了一个完整的可运行示例，既能持续实时更新，还能生成模拟飞船受力的随机G力数据，完全贴合你的需求。

• 用HTML搭建基础的可视化容器，包含基准线（代表0G）和数据轨迹区域
• 用JavaScript定时生成模拟飞船的随机G力数据，同时控制数据点的绘制与容器滚动
• 通过CSS定位和变换来实现轨迹的动态绘制，用颜色区分基准线和实时数据轨迹
• 借助requestAnimationFrame实现流畅的动画更新，同时清理旧数据避免性能问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>飞船G力加速度计</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #1a1a2e;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 2rem;
            margin: 0;
        }

        .accelerometer-container {
            width: 800px;
            height: 300px;
            background-color: #16213e;
            border: 2px solid #0f3460;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }

        .baseline {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #e94560;
            transform: translateY(-50%);
            z-index: 1;
        }

        .data-points {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow-x: hidden;
        }

        .g-force-label {
            margin-top: 1.5rem;
            font-size: 1.3rem;
        }

        .g-force-label span {
            color: #00ff88;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>飞船实时G力监测</h1>
    <div class="accelerometer-container">
        <div class="baseline"></div>
        <div class="data-points" id="dataPoints"></div>
    </div>
    <div class="g-force-label">当前G力: <span id="currentG">0.0</span>G</div>

    <script>
        const dataPointsContainer = document.getElementById('dataPoints');
        const currentGElement = document.getElementById('currentG');
        const containerWidth = 800;
        const containerHeight = 300;
        const baselineY = containerHeight / 2;
        let currentX = containerWidth;
        const stepDistance = 5; // 每次数据点的横向间隔

        // 生成模拟飞船的随机G力数据（范围-5G到+5G，避免突变）
        function generateRandomGForce() {
            // 用平滑的随机值模拟真实飞船的受力波动
            const baseG = parseFloat(currentGElement.textContent) || 0;
            const randomDelta = (Math.random() * 2 - 1).toFixed(1);
            return Math.max(-5, Math.min(5, baseG + parseFloat(randomDelta))).toFixed(1);
        }

        // 添加新数据点并更新视图
        function updateAccelerometer() {
            const gForce = parseFloat(generateRandomGForce());
            currentGElement.textContent = gForce.toFixed(1);

            // 计算数据点Y坐标：基线为0G，正G向上偏移，负G向下偏移
            const pointY = baselineY - (gForce * 20); // 20为缩放因子，调整波动可见度

            // 创建圆形数据点
            const point = document.createElement('div');
            point.style.position = 'absolute';
            point.style.left = `${currentX}px`;
            point.style.top = `${pointY}px`;
            point.style.width = '4px';
            point.style.height = '4px';
            point.style.backgroundColor = '#00ff88';
            point.style.borderRadius = '50%';
            point.style.zIndex = 2;

            dataPointsContainer.appendChild(point);

            // 绘制与上一个点的连线
            if (dataPointsContainer.children.length > 2) {
                const prevPoint = dataPointsContainer.children[dataPointsContainer.children.length - 3];
                const prevX = parseFloat(prevPoint.style.left);
                const prevY = parseFloat(prevPoint.style.top);

                const line = document.createElement('div');
                line.style.position = 'absolute';
                line.style.left = `${prevX}px`;
                line.style.top = `${prevY}px`;
                // 计算线条长度和角度
                const dx = currentX - prevX;
                const dy = pointY - prevY;
                const length = Math.sqrt(dx * dx + dy * dy);
                const angle = Math.atan2(dy, dx) * 180 / Math.PI;

                line.style.width = `${length}px`;
                line.style.height = '2px';
                line.style.backgroundColor = '#00ff88';
                line.style.transformOrigin = 'left center';
                line.style.transform = `rotate(${angle}deg)`;
                line.style.zIndex = 2;

                dataPointsContainer.insertBefore(line, point);
            }

            // 向左移动所有元素，模拟实时滚动
            currentX -= stepDistance;
            if (currentX < 0) {
                // 移除超出容器的旧元素，防止DOM堆积
                while (dataPointsContainer.children.length > 0) {
                    const firstChild = dataPointsContainer.children[0];
                    const childX = parseFloat(firstChild.style.left);
                    if (childX < -10) {
                        dataPointsContainer.removeChild(firstChild);
                    } else {
                        break;
                    }
                }
                currentX = 0;
            }

            // 持续更新动画
            requestAnimationFrame(updateAccelerometer);
        }

        // 启动监测
        updateAccelerometer();
    </script>
</body>
</html>

• 数据模拟：生成的G力数据会基于上一次的值做小幅度波动，避免突然跳变，更贴近真实飞船的受力情况
• 可视化缩放：通过20这个缩放因子，把G力数值转化为容器内的像素偏移，让波动效果更明显
• 性能优化：当数据点超出容器左侧时，会自动移除旧元素，防止DOM元素过多导致页面卡顿
• 流畅动画：用requestAnimationFrame替代setInterval，让动画同步浏览器刷新频率，运行更流畅

内容的提问来源于stack exchange，提问作者Blank