Anime.js | JavaScript 动画引擎

多合一
动画
引擎。

一个快速且灵活的 JavaScript
库，用于制作 Web 动画。

npm i animejs

赞助商

完整的
动画师工具箱

打破浏览器限制，使用单一 API 为 Web 上的任何内容制作动画。

直观的 API

使用简单易用且功能强大的动画 API，让动画制作更高效。

增强的变形功能

使用通用的组合 API，平滑地混合各个 CSS 变换属性。

滚动观察器 (Scroll Observer)

使用滚动观察器 API，实现滚动时的动画同步与触发。

高级交错动画 (Staggering)

利用内置的 Stagger 实用函数，在几秒钟内创建令人惊叹的效果。

SVG 工具集

通过内置的 SVG 工具，轻松实现形状变形、沿路径运动和线条绘制。

弹簧物理效果与可拖拽功能

使用功能齐全的 Draggable API，轻松实现 HTML 元素的拖拽、吸附、轻弹和投掷效果。

运行如
钟表般精准

使用强大的时间轴 (Timeline) API，编排动画序列并保持回调同步。

响应式动画

使用作用域 (Scope) API，轻松使动画响应媒体查询。

轻量级
且模块化的 API

仅导入所需部分，保持包体积精简。

我们的赞助商

Anime.js 完全免费，全靠我们的赞助商支持才得以持续开发。

成为赞助商

开始制作动画

通过我们深入的文档快速上手。

animate('.square', {
  rotate: 90,
  loop: true,
  ease: 'inOutExpo',
});

animate('.shape', {
  x: random(-100, 100),
  y: random(-100, 100),
  rotate: random(-180, 180),
  duration: random(500, 1000),
  composition: 'blend',
});

animate('.car', {
  ...createMotionPath('.circuit'),
});

animate(createDrawable('.circuit'), {
  draw: '0 1',
});

animate('.circuit-a', {
  d: morphTo('.circuit-b'),
});

animate(createDrawable('path'), {
  draw: ['0 0', '0 1', '1 1'],
  delay: stagger(40),
  ease: 'inOut(3)',
  autoplay: onScroll({ sync: true }),
});

const options = {
  grid: [13, 13],
  from: 'center',
};

createTimeline()
  .add('.dot', {
    scale: stagger([1.1, .75], options),
    ease: 'inOutQuad',
  }, stagger(200, options));

createDraggable('.circle', {
  releaseEase: createSpring({
    stiffness: 120,
    damping: 6,
  })
});

createTimeline()
  .add('.tick', {
    y: '-=6',
    duration: 50,
  }, stagger(10))
  .add('.ticker', {
    rotate: 360,
    duration: 1920,
  }, '<');

createScope({
  mediaQueries: {
    portrait: '(orientation: portrait)',
  }
})
.add(({ matches }) => {
  const isPortrait = matches.portrait;
  createTimeline().add('.circle', {
    y: isPortrait ? 0 : [-50, 50, -50],
    x: isPortrait ? [-50, 50, -50] : 0,
  }, stagger(100));
});

包体积

24.50 KB

多合一动画引擎。

完整的动画师工具箱