js实现舞蹈
使用JavaScript实现舞蹈动画
在JavaScript中实现舞蹈效果通常涉及DOM元素的动态变换，结合CSS动画或Canvas绘图。以下是几种常见方法：
基于CSS动画的DOM元素舞蹈
通过JavaScript动态添加CSS类或修改样式属性触发动画：
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的逐帧绘制实现更复杂的舞蹈动画：
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
});关键注意事项
- 性能优化：对于复杂动画，优先使用CSS硬件加速属性（transform/opacity）
- 响应式设计：使用window.innerWidth等参数适配不同屏幕尺寸
- 可访问性：为动画提供暂停按钮，满足WCAG标准
实际实现时可根据需求混合使用上述方法，例如结合Canvas绘制和音频响应创造更生动的舞蹈效果。
