Anime.js | JavaScript 动画引擎

一体化
动画
引擎.

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

npm i animejs

赞助商

完整的
动画师工具箱

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

直观的 API

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

增强的变换

使用多功能的组合 API，平滑地混合单个 CSS 变换属性。

滚动观察器

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

高级交错

使用内置的交错实用程序函数，在几秒钟内创建惊人的效果。

SVG 工具集

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

弹簧和可拖动

使用功能齐全的可拖动 API，拖动、捕捉、甩动和抛掷 HTML 元素。

运行得像
钟表一样

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

响应式动画

使用范围 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

一体化动画引擎.

完整的动画师工具箱