当前位置：首页 > JavaScript

js实现图片动画

2026-03-15 13:29:48JavaScript

使用CSS动画与JavaScript结合

通过JavaScript动态添加CSS类来实现图片动画效果。CSS定义关键帧动画，JavaScript控制动画的触发。

// 定义CSS动画关键帧
const style = document.createElement('style');
style.innerHTML = `
  @keyframes fadeInScale {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
  }
  .animate-image {
    animation: fadeInScale 1s ease-out forwards;
  }
`;
document.head.appendChild(style);

// 获取图片元素并添加动画类
const img = document.getElementById('targetImage');
img.classList.add('animate-image');

使用Web Animations API

现代浏览器支持的Web Animations API可以直接用JavaScript控制动画：

js实现图片动画

const img = document.getElementById('targetImage');
img.animate([
  { transform: 'rotate(0deg)', opacity: 0 },
  { transform: 'rotate(360deg)', opacity: 1 }
], {
  duration: 1000,
  iterations: 1,
  easing: 'ease-in-out'
});

Canvas动画实现

对于需要像素级控制的复杂动画，可以使用Canvas：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'image.jpg';

let angle = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.translate(canvas.width/2, canvas.height/2);
  ctx.rotate(angle);
  ctx.drawImage(img, -img.width/2, -img.height/2);
  ctx.restore();
  angle += 0.01;
  requestAnimationFrame(animate);
}
img.onload = animate;

使用GSAP库

GSAP是专业的动画库，可以实现复杂的动画序列：

js实现图片动画

import { gsap } from "gsap";

gsap.to("#image", {
  duration: 1.5,
  x: 100,
  rotation: 360,
  ease: "bounce.out",
  opacity: 0.5
});

SVG图片动画

对SVG图片可以直接操作其属性实现动画：

const svgImage = document.getElementById('svg-image');
function pulse() {
  svgImage.animate([
    { transform: 'scale(1)', fill: '#ff0000' },
    { transform: 'scale(1.2)', fill: '#00ff00' },
    { transform: 'scale(1)', fill: '#0000ff' }
  ], {
    duration: 1500,
    iterations: Infinity
  });
}
pulse();

响应式滚动动画

实现图片随页面滚动变化的动画效果：

window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;
  const img = document.getElementById('parallax-img');
  img.style.transform = `translateY(${scrollY * 0.5}px) scale(${1 - scrollY * 0.001})`;
});