Anime.js | JavaScript 动画引擎

一体化
动画
引擎.

一个快速、多功能的 JavaScript
库，用于为网页添加动画效果。

npm i animejs

赞助商

完整的
动画师工具箱

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

直观的 API

使用易于使用但功能强大的动画 API，更快地创建动画。

增强的变换

通过多功能组合 API，流畅地混合单个 CSS 变换属性。

滚动观察器

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

高级错位效果

使用内置的错位（Stagger）实用函数，在几秒钟内创建惊艳效果。

SVG 工具集

使用内置的 SVG 工具，轻松进行形状变形、沿运动路径移动和绘制线条。

弹簧和可拖动

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

运行如
时钟般精准

利用强大的 Timeline 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

一体化动画引擎.

完整的动画师工具箱