前端动画js实现
使用CSS动画与JavaScript结合
通过Element.animate()方法直接触发CSS动画，适用于简单动画场景。
const element = document.getElementById('target');
element.animate(
[
{ transform: 'translateX(0px)', opacity: 1 },
{ transform: 'translateX(100px)', opacity: 0.5 }
],
{
duration: 1000,
easing: 'ease-in-out'
}
);基于requestAnimationFrame的动画
手动控制每一帧的渲染，适合需要精细控制的复杂动画。
let startTime;
function animate(timestamp) {
if (!startTime) startTime = timestamp;
const progress = timestamp - startTime;
const element = document.getElementById('target');
element.style.transform = `translateX(${Math.min(progress / 10, 200)}px)`;
if (progress < 2000) requestAnimationFrame(animate);
}
requestAnimationFrame(animate);使用GSAP等动画库
GSAP提供高性能的时间轴控制和复杂动画序列管理。
gsap.to("#target", {
x: 100,
duration: 1,
repeat: -1,
yoyo: true
});Web Animations API实现
原生API支持更复杂的动画组合和状态管理。
const keyframes = [
{ transform: 'scale(1)', backgroundColor: 'red' },
{ transform: 'scale(1.5)', backgroundColor: 'blue' }
];
const options = {
duration: 1000,
iterations: Infinity,
direction: 'alternate'
};
document.getElementById('target').animate(keyframes, options);SVG动画处理
通过JavaScript动态修改SVG属性实现路径动画。
const path = document.getElementById('svg-path');
let offset = 0;
function updatePath() {
offset += 0.01;
path.setAttribute('stroke-dashoffset', offset);
requestAnimationFrame(updatePath);
}
updatePath();性能优化要点
- 优先使用
transform和opacity属性触发硬件加速 - 避免频繁的重排（reflow）操作
- 使用
will-change属性预声明动画元素.target { will-change: transform, opacity; }
动画缓动函数选择
通过自定义贝塞尔曲线或使用预定义缓动：
const easingFunctions = {
easeInOut: t => t<0.5 ? 2*t*t : -1+(4-2*t)*t,
elastic: t => (.04 - .04 / t) * Math.sin(25 * t) + 1
};
