当前位置：首页 > JavaScript

js实现舞蹈

2026-03-02 07:37:39JavaScript

使用CSS动画和JavaScript实现舞蹈效果

通过CSS关键帧动画定义舞蹈动作，JavaScript控制动画的触发和交互。以下是一个简单实现方案：

<!DOCTYPE html>
<html>
<head>
    <style>
        .dancer {
            width: 100px;
            height: 100px;
            background-color: #f06;
            position: absolute;
            animation: dance 2s infinite;
        }

        @keyframes dance {
            0% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-50px) rotate(10deg); }
            50% { transform: translateY(0) rotate(-10deg); }
            75% { transform: translateY(-30px) rotate(5deg); }
            100% { transform: translateY(0) rotate(0deg); }
        }
    </style>
</head>
<body>
    <div class="dancer" id="dancer"></div>

    <script>
        const dancer = document.getElementById('dancer');

        // 点击时改变舞蹈速度
        dancer.addEventListener('click', () => {
            const randomSpeed = Math.random() * 3 + 0.5;
            dancer.style.animationDuration = `${randomSpeed}s`;
        });

        // 鼠标移动时跟随
        document.addEventListener('mousemove', (e) => {
            dancer.style.left = `${e.clientX - 50}px`;
            dancer.style.top = `${e.clientY - 50}px`;
        });
    </script>
</body>
</html>

使用Canvas绘制动态舞蹈角色

通过Canvas API和requestAnimationFrame实现更复杂的舞蹈动画：

js实现舞蹈

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = 400;
canvas.height = 400;
const ctx = canvas.getContext('2d');

let angle = 0;
const limbs = [
    { length: 80, angle: 0, speed: 0.05 },
    { length: 80, angle: Math.PI, speed: 0.05 },
    { length: 60, angle: Math.PI/2, speed: 0.07 },
    { length: 60, angle: 3*Math.PI/2, speed: 0.07 }
];

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(200, 200, 30, 0, Math.PI * 2);
    ctx.fillStyle = '#ff6b6b';
    ctx.fill();

    limbs.forEach(limb => {
        limb.angle += limb.speed;
        const x = 200 + Math.cos(limb.angle + angle) * limb.length;
        const y = 200 + Math.sin(limb.angle + angle) * limb.length;

        ctx.beginPath();
        ctx.moveTo(200, 200);
        ctx.lineTo(x, y);
        ctx.lineWidth = 10;
        ctx.strokeStyle = '#4ecdc4';
        ctx.stroke();
    });

    angle += 0.02;
    requestAnimationFrame(animate);
}

animate();

使用Three.js创建3D舞蹈动画

对于更高级的3D舞蹈效果，可以使用WebGL库Three.js：

js实现舞蹈

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();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建舞蹈角色
const geometry = new THREE.BoxGeometry(1, 2, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const dancer = new THREE.Mesh(geometry, material);
scene.add(dancer);

// 添加肢体
const armLeft = new THREE.Mesh(
    new THREE.CylinderGeometry(0.2, 0.2, 1),
    new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
armLeft.position.set(-1, 0.5, 0);
dancer.add(armLeft);

// 动画循环
function animate() {
    requestAnimationFrame(animate);

    // 舞蹈动作
    dancer.rotation.y += 0.01;
    armLeft.rotation.z = Math.sin(Date.now() * 0.005) * 0.5;

    renderer.render(scene, camera);
}

camera.position.z = 5;
animate();

使用现成的动画库

对于快速实现舞蹈效果，可以考虑使用现成的动画库：

// 使用Anime.js
anime({
    targets: '.dancer',
    translateY: [-20, 20],
    rotate: [-10, 10],
    duration: 1000,
    direction: 'alternate',
    loop: true,
    easing: 'easeInOutSine'
});

// 使用GSAP
gsap.to(".dancer", {
    y: -50,
    rotation: 15,
    duration: 1,
    yoyo: true,
    repeat: -1,
    ease: "sine.inOut"
});

音乐同步舞蹈

实现根据音乐节奏变化的舞蹈效果：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
analyser.fftSize = 256;

navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
        const source = audioContext.createMediaStreamSource(stream);
        source.connect(analyser);

        function danceToMusic() {
            const dataArray = new Uint8Array(analyser.frequencyBinCount);
            analyser.getByteFrequencyData(dataArray);

            const avg = dataArray.reduce((a, b) => a + b) / dataArray.length;
            document.querySelector('.dancer').style.transform = 
                `scale(${1 + avg/100}) rotate(${avg}deg)`;

            requestAnimationFrame(danceToMusic);
        }

        danceToMusic();
    });

以上方法可以根据需求复杂度选择适合的实现方案，从简单的CSS动画到复杂的3D舞蹈效果均可实现。