当前位置：首页 > 科技 > 软件

20个酷炫的开源免费JavaScript动画库，前端开发、游戏开发推荐收藏

来源：责编：时间：2023-11-04 23:04:39 449观看

导读如果要实现一些酷炫的网页动态效果，又不想重复造轮子，那么以下一些开源JavaScript动画库值得尝试。1.three.js（95.4K Star)https://github.com/mrdoob/three.js/three.js库是一个令人惊叹的2D/3D JavaScript动画库，可用于

如果要实现一些酷炫的网页动态效果，又不想重复造轮子，那么以下一些开源JavaScript动画库值得尝试。

1.three.js（95.4K Star)

https://github.com/mrdoob/three.js/

three.js库是一个令人惊叹的2D/3D JavaScript动画库，可用于游戏、儿童教育网站、各种花哨的演示文稿等各种复杂网页动画的开发。目前的版本的渲染器包括：WebGL、处于实验阶段的WebGPU、SVG和CSS3D。

快来欣赏一下three.js那些酷炫的效果吧：https://threejs.org/examples/#webgl_animation_keyframes

2.Anime.js（47.4K Star)

https://github.com/juliangarnier/anime

Anime.js是一个轻量级的JavaScript动画库，具有功能强大的API，可以处理的动画类型包括：CSS属性、SVG、DOM属性和JavaScript对象。

3.ScrollReveal（21.8K Star)

https://github.com/jlmakes/scrollreveal

ScrollReveal是一个用于在元素进入/离开窗口时的JavaScript动画库。

4.Babylon(21.6K Star)

https://github.com/BabylonJS/Babylon.js

Babylon.js是一个动画和游戏引擎，主要用JavaScript编写，它提供了内置的WebGPU支持，并支持在桌面和移动端的浏览器上运行。

5.Mojs（18.1K Star）

https://github.com/mojs

Mojs是一个免费的开源动画库，它提供了数十个非常有用的开源工具，如运动播放器（Mojs播放器）、曲线和时间轴运动编辑器等。

6.GreenSock（17.4K Star)

https://github.com/greensock/GSAP

https://gsap.com/

GreenSock是一个高级且超级丰富的JavaScript动画库，允许开发人员轻松创建复杂的动画。它为开发人员提供了DrawSVGPlugin、MorphSVGPlugin和MotionPathPlugin用于创建平滑的SVG动画。

GreenSock默认支持WebGL，它是许多JavaScript游戏开发者为他们的游戏添加效果的最爱选择。

GASP（GreenSock Animation Platform）是一个强大的JavaScript工具集，可以在所有主流浏览器中构建高性能动画。包括：CSS动画、SVG、画布、React、Vue、WebGL、颜色、字符串、运动路径等任何JavaScript所能控制的任何内容！

GSAP的ScrollTrigger插件支持用最少的代码创建令人惊叹的基于滚动的动画。gsap.matchMedia() 函数使得构建响应式、可访问性友好的动画变得轻而易举。

7.Velocity.js（17.2K Star)

https://github.com/julianshapiro/velocity

http://velocityjs.org/

Velocity是一个动画引擎，具有与jQuery的$.animate() 相类似的API。它的速度快得令人难以置信，它的主要特点是支持彩色动画、变换、循环、缓和动画、SVG和滚动等。

8.Vivus（15K Star）

https://github.com/maxwellito/vivus

https://maxwellito.github.io/vivus/

Vivus是一个轻量级的JavaScript类，没有任何依赖，用于实现SVG动画，使其具有绘制的外观效果。包含有各种不同的动画效果，并可以创建自定义脚本的选项，以任何方式绘制SVG。

9.TweenJS（4K Star）

https://github.com/CreateJS/TweenJS

TweenJS是一个在JavaScript中使用的简单补间动画库。它的开发是为了与EaselJS库集成，但并不依赖于它。它支持数字对象属性和CSS样式属性的补间动画。

10.Scene.js（2.6K Star）

https://github.com/daybrush/scenejs

Scene.js是一个基于JavaScript CSS时间轴的动画库。它附带了许多示例，可以帮助前端开发人员快速入门，创建复杂的对象动画。示例包括：树效果、雪花飘落动画、立方体效果、内容卡旋转、圆爆裂和棋盘动画等。如下所示：

11 .Animatic（1.4K Star)

https://github.com/lvivski/animatic

使用Animatic可以轻松地一次为一百多个对象设置动画。可以用于模拟现实的对象，它的大小只有7K。

12.Typed.js

https://github.com/mattboldt/typed.js/

Typed.js是一个用于实现输入动画的JavaScript动画库。可以根据您设置的速度显示输入的任何字符。以下网站提供了一些例子，可以看看。

https://mattboldt.com/demos/typed-js/

13.Between.js

https://github.com/sasha240100/between.js

Between.js是一个轻量级JavaScript（ES6）补间动画库，它适用于所有浏览器，并带有简单的API。以下网站可以查看Between.js的各种例子：

https://between.js.org/

14.Just Animate 2

https://github.com/just-animate/just-animate

Just Animate 2是一个功能丰富的动画库，支持时间轴动画、序列、CSS动画，并内置补间引擎。

15.PowerGlitch

https://github.com/7PH/powerglitch

PowerGlitch是一个独立的动画库，没有外部依赖项。它利用CSS动画来显示小动画，整个js小于2kb，非常轻量。

16.Starback.js

https://github.com/zuramai/starback.js

Starback.js用于给网页创建漂亮的星星动画或雪花效果。

17.Loading animations

https://github.com/Skparab1/loading-animations

这是一个简单的JavaScript加载动画库，它提供了许多带有代码示例的加载动画。

18.Progressbar.js

https://github.com/kimmobrunfeldt/progressbar.js

https://kimmobrunfeldt.github.io/progressbar.js/

Progressbar.js提供了响应使的进度条动画，带有动画SVG路径，使用内置形状或创建自己的路径，可以根据需要实现自定义动画。动画效果尽享丝滑。

19.Motus

https://github.com/alexcambose/motus

Motus是一个简单且无依赖性的JavaScript动画库，可以使用Motus创建模拟 CSS 关键帧，实现精美的滚动动画。

20.Josh.js

https://github.com/mamunhpath/josh.js

Josh.js是一个简单的页面滚动动画JavaScript库。Josh.js无需依赖jQuery，它的后台使用的是Animate.css，因此它允许您创建自己的动画。另外，Josh.js支持ES6并提供ES5的编译版本。

本文链接：http://www.28at.com/showinfo-26-16931-0.html20个酷炫的开源免费JavaScript动画库，前端开发、游戏开发推荐收藏

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： MySQL中一条查询语句的执行全过程是怎样的？

下一篇：使用Gorm进行CRUD操作指南

标签：

热门焦点

Redmi Buds 4开箱简评：才199还有降噪可以无脑入

在上个月举办的Redmi Note11T Pro系列新机发布会上，除了两款手机新品之外，Redmi还带来了两款TWS真无线蓝牙耳机产品，Redmi Buds 4和Redmi Buds 4 Pro，此前我们在Redmi Note11T
CSS单标签实现转转logo

转转品牌升级后更新了全新的Logo，今天我们用纯CSS来实现转转的新Logo，为了有一定的挑战性，这里我们只使用一个标签实现，将最大化的使用CSS能力完成Logo的绘制与动画效果。新logo
自律，给不了Keep自由！

来源 | 互联网品牌官作者 | 李大为编排 | 又耳审核 | 谷晓辉自律能不能给用户自由暂时不好说，但大概率不能给Keep自由。近日，全球最大的在线健身平台Keep正式登陆港交所，努力
签约井川里予、何丹彤，单视频点赞近千万，MCN黑马永恒文希快速崛起！

来源：视听观察永恒文希传媒作为一家MCN公司，说起它的名字来，可能大家会觉得有点儿陌生，但是说出来下面一串的名字之后，或许大家就会感到震惊，原来这么多网红，都签约这家公司了。根
新电商三兄弟，“抖快红”成团！

来源：价值研究所作者：Hernanderz 随着内容电商的概念兴起，抖音、快手、小红书组成的“新电商三兄弟”成为业内一股不可忽视的势力，给阿里、京东、拼多多带去了巨大压
大厂卷向扁平化

来源：新熵作者丨南枝编辑丨月见大厂职级不香了。俗话说，兵无常势，水无常形，互联网企业调整职级体系并不稀奇。7月13日，淘宝天猫集团启动了近年来最大的人力制度改革，目前已形成一
阿里瓴羊One推出背后，零售企业迎数字化新解

作者:刘旷近年来随着数字经济的高速发展，各式各样的SaaS应用服务更是层出不穷，但本质上SaaS大多局限于单一业务流层面，对用户核心关切的增长问题等则没有提供更好的解法。在Saa
小米汽车电池信息疑似曝光：容量101kWh，支持800V高压快充

7月14日消息，今日一名博主在社交媒体发布了一张疑似小米汽车电池信息的照片，显示该电池包正是宁德时代麒麟电池，容量为101kWh，电压为726.7V，可以预测小
四年持续更迭坚持探索行业无人之境，HarmonyOS 4带来五大升级多项创新

除了华为每年新发布的旗舰手机系列，上亿花粉更加期待鸿蒙系统每次的跨版本大更新。8月4日，HarmonyOS 4于HDC 2023正式发布，这也是该系统历经四年的再

20个酷炫的开源免费JavaScript动画库，前端开发、游戏开发推荐收藏

1.three.js（95.4K Star)

2.Anime.js（47.4K Star)

3.ScrollReveal（21.8K Star)

4.Babylon(21.6K Star)

5.Mojs（18.1K Star）

6.GreenSock（17.4K Star)

7.Velocity.js（17.2K Star)

8.Vivus（15K Star）

9.TweenJS（4K Star）

10.Scene.js（2.6K Star）

11 .Animatic（1.4K Star)

12.Typed.js

13.Between.js

14.Just Animate 2

15.PowerGlitch

16.Starback.js

17.Loading animations

18.Progressbar.js

19.Motus

20.Josh.js

Redmi Buds 4开箱简评：才199还有降噪可以无脑入

CSS单标签实现转转logo

自律，给不了Keep自由！

签约井川里予、何丹彤，单视频点赞近千万，MCN黑马永恒文希快速崛起！

新电商三兄弟，“抖快红”成团！

大厂卷向扁平化

阿里瓴羊One推出背后，零售企业迎数字化新解

小米汽车电池信息疑似曝光：容量101kWh，支持800V高压快充

四年持续更迭坚持探索行业无人之境，HarmonyOS 4带来五大升级多项创新

最新推荐

猜你喜欢

热门推荐

相关资讯