Anime.js | JavaScript 动画引擎

一体化
动画
引擎.

一个快速且多功能的 JavaScript
库，用于动画网络.

npm i animejs

赞助商

完整的
动画师工具箱

摆脱浏览器限制，使用单个 API 在网络上动画任何内容。

直观的 API

使用易于使用但功能强大的动画 API 更快地进行动画制作。

增强的变换

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

SVG 工具集

使用内置的 SVG 实用程序轻松变形形状、跟随运动路径和绘制线条。

滚动观察器

使用滚动观察器 API 同步和触发滚动动画。

高级错落有致

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

弹簧和可拖动

使用功能齐全的 Draggable API 拖动、捕捉、轻拂和投掷 HTML 元素。

运行如
发条装置

使用强大的时间线 API 编排动画序列并保持回调同步。

响应式动画

使用 Scope API 轻松地使动画响应媒体查询。

一个轻量级
和模块化的 API

仅导入您需要的部分，以保持捆绑包大小较小。

我们的赞助商

Anime.js 是 100% 免费的，并且仅在我们的赞助商的帮助下才有可能实现。

开始制作动画

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

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

一体化动画引擎.

完整的动画师工具箱