当前位置：首页 > JavaScript

js实现图片动画

2026-02-02 13:23:18JavaScript

使用 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 适合现代浏览器环境，第三方库适合复杂动画序列，视差效果则常用于页面滚动交互。

js实现图片动画