12 个强大而实用的 JavaScript 动画库

---

前言

无论你是经验丰富还是刚刚入门的前端开发人员，强大又包罗万象的 JavaScript 动画库都能帮助你将创意愿景变为现实。

---

一、1. GSAP

被誉为动画库瑞士军刀的GSAP，用途十分广泛，深受全世界前端开发者的喜爱。

使用示例：

gsap.to(".box", {duration: 2, x: 300, rotation: 360, ease: "bounce"});

只需要简简单单的一行代码，就能让box元素向右移动 300 像素，旋转 360 度，同时具有bounce效果。实在太便捷，太好用了。

二、Anime.js：简单而强大

我们常说，有的时候，少即是多，Anime.js 正是如此，它虽然轻巧但在能力上却毫不逊色。

使用示例：

anime({
  targets: '.circle',
  translateX: 250,
  scale: 2,
  duration: 3000
});

上面的代码表示动画会在 3 秒内平滑移动并放大一个circle元素。大家可以试一试，还蛮有意思的。

---

三、Velocity.js：速度与优雅的结合

Velocity.js 大大改善性能，同时又不牺牲功能。赞！

使用示例：

$(".element").velocity({
  translateY: "200px",
  rotateZ: "45deg"
}, 1000);

四、Three.js：引入 3D 世界

Three.js 开辟了一个全新的维度！它是我们在浏览器中创建 3D 图形的门户。

使用示例：

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

上面的代码创建了一个绿色的 3D 立方体，你可以随心所欲地进行操作和动画制作。

五、Lottie：使动画变简单

Lottie 将复杂的动画变成了小菜一碟。是你口袋里的专业动画师！

使用示例：

lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json'
});

上面的代码从 JSON 文件加载和播放 Lottie 动画。是不是看着就感觉易如反掌！

六、Popmotion：最佳的灵活性

Popmotion 就像变色龙——它可以轻松适应任何 JavaScript 环境。

使用示例：

animate({
  from: 0,
  to: 100,
  onUpdate: latest => console.log(latest)
});

这是一个从0计数到100、记录每个值的简单动画。

七、Mo.js：使动态图形变简单

Mo.js 使创建动态图形就像用蜡笔绘图一样简单，但是最后的成果却不一般，可谓精妙绝伦！

使用示例：

const burst = new mojs.Burst({
  radius:   { 0: 100 },
  count:    5,
  children: {
    shape:      'circle',
    fill:       { 'cyan' : 'yellow' },
    duration:   2000
  }
});

上面的代码创建了一个burst动画，包含五个扩大和变色的圆。

八、Typed.js：让文本栩栩如生

Typed.js 给冷冰冰的文本增添了人情味。Nice。

使用示例：

new Typed('#element', {
  strings: ['Hello, World!', 'Welcome to my website!'],
  typeSpeed: 50
});

代码创建了一个在两个问候语之间交替的键入动画。

九、AniJS

AniJS 就像魔法棒一样——无需编写任何代码即可创建动画！

使用示例：

<div data-anijs="if: click, do: fadeIn, to: .target"></div>

上面的HTML属性会在单击时创建淡入动画。

十、Framer Motion：React 的动画超级英雄

Framer Motion 是 React 工具包的完美补充，它对于 React 就像薯条和番茄酱，合在一起，美味无比。

使用示例：

<motion.div
  animate={{ x: 100 }}
  transition={{ duration: 2 }}
/>

这个 React 组件会在 2 秒内向右移动 100 个像素。

十一、ScrollMagic：基于滚动的动画大师

ScrollMagic 使滚动变得有趣起来。随着用户滚动浏览网站，一部迷你电影随之呈现！相信我，真的会被惊艳到。

使用示例：

new ScrollMagic.Scene({
  triggerElement: "#trigger",
  duration: 300
})
.setTween("#animate", {scale: 2.5})
.addTo(controller);

以上代码创建的动画会在用户滚动时缩放元素。

十二、Motion One：小而强

浓缩的，才是精华的，Motion One 正是如此。轻量级的它，小小的身体充满了大大的能量！

使用示例：

animate("#box", { x: 100 }, { duration: 1 });

这条简单的线会在一秒内将一个盒子向右移动 100 像素。

结束语：我们的动画之旅将在这里启程！

有了这 12 个令人惊叹的 JavaScript 动画库，我们的 web 项目就能脱胎换骨，从平平无奇进化成为光彩夺目：无论是创建简单的悬停效果还是复杂的 3D 世界，这些库都能满足我们的需求。谨记，哪个库最适合取决于特定的项目需求。多多尝试才能匹配到最完美的助手。

原文链接