js实现摆动
摆动动画的实现方法
在JavaScript中实现摆动效果通常可以通过CSS动画或直接使用JavaScript操作DOM元素的样式属性来完成。以下是几种常见的方法：
使用CSS动画结合JavaScript
定义一个CSS关键帧动画，通过JavaScript动态添加或移除动画类：
@keyframes swing {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(15deg); }
75% { transform: rotate(-15deg); }
}
.swing-animation {
animation: swing 1s ease-in-out infinite;
}const element = document.getElementById('swing-element');
element.classList.add('spring-animation');
// 停止动画
setTimeout(() => {
element.classList.remove('spring-animation');
}, 5000);使用JavaScript直接操作transform属性
通过requestAnimationFrame实现更精细的控制：
let angle = 0;
let direction = 1;
const speed = 0.1;
const maxAngle = 15;
function swing() {
angle += speed * direction;
if (angle > maxAngle || angle < -maxAngle) {
direction *= -1;
}
element.style.transform = `rotate(${angle}deg)`;
requestAnimationFrame(swing);
}
swing();使用物理模拟的摆动效果
实现更真实的物理摆动效果可以加入阻尼和弹性系数：
let angle = 0;
let velocity = 0;
const damping = 0.98;
const spring = 0.1;
function physicsSwing() {
const acceleration = -spring * angle;
velocity += acceleration;
velocity *= damping;
angle += velocity;
element.style.transform = `rotate(${angle}deg)`;
requestAnimationFrame(physicsSwing);
}
// 初始推动
velocity = 2;
physicsSwing();实现注意事项
- 性能优化：使用transform属性而不是直接修改left/top等位置属性，因为transform不会触发重排
- 硬件加速：添加will-change属性可以提升动画性能
- 停止条件：物理模拟需要考虑何时停止动画以避免无限循环
- 响应式设计：考虑不同屏幕尺寸下摆动效果的一致性
进阶技巧
结合GSAP等动画库可以更简单地创建复杂摆动效果：
gsap.to("#swing-element", {
rotation: 15,
duration: 0.5,
yoyo: true,
repeat: -1,
ease: "sine.inOut"
});这些方法可以根据具体需求选择使用，CSS动画适合简单效果，JavaScript实现适合需要精细控制的场景，物理模拟则能创造更真实的摆动体验。
