js实现图片动画
使用 CSS 动画结合 JavaScript 控制
通过 JavaScript 动态添加或移除 CSS 类来实现图片动画效果。CSS 定义动画关键帧，JavaScript 控制触发时机。
/* CSS 部分 */
.animate-image {
animation: fadeIn 2s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}// JavaScript 部分
const img = document.querySelector('img');
img.addEventListener('click', () => {
img.classList.add('animate-image');
// 动画结束后移除类名以便重复触发
img.addEventListener('animationend', () => {
img.classList.remove('animate-image');
});
});纯 JavaScript 动画实现
使用 requestAnimationFrame 实现高性能逐帧动画，适合需要精细控制的场景。
function animateImage(element, duration) {
const startTime = performance.now();
function update(time) {
const elapsed = time - startTime;
const progress = Math.min(elapsed / duration, 1);
// 自定义动画效果
element.style.opacity = progress;
element.style.transform = `scale(${1 + 0.5 * Math.sin(progress * Math.PI)})`;
if (progress < 1) {
requestAnimationFrame(update);
}
}
requestAnimationFrame(update);
}
// 使用示例
const img = document.getElementById('animated-img');
animateImage(img, 1000); // 1秒动画使用 Web Animations API
现代浏览器原生支持的动画 API，性能优异且语法简洁。
const img = document.querySelector('img');
img.animate([
{ transform: 'rotate(0deg)', opacity: 0 },
{ transform: 'rotate(360deg)', opacity: 1 }
], {
duration: 1000,
easing: 'cubic-bezier(0.42, 0, 0.58, 1)',
iterations: Infinity
});第三方动画库方案
使用 GSAP 等专业动画库实现复杂效果，示例代码：
// 需先引入GSAP库
gsap.to(".image-element", {
duration: 1.5,
x: 100,
rotation: 360,
ease: "elastic.out(1, 0.5)",
stagger: 0.1
});响应式视差动画
结合滚动事件实现视差效果，增强用户体验。
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
const img = document.getElementById('parallax-img');
// 根据滚动位置计算位移
const offset = scrollY * 0.5;
img.style.transform = `translateY(${offset}px)`;
});每种方法适用于不同场景：CSS 动画适合简单过渡效果，纯 JavaScript 实现适合需要精确控制的动画，Web Animations API 适合现代浏览器环境，第三方库适合复杂动画序列，视差效果则常用于页面滚动交互。
