当前位置: 首页 > Web前端 > HTML

2018年值得期待的11个Javascript动画库

时间:2023-04-03 00:18:09 HTML

在浏览网页寻找一个整洁的Javascript动画库时,我发现了很多“推荐”的动画库,它们已经有一段时间没有维护了。经过一番研究,我收集了11个最好的库供您在应用程序中使用。我还添加了一些主要是非维护的有用库。在使用UI组件时,您还可以使用Bit在不同的应用程序之间轻松共享这些组件,而不是复制粘贴它们,从不同的项目中进行更改并与其他项目协作。Bit-使用代码组件共享和构建_Bit帮助您跨项目和应用程序共享、发现和使用代码组件以构建新功能和..._bitsrc.io使用纯CSS在深入研究这些库之前,不要忘记使用纯CSS.为什么?因为它是标准的,所以它提高了性能(GPU),提供了向后和向前的兼容性,并且它可能是创建动画的最有效方式。这里有10个纯CSS动画的例子。PureCSSSaturnHulaHoop1.Three.js拥有超过43,000颗星,这个流行的库是使用WebGL在浏览器上创建3D动画的绝佳方式。该库提供、CSS3D和WebGL渲染器,使我们能够跨设备和浏览器创建丰富的交互体验。该库于2010年4月首次推出,目前仍有近1,000名参与者参与开发。mrdoob/three.js_three.js—JavaScript3D库._github.com[](https://github.com/mrdoob/thr...2.Anime.js拥有超过20K的stars,Anime是一个JavaScript动画库,可以与CSS属性、单个CSS转换、SVG或任何DOM属性以及JavaScript对象一起使用。这个库允许您链接多个动画属性、同步多个实例、创建时间轴等。[](https://github.com/juliangarn...3.Mo.js这个库有14K星,是一个用于Web的动态图形工具带,具有简单的声明式API、跨设备兼容性和超过1500个单元测试。你可以在DOME或SVGDOME周围移动东西或创建独特的mo.js对象。虽然文档有些稀缺,但示例却很多,下面是对CSS技巧的介绍。legomushroom/mojs_mojs—web_github.com[](https://github.com/legomushro...4.Velocityat15Kstars,Velocity是一个快速的Javascript动画引擎,带有jQ??uery的$。与animate相同的API()。它有颜色动画,transforms,loops,easing,SVGsupport,scrolling。这是对Velocity高性能引擎的一个细分,下面介绍一下使用这个库的SVG动画。julianshapiro/velocity_velocity—JavaScript加速动画。_github.com[](https://github.com/julianshap...5.Popmotionat14Kstars,这个功能性和反应性动画库仅重11kb。它允许开发人员创建动画和从动作到动作的交互是可启动和可停止,并使用CSS、SVG、React、three.js和任何接受数字作为输入的API创建。Popmotion/popmotion_popmotion—一个功能性的反应式动画库。_github.com[](https://github.com/Popmotion/…6.Vivus在超过10K的星数中,Vivus是一个零依赖的javascript类,它可以让你为SVG制作动画,使它们看起来像是被绘制的。您可以使用众多可用动画之一,或创建自定义脚本来绘制SVG。查看Vivus-instant以获取实际示例并亲自动手。maxwellito/vivus_vivus—SVG_github.com[](https://github.com/maxwellito...7.GreenSockJSGSAP是一个用于创建高性能、零依赖、跨平台的JavaScript库声称在超过400万个网站中使用的浏览器动画。GSAP非常灵活,可以与React、Vue、Angular和vanillaJS一起使用。GSDevtools还可以帮助改进使用GSAP构建的动画。greensock/GreenSock-JS_GreenSock-JS—GreenSock的GSAPJavaScript动画库(包括Draggable)._github.com[](https://github.com/greensock/...8.ScrollRevealWith15Kstarsandzerodependencies,the该库为Web和移动浏览器提供简单的滚动动画,为滚动内容设置动画。它支持各种简洁的效果,甚至允许您使用自然语言定义动画。这是一个简短的SitePoint教程。jlmakes/scrollreveal_scrollreveal—Easyscrollanimationsforwebandmobilebrowsers._github.com[](https://github.com/jlmakes/sc...9.Hover(CSS)嗯,这是一个CSS库。在20Kstars,Hover提供了一组CSS3驱动的悬停效果可以应用于链接、按钮、徽标、SVG、特色图像等,可用于CSS、Sass和LESS。您可以复制和粘贴以在自己的样式表中使用IanLunn/Hover_Hover—CSS3支持的悬停效果集合应用于链接、按钮、徽标、SVG、特色图像等......_github.com[](https://github.com/IanLunn/Ho...10.Kute.js一个完全成熟的原生JavaScript动画引擎,具有基本的跨浏览器动画的功能。强调代码质量、灵活性、性能和大小(核心引擎是17k分钟和5.5kgzip压缩)-这是一个演示。该库也是可扩展的,因此您可以添加自己的功能。thednp/kute.js_kute.js—KUTE.js是一个原生的Javascript动画引擎,具有出色的代码质量、出色的性能、SVG..._github.com[](https://github.com/thednp/kut...11.Typed.jsT这个6Kstar库基本上可以让你以选定的速度为字符串创建打字动画。你也可以在页面上放置一个HTMLdiv并从中读取,以允许搜索引擎和禁用JavaScript的用户。由Slack提供支持并且被其他人使用,这个库既流行又出奇地有用。mattboldt/typed.js_typed.js—一个JavaScript打字动画库_github.com[](https://github.com/mattboldt/...另请参阅Watch:添加了iTyped延迟:AirbnbLottie的LottieLottie是一个用于Web和iOS的移动库,用于解析使用Bodymovin导出到json的Adob??eAfterEffects动画并在本地渲染它们。airbnb/lottie-web_lottie-web-在Web上本地渲染AfterEffects动画,Android和iOS,以及ReactNative…_github.com[](https://github.com/airbnb/lot…