js实现转动
实现旋转动画的方法
在JavaScript中实现旋转效果可以通过多种方式完成，以下列举几种常见方法：
使用CSS transform属性结合JavaScript
通过修改元素的transform属性实现旋转，JavaScript控制旋转角度变化：
const element = document.getElementById('rotate-target');
let angle = 0;
function rotate() {
angle += 2;
element.style.transform = `rotate(${angle}deg)`;
requestAnimationFrame(rotate);
}
rotate();使用CSS动画与类切换
定义CSS旋转动画后，通过JavaScript触发：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.rotate {
animation: spin 2s linear infinite;
}document.getElementById('rotate-target').classList.add('rotate');Canvas绘制旋转对象
在Canvas中实现图形旋转需要重绘机制：
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let rotation = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(100, 100);
ctx.rotate(rotation * Math.PI / 180);
ctx.fillRect(-50, -50, 100, 100);
ctx.restore();
rotation += 1;
requestAnimationFrame(draw);
}
draw();WebGL实现3D旋转
通过Three.js等库实现3D旋转更高效：
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
animate();性能优化建议
- 优先使用CSS动画实现简单旋转，性能优于JavaScript直接操作
- 对于复杂场景考虑使用WebGL而非Canvas 2D
- 使用
requestAnimationFrame代替setInterval保证动画流畅度 - 对频繁旋转的元素启用硬件加速：
.rotate { transform: translateZ(0); will-change: transform; }
实际应用示例
实现按钮点击触发旋转：
const btn = document.querySelector('.rotate-btn');
const target = document.querySelector('.target');
btn.addEventListener('click', () => {
target.classList.toggle('rotating');
});配套CSS：
.rotating {
transition: transform 0.5s ease;
transform: rotate(180deg);
}
