我在通过浏览网页寻找一个整洁好用的 JavaScript 动画库时, 发现许多 "推荐" 的动画库都已经有一段时间没有维护了.
经过一些研究, 我已经收集了 11 个最好的库可以在你的应用程序中使用.
Three.JS
拥有超过 43K stars, 这个流行的库拥有一个强大的方式在浏览器中来创建三维动画, 以 webGL 作为更直观的方式. 这个库提供了,,CSS3d 和 webgl 渲染器, 使我们能够在设备和浏览器之间创建丰富的交互体验. 该库于 2010 年 4 月首次面世, 目前仍有近 1000 名参与者开发.
项目地址: https://github.com/mrdoob/three.js/
Anime.JS
拥有超过 20K 星, Anime.JS 是一个 JavaScript 动画库, 与 CSS 属性, 独立的 CSS transforms,svg 或任何 dom 属性和 JavaScript 对象一起工作. 此库允许您链接多个动画属性, 将多个实例同步在一起, 创建时间线等.
GitHub 上的项目地址: https://github.com/juliangarnier/anime
Mo.JS
拥有 14kStars, 这个库是一个用于 Web 的运动图形工具带, 具有简单的声明性 API, 跨设备兼容性和超过 1500 个单元测试. 您可以围绕 DOME 或 SVG DOME 移动物体, 或者创建独特的 mo.JS 对象. 尽管文档有点稀少, 但示例也很多.
GitHub 上的项目地址: https://github.com/legomushroom/mojs
Popmotion
拥有 14K 星, 这个功能性和 reactive 的动画库的体积只有 11kb. 它允许开发人员从动作中创建动画和交互, 这些动作是可以启动和停止的值, 并使用 CSS,svg,react,three.JS 和任何接受数字作为输入的 API 来创建.
在 GitHub 上的项目地址: https://github.com/Popmotion/popmotion
Vivus
拥有超过 10 万颗星, vivus 是一个零依赖性的 JavaScript 类, 它可以让你对 SVG 进行动画处理, 让它们看起来像是被绘制的. 您可以使用许多可用动画之一, 或创建自定义脚本来绘制 SVG. 立即查看 vivus, 获取一个实时示例, 动手操作吧. 在 GitHub 上的项目地址为: https://github.com/maxwellito/vivus
GreenSockJS
GreenSockJS 是一个用于创建高性能, 零依赖性, 跨浏览器动画的 JavaScript 库, 据称该库已用于 400 多万个网站. GreenSockJS 具有灵活性, 可与 React,vue,Angular 和 Vanilla JS 配合使用. gsdevtools 还可以帮助使用 gsap 构建 Dubug 动画.
在 GitHub 上的地址为: https://github.com/greensock/GreenSock-JS
Scroll Reveal
该库拥有 15K 星, 无依赖关系, 为 Web 和移动浏览器提供了简单的滚动动画, 以动画方式显示滚动内容. 它支持多种简洁的效果类型, 甚至允许您使用自然语言定义动画.
在 GitHub 上的项目地址为: https://github.com/jlmakes/scrollreveal
Hover(CSS)
这是一个 CSS 动画库. 有 20K 星, hover 提供了 CSS3 支持的悬停效果的集合, 可应用于链接, 按钮, 徽标, SVG, 特色图片等, 可以在 CSS,Sass 和 Less 中使用. 您可以复制和粘贴您想在自己的样式表中使用的效果, 或者引用样式表.
GitHub 上的项目地址为: https://github.com/IanLunn/Hover
Kute.JS
一个成熟的原生 JavaScript 动画引擎, 具有跨浏览器动画的基本功能. 重点是代码质量, 灵活性, 性能和大小 (核心引擎最小 17K,gzip 为 5.5K). 库也是可扩展的, 因此您可以添加自己的功能.
在 GitHub 上的项目地址: https://github.com/thednp/kute.js/
Typed.JS
这个 6K 星的库基本上允许您以选定的速度为字符串来创建输入打字动画. 您还可以在页面上放置一个 html DIV 并从中读取, 以允许对禁用 JavaScript 的搜索引擎和用户进行访问. 这个库既受欢迎, 也非常有用.
在 GitHub 上的地址: https://github.com/mattboldt/typed.js
Lottie
lottie 是一个用于的移动端类库, 在 Android 和 iOS 端渲染 Adobe After Effects 的动画, 并以本地方式呈现. 同样适用于 Web,ReactNative 和 Windows 平台. 由 AirBnb 公司出品.
在 GitHub 上的地址为: https://github.com/airbnb/lottie-web
来源: http://www.tuicool.com/articles/FFzuaqf