AnimeJs v4 发布！

AnimeJs v4 Is Here

Source | HN Comments

Anime.js v4 发布，这是一个用于 Web 动画的 JavaScript 库。它提供了一站式动画引擎，具有直观的 API，支持 CSS 变换、SVG 工具集、滚动观察、高级交错、Springs 和 Draggable 等功能。该库轻量级且模块化，可以通过 npm 安装。文章还介绍了赞助商信息、捆绑包大小、资金目标以及联系方式。

Anime.js | JavaScript 动画引擎 4.0.0 3.2.1 2.1.0

一站式动画引擎

一个快速且多功能的 JavaScript 库，用于为 Web 赋予动画效果。

npm i animejs

了解更多由 Huly Huly Clutch Clutch 你的 Logo 在这里赞助

完整的动画工具箱

摆脱浏览器限制，使用单个 API 为 Web 上的任何内容添加动画效果。

直观的 API

使用简单易用且功能强大的动画 API 更快地进行动画制作。

增强的变换

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

SVG 工具集

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

Scroll Observer

使用 Scroll Observer API 同步并在滚动时触发动画。

高级交错

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

Springs 和 Draggable

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

像发条一样运行

通过强大的 Timeline API 编排动画序列并保持回调同步。

响应式动画

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

轻量级和模块化的 API

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

我们的赞助商

Anime.js 100% 免费，这完全得益于我们赞助商的帮助。 Huly Huly Clutch Clutch 你的 Logo 在这里

开始制作动画

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

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