发现个前端圈公认的动画神器，68K stars 真的不是吹的！

anime.js —— 一个轻量级但功能极其强大的 JavaScript 动画引擎。

前端兄弟们又来享福了，这玩意儿简直是“动画师的瑞士军刀”：

全能型选手 不管是 CSS 属性、SVG、DOM 属性，还是 JavaScript 对象，它都能让你动起来。想搞顺滑的光标特效、复杂的滚动视差、还是丝滑的 UI 过渡，它全包了。

API 直观且轻量 代码写起来非常优雅，像写时间线一样简单。支持模块化引入，你只需要引入你需要的部分，保持 bundle 体积超小，性能拉满。

开箱即用 官网（http://animejs.com）上全是酷炫的 Demo，每个动画都直接配好了代码，一键复制就能用，拿去二次创作简直不要太方便。

看它那个相机拆解的动画演示，流畅度真的绝了。搞前端开发、做交互设计的，这个库必须收藏在工具箱里。

项目地址放评论区了

Anime.js | JavaScript Animation Engine

Source: https://animejs.com/

Intuitive API

Animate faster with an easy-to-use, yet powerful animation API.

• Per property parameters
• Flexible keyframes system
• Built-in easings

Enhanced transforms

Smoothly blend individual CSS transform properties with a versatile composition API.

• Individual CSS Transforms
• Function based values
• Blend composition

Scroll Observer

Synchronise and trigger animations on scroll with the Scroll Observer API.

• Multiple synchronisation modes
• Advanced thresholds
• Complete set of callbacks

Advanced staggering

Create stunning effects in seconds with the built-in Stagger utility function.

• Time staggering
• Values staggering
• Timeline positions staggering

SVG toolset

Morph shapes, follow motion paths, and draw lines easily with the built-in SVG utilities.

• Shape morphing
• Line drawing
• Motion path

Springs and draggable

Drag, snap, flick and throw HTML elements with the fully-featured Draggable API.

• Versatile settings
• Comprehensive callbacks
• Useful methods

Runs like clockwork

Orchestrate animation sequences and keep callbacks in sync with the powerful Timeline API.

• Synchronise animations
• Advanced time positions
• Playback settings

Responsive animations

Make animations respond to media queries easily with the Scope API.

• Media queries
• Custom root element
• Scopped methods

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

• Timer5.60 KB
• Animation+5.20 KB
• Timeline+0.55 KB
• Animatable+0.40 KB
• Draggable+6.41 KB
• Scroll+4.30 KB
• Scope+0.22 KB
• SVG0.35 KB
• Stagger+0.48 KB
• Spring0.52 KB
• WAAPI3.50 KB