js实现舞蹈
使用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实现更复杂的舞蹈动画：
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：
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舞蹈效果均可实现。
