当前位置：首页 > JavaScript

js实现动画效果代码

2026-01-30 15:50:08JavaScript

使用 CSS transition 实现简单动画

通过 CSS 的 transition 属性结合 JavaScript 的类名切换实现动画效果：

// 获取元素
const box = document.querySelector('.box');

// 添加事件监听
box.addEventListener('click', function() {
  this.classList.toggle('active');
});

对应 CSS：

.box {
  width: 100px;
  height: 100px;
  background: blue;
  transition: all 0.3s ease;
}

.box.active {
  transform: scale(1.2);
  background: red;
}

使用 requestAnimationFrame 实现高性能动画

适用于需要精细控制的复杂动画：

function animate() {
  const element = document.getElementById('animated');
  let position = 0;

  function step(timestamp) {
    position += 1;
    element.style.left = position + 'px';

    if (position < 200) {
      window.requestAnimationFrame(step);
    }
  }

  window.requestAnimationFrame(step);
}

// 启动动画
animate();

使用 Web Animations API

现代浏览器支持的动画 API：

const element = document.querySelector('.animated-element');

element.animate([
  { transform: 'translateX(0)', opacity: 1 },
  { transform: 'translateX(100px)', opacity: 0.5 }
], {
  duration: 1000,
  iterations: Infinity,
  direction: 'alternate',
  easing: 'ease-in-out'
});

使用 GSAP 动画库

专业动画库 GSAP 的实现示例：

// 引入 GSAP 后使用
gsap.to(".box", {
  duration: 1,
  x: 100,
  rotation: 360,
  ease: "bounce.out"
});

// 时间轴动画
const tl = gsap.timeline();
tl.to(".box1", {x: 100, duration: 1})
  .to(".box2", {y: 50, duration: 0.5}, "-=0.5");

使用 anime.js 动画库

另一个轻量级动画库：

anime({
  targets: '.box',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800,
  loop: true
});

实现抛物线动画

自定义路径动画示例：

function parabolicAnimation(element, targetX, targetY, duration) {
  const startX = element.offsetLeft;
  const startY = element.offsetTop;
  const startTime = performance.now();

  function update(time) {
    const elapsed = time - startTime;
    const progress = Math.min(elapsed / duration, 1);

    const x = startX + (targetX - startX) * progress;
    const y = startY + (targetY - startY) * progress + 
              (-200 * progress * (progress - 1));

    element.style.left = x + 'px';
    element.style.top = y + 'px';

    if (progress < 1) {
      requestAnimationFrame(update);
    }
  }

  requestAnimationFrame(update);
}

实现滚动动画

平滑滚动到页面指定位置：

function smoothScrollTo(targetPosition, duration = 1000) {
  const startPosition = window.pageYOffset;
  const distance = targetPosition - startPosition;
  const startTime = performance.now();

  function scrollStep(timestamp) {
    const elapsed = timestamp - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const easeProgress = easeInOutQuad(progress);

    window.scrollTo(0, startPosition + (distance * easeProgress));

    if (progress < 1) {
      requestAnimationFrame(scrollStep);
    }
  }

  function easeInOutQuad(t) {
    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
  }

  requestAnimationFrame(scrollStep);
}

实现打字机效果动画

文字逐个显示效果：

function typeWriter(element, text, speed = 100) {
  let i = 0;

  function typing() {
    if (i < text.length) {
      element.innerHTML += text.charAt(i);
      i++;
      setTimeout(typing, speed);
    }
  }

  typing();
}

// 使用示例
const textElement = document.getElementById('typing-text');
typeWriter(textElement, '这是一个打字机效果的动画演示');

以上方法涵盖了从基础到高级的多种 JavaScript 动画实现方式，可以根据项目需求选择合适的方案。CSS transition 适合简单状态变化，requestAnimationFrame 提供精细控制，专业动画库则能简化复杂动画的实现。

js实现动画效果代码