分享35个第三方动画库 , 总有一款你想要的

大白兔没糖

已于 2024-01-12 11:02:35 修改

阅读量504

点赞数

文章标签： js css

于 2023-08-17 17:42:01 首次发布

本文链接：https://blog.csdn.net/m0_53850749/article/details/132340927

版权

Lax.js

Lax.js 是一款原生零依赖的制作跟随页面滑动的 JavaScript
动画插件，这款插件非常的轻巧，压缩版大小只有3kb。当滑动页面时，帮助创建酷炫的动画效果，比如滚动视差、变形移动等基本的动画效果，响应式兼容方面，比如手机端也有不错的支持。除了可以使用插件默认集成的动画属性，还可以自定义更加丰富的动画属性。

地址DEMO：https://alexfox.dev/lax.js/
地址API：https://github.com/alexfoxy/lax.js

Velocity.js

Velocity是一个动画引擎，其API与jQuery的$.animate()相同。它既可以使用jQuery，也可以不使用jQuery。它的速度快得令人难以置信，而且具有彩色动画、变换、循环、缓和、SVG 支持和滚动等功能。它是 jQuery 和 CSS 过渡效果的完美结合。

github地址：https://github.com/julianshapiro/velocity
官方地址：http://velocityjs.org/

scrollReveal

ScrollReveal采用单例模式；无论构造函数被调用多少次，它总是返回相同的实例。这意味着我们可以在任何地方调用它，无需担心。

地址DEMO：https://scrollrevealjs.org/
地址API：https://scrollrevealjs.org/api/reveal.html

Greensock

GSPA:制作网页动画的工具，专门鼠标控制的动画库。
地址API：https://greensock.com/docs/

wow.js

wow.js依赖于animate.css，首先在头部引用animate.css或者animate.min.css

地址DEMO：https://wowjs.uk/
地址API：https://github.com/graingert/wow

Rellax.js

rellax.js是一款轻量级的纯JavaScript滚动视觉差特效插件。rellax.js压缩后的版本仅871个字节，在手机等小屏幕设备中，插件会自动限制视觉差特性。
地址DEMO：https://dixonandmoe.com/rellax/
地址API：https://github.com/dixonandmoe/rellax

AniJS

AniJS允许您为网站创建动画样式
地址API：https://anijs.github.io/studio/

Kute.js

Kute.js 是一个原生的 Javascript 动画引擎，具有优秀的性能和模块化的代码。它提供了一大堆工具，以帮助创建自定义动画。它提供了易于使用的方法来设置高性能、跨浏览器的动画。
地址DEMO：https://thednp.github.io/kute.js/
地址API：https://github.com/thednp/kute.js

Simple Parallax

地址DEMO：https://simpleparallax.com/#examples
地址API：https://simpleparallax.com/

SVG.js

SVG.js是一个轻量级的JavaScript库，其目标是尽可能小巧，同时提供接近完整的 SVG 规范。如果你还不相信，下面是一些亮点。
地址API：https://svgjs.dev/docs/3.0/

Parallax.js

地址API：https://github.com/wagerfield/parallax

Barba.js

Barba.js 是一个小巧（7kb，已压缩）且易于使用的库，可帮助您在网站页面之间创建流畅、平滑的过渡。它能让你的网站像 SPA（单页面应用程序）一样运行，帮助减少页面之间的延迟，最大限度地减少浏览器的 HTTP 请求，增强用户的网络体验。

地址DEMO：https://barba.js.org/
地址API：https://barba.js.org/docs/getstarted/intro/

mo.js

mo.js 开发人员工具可帮助您构建和调试动画。

地址DEMO：https://mojs.github.io/
地址API：https://mojs.github.io/api/

Particles.js

一款轻量级、无依赖性和响应式的 JavaScript 粒子背景插件。

地址API：https://marcbruederlin.github.io/particles.js/

tsParticles

地址DEMO：https://particles.js.org/
地址API：https://github.com/matteobruni/tsparticles

Rough Notation

用于在网页上创建注释并将其制作成动画的小型 JavaScript 库

地址DEMO：https://roughnotation.com/
地址API：https://github.com/rough-stuff/rough-notation

Aos.js

地址API：https://michalsnik.github.io/aos/

Framer Motion

地址API：https://github.com/framer/motion

React Motion

地址API：https://www.npmjs.com/package/react-motion

Magic.css

地址API：https://www.minimamente.com/project/magic/

React Spring

地址API：https://react-spring.dev/docs/getting-started

React Reveal

地址DEMO：https://www.react-reveal.com/examples/
地址API：https://www.react-reveal.com/docs/

Hover.css

地址DEMO：http://ianlunn.github.io/Hover/
地址API：https://github.com/IanLunn/Hover/blob/master/README.md#hovercss

Animate.css

地址API：https://github.com/animate-css/animate.css

Animista

地址DEMO：https://animista.net/
地址API：https://animista.net/

Vivify

兼容所有现代浏览器，包括 Android 和 iOS 移动设备和平板设备。
采用 CSS3 过渡技术，确保动画的性能和兼容性。
最小化版本只有 7kb，非常适合移动项目。
得益于该库的核心功能，你可以连锁和循环动画。
使用该库，任何可动画化的 css 属性都可以动画化。
支持安卓 4.0 以上版本、iOS 6 以上版本以及最新的 Opera、Firefox、Safari 和 IE 10 以上版本。
已在 Mopro 中测试

地址API：https://github.com/iancl/vivifyJS

Lottie - 轻松实现复杂的动画效果

Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，设计师可以使用 Adobe After Effects 设计出漂亮的动画之后，使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式，就可以直接运用在 iOS、Android、Web 和 React Native之上，无需其他额外操作。
地址API：http://airbnb.io/lottie/#/web

createjs

一套模块化的库和工具，它们可以一起或独立地使用，通过HTML5在开放的网络技术上实现丰富的交互内容。
demo:https://createjs.com/demos/easeljs/game
地址API：https://createjs.com/docs

SVGA

SVGA 是一种跨平台的开源动画格式，同时兼容 iOS / Android / Web。SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。动画开发从未如此简单！
SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。
动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 SVGAPlayer 之后直接使用。
动画开发从未如此简单！>> 立即使用
地址API：https://svga.io/integrated.html
在这里插入图片描述

对你有帮助的，点个赞，收藏一下，以便于你后期的查找