当前位置：首页 > JavaScript

js实现舞蹈

2026-01-31 16:30:03JavaScript

使用JavaScript实现舞蹈动画

在JavaScript中实现舞蹈效果通常涉及DOM元素的动态变换，结合CSS动画或Canvas绘图。以下是几种常见方法：

基于CSS动画的DOM元素舞蹈

通过JavaScript动态添加CSS类或修改样式属性触发动画：

js实现舞蹈

const dancer = document.getElementById('dancer');
dancer.style.transition = 'transform 0.5s ease-in-out';

function dance() {
  const moves = ['rotate(15deg)', 'rotate(-15deg)', 'translateY(-20px)', 'scale(1.2)'];
  const randomMove = moves[Math.floor(Math.random() * moves.length)];
  dancer.style.transform = randomMove;
  setTimeout(() => dancer.style.transform = '', 500);
}

setInterval(dance, 1000);

使用Canvas绘制舞蹈角色

通过Canvas的逐帧绘制实现更复杂的舞蹈动画：

js实现舞蹈

const canvas = document.getElementById('danceCanvas');
const ctx = canvas.getContext('2d');
let angle = 0;

function drawDancer() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.translate(150, 150);
  ctx.rotate(Math.sin(angle) * 0.2);

  // 绘制身体部件
  ctx.fillStyle = '#FF6B6B';
  ctx.beginPath();
  ctx.arc(0, -30, 20, 0, Math.PI * 2); // 头部
  ctx.fill();

  ctx.fillRect(-15, 0, 30, 50); // 身体
  angle += 0.1;
  requestAnimationFrame(drawDancer);
}

drawDancer();

结合音乐节奏的舞蹈

使用Web Audio API分析音频频率，使舞蹈动作与音乐同步：

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

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

function visualize() {
  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);

  function render() {
    analyser.getByteFrequencyData(dataArray);
    const energy = dataArray.reduce((a, b) => a + b) / bufferLength;
    document.getElementById('dancer').style.transform = `scale(${1 + energy/100})`;
    requestAnimationFrame(render);
  }
  render();
}

使用动画库简化实现

GSAP等专业动画库可创建复杂舞蹈序列：

gsap.to("#dancer", {
  duration: 1,
  rotation: 360,
  yoyo: true,
  repeat: -1,
  ease: "bounce.out"
});

gsap.to("#arms", {
  duration: 0.5,
  rotation: -30,
  repeat: -1,
  yoyo: true
});