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

一体式动画引擎.

完整的动画师工具箱