js实现跳舞
实现跳舞动画的几种方法
使用CSS动画结合JavaScript 通过JavaScript动态添加或移除CSS类来控制元素的动画效果。CSS中定义关键帧动画（@keyframes），JavaScript监听事件（如点击或音乐节奏）触发动画。
.dance {
animation: danceAnimation 1s infinite alternate;
}
@keyframes danceAnimation {
0% { transform: rotate(-10deg); }
100% { transform: rotate(10deg); }
}document.getElementById('dancer').addEventListener('click', function() {
this.classList.toggle('dance');
});通过Canvas绘制动态角色 利用Canvas API实时绘制角色，通过数学函数（如正弦波）让角色关节产生周期性运动，形成跳舞效果。
const canvas = document.getElementById('danceCanvas');
const ctx = canvas.getContext('2d');
let angle = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const offsetY = Math.sin(angle) * 30;
// 绘制会动的简笔人物
ctx.beginPath();
ctx.arc(100, 50 + offsetY, 20, 0, Math.PI * 2); // 头部
ctx.moveTo(100, 70 + offsetY);
ctx.lineTo(100, 120 + offsetY); // 身体
// 四肢根据角度变化
ctx.moveTo(100, 90 + offsetY);
ctx.lineTo(60, 70 - offsetY); // 左臂
ctx.moveTo(100, 90 + offsetY);
ctx.lineTo(140, 70 + offsetY); // 右臂
ctx.stroke();
angle += 0.1;
requestAnimationFrame(animate);
}
animate();使用Web动画API 现代浏览器支持的Web Animations API可以直接用JavaScript创建高性能动画，无需CSS。
const element = document.getElementById('avatar');
element.animate([
{ transform: 'translateY(0) rotate(0deg)', easing: 'ease-out' },
{ transform: 'translateY(-20px) rotate(10deg)', easing: 'ease-in' },
{ transform: 'translateY(0) rotate(0deg)' }
], {
duration: 800,
iterations: Infinity,
direction: 'alternate'
});响应音乐节奏的舞蹈 通过Web Audio API分析音频频谱，将音量或频率数据映射到动画属性上。
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
const audioElement = document.querySelector('audio');
audioElement.addEventListener('play', () => {
const source = audioCtx.createMediaElementSource(audioElement);
source.connect(analyser);
analyser.connect(audioCtx.destination);
function visualize() {
const dataArray = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(dataArray);
const energy = dataArray.reduce((a, b) => a + b) / dataArray.length;
document.getElementById('dancer').style.transform =
`scale(${1 + energy/100}) rotate(${energy/2}deg)`;
requestAnimationFrame(visualize);
}
visualize();
});使用第三方动画库 GSAP等专业动画库可以创建更复杂的舞蹈序列动画。
gsap.to("#dancer", {
duration: 0.5,
rotation: 15,
y: -20,
repeat: -1,
yoyo: true,
ease: "sine.inOut"
});实现要点
- 运动节奏建议控制在90-120BPM（每分钟节拍数）之间，接近人类舞蹈节奏
- 多个关节（如手臂、腿部）建议设置相位差，形成更自然的运动
- 移动设备上建议使用陀螺仪数据作为输入，让用户通过倾斜设备控制舞蹈动作
- 性能优化：对移动元素使用
transform和opacity属性，这些属性不会触发重排
