前端动画实现
前端动画实现涉及多种技术和方法，从简单的CSS过渡到复杂的Canvas动画，各有其适用场景。
实现方式
CSS Transition
属性变化的平滑过渡，适合简单交互效果
CSS Animation
关键帧动画，适合循环或复杂序列动画
JavaScript控制
requestAnimationFrame，精确控制动画流程
动画库
GSAP、Anime.js等专业动画库
实现示例
/* CSS过渡动画 */
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}
/* CSS关键帧动画 */
@keyframes slideIn {
0% { transform: translateX(-100px); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
.slide-element {
animation: slideIn 0.5s ease-out;
}
/* JavaScript动画 */
function animateElement(element, duration) {
let start = null;
requestAnimationFrame(step);
function step(timestamp) {
if (!start) start = timestamp;
const progress = Math.min((timestamp - start) / duration, 1);
// 使用缓动函数
const easedProgress = easeInOutQuad(progress);
// 更新元素样式
element.style.transform = `translateX(${easedProgress * 100}px)`;
if (progress < 1) {
requestAnimationFrame(step);
}
}
}
/* 缓动函数 */
function easeInOutQuad(t) {
return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
}