文章目录
前言
无论你是经验丰富还是刚刚入门的前端开发人员，强大又包罗万象的 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 世界，这些库都能满足我们的需求。谨记，哪个库最适合取决于特定的项目需求。多多尝试才能匹配到最完美的助手。