共计 2980 个字符，预计需要花费 8 分钟才能阅读完成。
大家好，我是大冶，一个酷爱前端开发和分享的工程师。我有一个专一于前端技术的公众号【 大迁世界 】，心愿能与更多同行或者感兴趣的敌人们一起提高。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
动画。从人群中怀才不遇、吸引访客注意力的绝佳形式。通过富裕创意的物体静止和晦涩的页面转换，不仅能为咱们的网站削减独特的美感，还能进步用户参与度，发明令人难忘的第一印象。
有了这 10 个功能强大的 JavaScript 库，创立动画再简略不过了。滚动动画、手写动画、SPA 页面转换、打字动画、色彩动画、SVG 动画 …… 它们的性能无穷无尽。
1.Anime.js
地址：https://animejs.com/
Anime.js 在 GitHub 上有超过 4.3 万颗星，是最受欢迎的动画库之一。
它是一个轻量级 JavaScript 动画库，具备简略的 API，可用于为 CSS 属性、SVG、DOM 属性和 JavaScript 对象制作动画。应用 Anime.js，咱们能够播放、暂停、重启或反转动画。该库还提供了惊人的性能，可通过跟进和重叠动作为多个元素制作动画。该库还蕴含各种与动画相干的事件，咱们能够应用回调和承诺来监听这些事件。
2. Lottie
地址：https://airbnb.io/lottie/
Lottie 是一个库，能够解析应用 Bodymovin 插件以 JSON 格局导出的 Adobe After Effects 动画，并在挪动和网络应用程序上进行原生渲染。这样，用户就无需手动从新制作由业余设计师在 After Effects 中创立的高级动画。仅网络版在 GitHub 上就有超过 27k 个星。
3. Velocity
地址：http://velocityjs.org/
应用 Velocity，你能够创立色彩动画、变换、循环、弛缓、SVG 动画等。它应用的 API 与 jQuery 库中的 $.animate() 办法雷同，如果 jQuery 可用，它还能够与之集成。该库提供突变、滚动和滑动成果。除了能管制动画的持续时间和提早外，还能在动画实现后的某个工夫反转动画，或在动画进行时齐全进行。该库在 GitHub 上有 17k 多颗星，是 Anime.js 的现实替代品。
4. Rough Notation
地址：https://roughnotation.com/
Rough Notation 是一个 JavaScript 库，用于在网页上创立黑白正文并制作动画。它应用 RoughJS 创立手绘的外观和感觉。您能够创立多种正文款式，包含下划线、方框、圆圈、高亮、删除线等，还能够管制每种正文款式的持续时间和色彩。
5. Popmotion
地址：https://popmotion.io/
Popmotion 是一个功能强大的库，用于创立引人注目的动画。它为何不同凡响？- Popmotion 不假设您打算制作动画的对象属性，而是提供可在任何 JavaScript 环境中应用的简略、可组合的函数。
该库反对数字、色彩和简单字符串的关键帧、弹簧和惯性动画。该库测试良好，保护踊跃，在 GitHub 上领有 19k 多颗星。
6. Vivus
地址：https://maxwellito.github.io/vivus/
Vivus 是一个 JavaScript 库，可让你为 SVGs 制作动画，使其看起来就像正在绘制一样。它速度快、重量轻，齐全不依赖任何工具，并提供三种不同的 SVG 动画制作方法：它提供三种不同的 SVG 动画制作方法：提早、同步和逐个。还能够应用自定义脚本，以本人喜爱的形式绘制 SVG。
Vivus 还容许您自定义持续时间、提早、定时性能和其余动画设置。查看 Vivus Instant，理解现场实际操作示例。
7. 绿袜动画平台（GSAP）
地址：https://greensock.com/
GreenSock Animation Platform (GSAP) 是一个库，可让咱们创立实用于所有支流浏览器的精彩动画。能够在 React、Vue、WebGL 和 HTML 画布中应用它来制作色彩、字符串、静止门路等动画。它还附带了一个 ScrollTrigger 插件，让您只需大量代码就能创立令人印象粗浅的基于滚动的动画。
GSAP 已在 1100 多万个网站中应用，在 GitHub 上有超过 15K 个 “ 星 ”，是一个通用而受欢迎的工具。您能够应用 GreenSock 的 GSDevTools 来轻松调试应用 GSAP 创立的动画。
8. Three.js
地址：https://threejs.org/
Three.js 是一个轻量级库，用于显示简单的 3D 物体和动画。它利用 WebGL、SVG 和 CSS3D 渲染器来创立引人入胜的三维体验，可在各种浏览器和设施上运行。它是 JavaScript 社区的出名库，在 GitHub 上领有超过 85k 个星级。
9. ScrollReveal
地址：https://scrollrevealjs.org/
通过 ScrollReveal 库，您能够轻松地为进入或来到浏览器视口的 DOM 元素制作动画。它提供各种类型的优雅特效，可在多个浏览器中滚动时显示或暗藏元素。ScrollReveal 库也十分易于应用，在 GitHub 上的依赖性为零，领有超过 2100 个星级用户。
10. Barba.js
地址：https://barba.js.org/
让网站超群绝伦的一种创造性办法是，在用户浏览网页时，在网页之间增加活泼的过渡成果。这比简略地显示新网页或从新加载浏览器能带来更好的用户体验。
这就是 Barba.js 为何如此有用的起因；该库可让网站像单页面应用程序（SPA）一样运行，从而创立令人愉悦的页面转换。它能缩小页面之间的提早，最大限度地缩小浏览器的 HTTP 申请次数。它在 GitHub 上取得了将近 11k 颗星。
11. Mo.js
地址：https://barba.js.org/
它提供了简略的申明式 API，可轻松创立晦涩的动画和特效，在各种屏幕尺寸的设施上都能呈现出完满的成果。您能够挪动 HTML 或 SVG DOM 元素，也能够创立一个非凡的 Mo.js 对象，该对象具备一系列独特的性能。它是一个牢靠且通过充沛测试的库，在 GitHub 上已编写了 1500 多个测试，领有 1700 多颗星。
12. Typed.js
地址：https://mattboldt.com/demos/typed-js/
它的名字就阐明了所有：一个动画打字库。
它能一一字符键入特定字符串，就像有人在实时键入一样，容许你暂停键入速度，甚至暂停键入特定工夫。通过智能退格，它能够键入以与以后字符雷同的字符集开始的间断字符串，而不会退格整个前一个字符串 – 就像咱们在下面的演示中看到的那样。
此外，它还反对批量键入，即同时在屏幕上键入一组字符，而不是一个接一个地键入。Typed.js 在 GitHub 上有超过 12K 颗星，深受 Slack 和 Envato 的信赖。
总结
作为开发人员，利用这些工具无疑会晋升你的我的项目，使其在竞争日益强烈的数字环境中怀才不遇。
交换
搜寻公众号：[大迁世界]，一起学习，一起提高！ 📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑难？我来答复
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
