Anime.js 中文网

一体化
动画
引擎.

一个快速且灵活的 JavaScript 库，
用于添加动画到网页。

npm i animejs

完整的
动画师工具箱

摆脱浏览器限制，使用单一 API 为网页上的任何内容添加动画。

直观的 API

使用易于使用但功能强大的动画 API，更快地实现动画效果。

增强变换

使用多功能组合 API 平滑混合各个 CSS 变换属性。

滚动监视器

使用滚动观察者 API 在滚动时同步和触发动画。

高级错开

使用内置的 Stagger 工具功能，几秒钟内创建惊人的效果。

SVG 工具集

使用内置的 SVG 工具，可以轻松变形图形、跟随运动路径和绘制线条。

弹簧和可拖动的

使用功能齐全的 Draggable API 拖动、吸附、轻弹和抛掷 HTML 元素。

运行得像
的时钟一样

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

响应式动画

使用 Scope API 可以轻松让动画响应媒体查询。

一个轻量级且模块化的 API

通过只导入你需要的部分来保持你的包大小小。

开始动画

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

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));
});

Bundle size

24.50 KB

一体化 动画 引擎.

完整的 动画师工具箱