摘要: 非常炫酷的动画库!
作者: 前端小智 https://segmentfault.com/a/1190000017794020
Fundebug 经授权转载, 版权归原作者所有.
1. Three.JS https://github.com/mrdoob/three.js/
超过 46K 的星星, 这个流行的库提供了非常多的 3D 显示功能, 以一种直观的方式使用 webGL. 这个库提供了 \<canvas\>, \<svg\>,CSS3D 和 WebGL 渲染器, 让我们在设备和浏览器之间创建丰富的交互体验. 该库于 2010 年 4 月首次推出, 目前仍有近 1000 名贡献者在开发中.
2. Anime.JS https://github.com/juliangarnier/anime
超过 20K 的星星, Anime 是一个 JavaScript 动画库, 可以处理 CSS 属性, 单个 CSS 转换, SVG 或任何 DOM 属性以及 JavaScript 对象. 此库允许您链接多个动画属性, 将多个实例同步, 创建时间轴等.
3. Mo.JS https://github.com/legomushroom/mojs
超过 14K 星星, 是一个用于 Web 的动态图形工具带, 具有简单的声明 API, 跨设备兼容性和超过 1500 个单元测试. 您可以在 DOME 或 SVG DOME 周围移动东西或创建唯一的 mo.JS 对象. 虽然文档有些稀缺, 但是示例很丰富, 这里有 CSS 技巧 https://css-tricks.com/introduction-mo-js/ 的介绍.
4. Velocity https://github.com/julianshapiro/velocity
超过 15k 星星, Velocity 是一个快速的 JavaScript 动画引擎, 拥有与 jQuery 的 $.animate() 相同的 API. 它具有彩色动画, 转换, 循环, 画架, SVG 支持和滚动. 这里是 Velocity 的高性能引擎的分解, 这里 https://davidwalsh.name/svg-animation 是使用该库的 SVG 动画的介绍.
5. Popmotion https://github.com/popmotion/popmotion
超过 14K 星星, 这个动画库大小只有 11 kb. 它允许开发人员从动作创建动画和交互, 这些动作是可以启动和停止, 可以使用 CSS,SVG,React,three 创建, JS 和任何接受数字作为输入的 API.
代码部署后可能存在的 BUG 没法实时知道, 事后为了解决这些 BUG, 花了大量的时间进行 log 调试, 这边顺便给大家推荐一个好用的 BUG 监控工具 Fundebug.
6. Vivus https://github.com/maxwellito/vivus
超过 10k 星星, Vivus 是一个零依赖的 JavaScript 类, 可以让你为 SVG 制作动画, 让它们具有被绘制的外观. 您可以使用许多可用动画之一, 或创建自定义脚本来绘制 SVG. 查看 Vivus-instant https://maxwellito.github.io/vivus-instant/ 获取实际示例, 亲自动动手练习一下.
7. GreenSock JS https://github.com/greensock/GreenSock-JS
GSAP 是一个 JavaScript 库, 用于创建高性能, 零依赖, 跨浏览器动画, 据称在超过 400 万个网站上使用. GSAP 是灵活的, 可以与 React,vue,Angular 和 vanilla JS 协同工作. GSDevtools https://greensock.com/gsdevtools 还可以帮助使用 GSAP 构建 dubug 动画.
8. Scroll Reveal https://github.com/scrollreveal/scrollreveal
拥有 15K 颗星星和零依赖, 这个库为 Web 和移动浏览器提供了简单的滚动动画, 以动画的方式显示滚动中的内容. 它支持多种简洁的效果类型, 甚至允许你使用自然语言定义动画. 这里有一个简短的 SitePoint 教程.
9. Hover (CSS) https://github.com/IanLunn/Hover
超过 20k 星星, Hover 提供了 CSS3 支持的悬停效果集合, 可应用于链接, 按钮, 徽标, SVG, 特色图像等, 在 CSS,Sass 和 Less 中可用. 您 = 可以复制和粘贴希望在自己的样式表中使用的效果, 或者引用样式.
10. Kute.JS https://github.com/thednp/kute.js/
一个完全成熟的原生 JavaScript 动画引擎, 具有跨浏览器动画的基本功能. 重点是代码质量, 灵活性, 性能和大小 (核心引擎 17k 和 gzipped 5.5k) - 这是一个演示 http://thednp.github.io/kute.js/performance.html . 该库也是可扩展的, 因此你可以添加自己的功能.
关于 Fundebug
Fundebug https://www.fundebug.com/ 专注于 JavaScript, 微信小程序, 微信小游戏, 支付宝小程序, React Native,Node.JS 和 Java 线上应用实时 BUG 监控. 自从 2016 年双十一正式上线, Fundebug 累计处理了 9 亿 + 错误事件, 付费客户有 Google,360, 金山软件, 百姓网等众多品牌企业. 欢迎大家免费试用 https://www.fundebug.com/team/create !
来源: http://www.qdfuns.com/article/40048/87b31b06a1907776fef9a78f20d55433.html