百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

最近在做动画相关的项目,推荐 11 个好用的 JS 动画库

liuian 2025-02-28 16:30 9 浏览

作者:Jonathan Saring

译者:前端小智

来源:medium


为了保证的可读性,本文采用意译而非直译。

1.Three.js

超过46K的星星,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用 WebGL。这个库提供了、CSS3D 和 WebGL渲染器,让咱们在设备和浏览器之间创建丰富的交互体验。该库于2010年4月首次推出,目前仍有近1000名贡献者在开发中。

2. Anime.js

超过20K的星星,Anime 是一个 JS 动画库,可以处理CSS属性,单个CSS转换,SVG 或任 何 DOM 属性以及 JS 对象。 此库允许咱们链接多个动画属性,将多个实例同步,创建时间轴等。

3.Mo.js

超过 14K 星星,是一个用于 Web 的动态图形工具带,具有简单的声明 API,跨设备兼容性和超过1500个单元测试。 咱们可以在 DOME 或SVG DOME周围移动东西或创建唯一的 mo.js 对象。虽然文档有些稀缺,但是示例很丰富,这里有CSS技巧的介绍。

4. Velocity

超过 15k 星星,Velocity是一个快速的 JS 动画引擎,拥有与jQuery的 $.animate() 相同的API。它具有彩色动画、转换、循环、画架、SVG支持和滚动。这里是Velocity的高性能引擎的分解,这里是使用该库的 SVG 动画的介绍。

5. Popmotion

超过 14K 星星,这个动画库大小只有 11 kb。它允许开发人员从动作创建动画和交互,这些动作是可以启动和停止,可以使用 CSS、SVG、React、three 创建,js 和任何接受数字作为输入的 API。

6. Vivus

超过 10k 星星,Vivus是一个零依赖的 JS 类,可以让你为SVG制作动画,让它们具有被绘制的外观。 咱们可以使用许多可用动画之一,或创建自定义脚本来绘制SVG。 查看Vivus-instant获取实际示例,亲自动动手练习一下。

7. GreenSock JS

GSAP 是一个JS 库,用于创建高性能、零依赖、跨浏览器动画,据称在超过400万个网站上使用。GSAP是灵活的,可以与 React、Vue、Angular 和 vanilla JS 协同工作。GSDevtools 还可以帮助使用 GSAP 构建dubug 动画。

8. Scroll Reveal

拥有15K颗星星和零依赖,这个库为 web 和移动浏览器提供了简单的滚动动画,以动画的方式显示滚动中的内容。它支持多种简洁的效果类型,甚至允许你使用自然语言定义动画。这里有一个简短的 SitePoint教程。

9. Hover (CSS)

超过 20k 星星,Hover 提供了CSS3支持的悬停效果集合,可应用于链接、按钮、徽标、SVG、特色图像等,在CSS、Sass和LESS中可用。您=可以复制和粘贴希望在自己的样式表中使用的效果,或者引用样式。

10. Kute.js

一个完全成熟的原生 JS 动画引擎,具有跨浏览器动画的基本功能。 重点是代码质量,灵活性,性能和大小(核心引擎17k 和 gzipped 5.5k) - 这是一个演示。 该库也是可扩展的,因此你可以添加自己的功能。

11. Typed.js

超过 7k 星星,这个库基允许你以选定的速度为字符串创建打字动画。 你还可以在页面上放置 HTML div 并从中读取以允许搜索引擎和禁用 JS 的用户访问,由Slack和其他人使用,这个库既流行又非常有用。


原文:
https://blog.bitsrc.io/11-javascript-animation-libraries-for-2018-9d7ac93a2c59


相关推荐

x-cmd install | jellex - 用 Python 语法在终端里玩转 JSON 数据!

还在为命令行下处理JSON数据烦恼吗?jellex来了!它是一款基于终端的交互式JSON和JSONLines数据处理工具,让你用熟悉的Python语法,轻松过滤、转换和探索JSO...

一篇长文带你在Python里玩转Json数据

Json简介Json(JavaScriptObjectNotation)很多网站都会用到Json格式来进行数据的传输和交换,就像上篇我提到的网易云音乐接口,它们返回的数据都是Json格式的。这因为...

Python JSON 魔法手册:数据转换的终极艺术

对话实录小白:(崩溃)我从API拿到了JSON数据,怎么变成Python对象?专家:(掏出魔法书)用json模块,轻松实现数据转换!JSON基础三连击1.字符串Python对...

Python JSON 详解教程(python json())

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式(lightweightdatainterchangeformat)常用于Web应用、配置文件(co...

Python 数据的 JSON 格式序列化及反序列化

在Python中,将数据转换为JSON格式非常简单,可以使用内置的json模块。json模块提供了json.dumps()和json.dump()方法,用于将Python对象...

如何使Python类可JSON序列化(python json 类)

技术背景在Python开发中,JSON(JavaScriptObjectNotation)是一种常用的数据交换格式。然而,Python的json模块默认只能序列化一些基本数据类型,如字典、列表、字...

详细介绍一下Python如何对JSON格式数据进行处理?

在Python中对于JSON数据的处理是在日常开发中的常见需求之一。通常情况下,对JSON数据的处理主要涉及到如下的的几个步骤对于JSON数据的解析操作对于JSON数据的处理操作对于JSON数据的格式...

Python 字典l转换成 JSON(python转化字典)

本文需要5分钟。如果对您有用可以点赞评论关注.Python字典到JSONJSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式,它基于ECMAScrip...

打造熟悉的VS界面风格(vs界面设计美化)

用惯了老机子的VS界面,换新机子时,各种不适应。现在重新打造老款样式:1)下载VisualStudio2013ColorThemeEditorhttps://marketplace.vis...

办公小技巧:全部亮相 让Excel单元格完全显示文本

平时我们在使用Excel制作表格的时候,经常会遇到由于文本内容较多,导致这些内容无法在一个单元格中完全显示。常规的方法是将单元格设置为“自动换行”,但是这样会影响整个文件的美观。下例是某小区的入住登记...

WinForms 中的 CheckBox 控件使用指南

在WinForms中,CheckBox控件是一个允许用户选择或取消选择的单选按钮。它通常用于表示布尔值(真/假)或允许多选的情况。以下是如何使用CheckBox控件的一些基本信息和示例代码。创建...

图片转文字--四种OCR工具的安装和使用

本文仅测试简单的安装和使用,下一步应该是测试不同数据集下的检测准确率和检测效率,敬请期待。作者的系统环境是:笔记本:ThindPadP520OS:win11显卡:QuadroP520一、EasyO...

C# 给Word每一页设置不同图片水印

Word中设置水印时,可加载图片设置为水印效果,但通常添加水印效果时,会对所有页面都设置成统一效果,如果需要对每一页或者某个页面设置不同的水印效果,则可以参考本文中的方法。下面,将以C#代码为例,对W...

集成的面向对象控件Xtreme Controls正式发布v17.0.0

CodejockXtremeControls为Windows图形用户软件工程师提供众多的有关MFC的控件产品,该产品是通过完全测试并专门为图形用户设计的一款专业控件。它是一款集成了面向对象的控件被...

Win10 Build 10061老问题修复新问题来

|责编:刘菲菲【中关村在线软件资讯】4月23日消息:微软今天正式推送了Windows10Build10061预览版这个版本除了正常的功能更新和调整外,还修复了多个bug。其中一部分对于开发者开...