当前位置：首页 > JavaScript

js实现轨道

2026-04-06 05:36:38JavaScript

实现轨道动画的基本方法

使用JavaScript创建轨道动画通常涉及Canvas或SVG技术。以下是两种常见的实现方式：

Canvas实现轨道动画

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let angle = 0;
const radius = 100;
const centerX = canvas.width/2;
const centerY = canvas.height/2;

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制轨道
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI*2);
    ctx.strokeStyle = '#ccc';
    ctx.stroke();

    // 计算轨道上的点位置
    const x = centerX + Math.cos(angle) * radius;
    const y = centerY + Math.sin(angle) * radius;

    // 绘制移动物体
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, Math.PI*2);
    ctx.fillStyle = 'red';
    ctx.fill();

    angle += 0.01;
    requestAnimationFrame(animate);
}

animate();

SVG实现轨道动画

js实现轨道

const svg = document.getElementById('mySvg');
const orbit = document.createElementNS("http://www.w3.org/2000/svg", "circle");
orbit.setAttribute("cx", "150");
orbit.setAttribute("cy", "150");
orbit.setAttribute("r", "100");
orbit.setAttribute("stroke", "#ccc");
orbit.setAttribute("fill", "none");
svg.appendChild(orbit);

const object = document.createElementNS("http://www.w3.org/2000/svg", "circle");
object.setAttribute("r", "10");
object.setAttribute("fill", "red");
svg.appendChild(object);

let angle = 0;
function animate() {
    const radius = 100;
    const centerX = 150;
    const centerY = 150;

    const x = centerX + Math.cos(angle) * radius;
    const y = centerY + Math.sin(angle) * radius;

    object.setAttribute("cx", x);
    object.setAttribute("cy", y);

    angle += 0.01;
    requestAnimationFrame(animate);
}

animate();

椭圆轨道的实现方法

椭圆轨道需要调整x和y方向的半径：

// 在Canvas实现中修改位置计算
const radiusX = 150;  // 水平半径
const radiusY = 80;   // 垂直半径
const x = centerX + Math.cos(angle) * radiusX;
const y = centerY + Math.sin(angle) * radiusY;

多物体轨道系统

创建多个物体在轨道上运动：

js实现轨道

const objects = [];
const count = 5;

// 初始化多个物体
for(let i=0; i<count; i++) {
    objects.push({
        angle: Math.PI*2 * i/count,
        speed: 0.005 + Math.random()*0.01
    });
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制轨道
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI*2);
    ctx.stroke();

    // 更新并绘制每个物体
    objects.forEach(obj => {
        obj.angle += obj.speed;
        const x = centerX + Math.cos(obj.angle) * radius;
        const y = centerY + Math.sin(obj.angle) * radius;

        ctx.beginPath();
        ctx.arc(x, y, 8, 0, Math.PI*2);
        ctx.fill();
    });

    requestAnimationFrame(animate);
}

性能优化建议

使用requestAnimationFrame而不是setInterval来实现动画循环对于复杂轨道系统，考虑使用对象池技术重用对象在不需要高精度时，可以适当降低帧率

3D轨道实现

使用Three.js等3D库可以实现更复杂的轨道系统：

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

// 创建轨道环
const orbitGeometry = new THREE.TorusGeometry(5, 0.1, 16, 100);
const orbitMaterial = new THREE.MeshBasicMaterial({color: 0xaaaaaa});
const orbit = new THREE.Mesh(orbitGeometry, orbitMaterial);
scene.add(orbit);

// 创建轨道上的物体
const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({color: 0xff0000});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);

let angle = 0;
function animate() {
    angle += 0.01;
    sphere.position.x = Math.cos(angle) * 5;
    sphere.position.z = Math.sin(angle) * 5;

    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

animate();