适用于您的互动网络项目的前13个JavaScript动画库 HTML标签

添加动画到您的Web应用程序是改善应用程序外观和感觉的最佳方法之一。

动画是网页设计师/开发人员用来吸引用户注意力并引导他们采取某些操作的移动对象。

编写代码添加动画可能是很多工作。幸运的是，您可以使用动画库。

动画库是设计师可以添加到其网站中的预制动画文件集合。

为什么使用动画库？

• 节省时间：动画库将提供基础功能，使您有更多时间专注于应用程序的功能。
• 可定制：动画库通常提供模板代码，您可以根据需要进行自定义。
• 易于实现一致的设计：如果您在不同的网页上使用动画，您可以使用一个库来确保颜色混合和字体一致。
• 提供各种效果：一些动画库有很多可选择的动画。

我已经评估了一些最好的JavaScript动画库，您可以如下所示使用：

Anime.js

Anime.js是一个轻量级的JavaScript库，具有强大的API。您可以将此库与JavaScript对象、DOM属性、SVG和CSS属性一起使用。

安装

npm install animejs --save

用法

import anime from 'animejs/lib/anime.es.js';

主要特点：

• 易于使用：我发现Anime.js易于使用，即使对于JavaScript知识有限的人来说，因为它有很好的文档。
• 可扩展：您可以自定义此库中的代码块，以满足您的需求。您还可以创建回调、时间线和缓动函数。
• 灵活：Anime.js不仅是一个JavaScript动画库，您还可以将其与SVG和CSS属性一起使用。
• 多浏览器支持：Anime.js的动画在Chrome、Safari、IE/Edge、Firefox和Opera等各种浏览器上运行。

Anime.js是一个开源免费库。

Mo.js

Mo.js是一个JavaScript运动图形库。该库通过其声明性API使您完全控制动画。

安装

npm install @mojs/core

或者

yarn add @mojs/core

用法

import mojs from '@mojs/core';

主要特点：

• 模块化：该库中的组件被分成小的、可重用的代码块。在测试该库时，我可以添加或去除各种组件，而无需重写整个代码。
• 简单：API的声明性设计使得使用该库和自定义其组件变得容易。
• 响应式：Mo.js是视网膜就绪的，适应不同的屏幕尺寸。
• 强大：通过广泛的测试，确保该库按预期工作。

Mo.js是一个免费的开源库。

Popmotion

Popmotion是一个简单的动画库，用于创建令人愉悦的用户界面。我发现使用这个库与原生JavaScript以及大多数JavaScript库和框架都很容易。

安装

npm install popmotion

用法

import { animate } from "popmotion"

主要特点：

• 强大： 尽管animate函数只有4.5kb，但它支持颜色、数字和复杂字符串的弹簧、惯性和关键帧动画。
• TypeScript支持： Popmotion使用TypeScript编写，它是JavaScript的超集。因此，如果您在项目中使用TypeScript，您可以使用类型。
• 可定制： 该库中的组件可以根据您的动画需求进行定制。
• 稳定： Popmotion中的所有组件都经过了彻底的测试。

Popmotion可以免费使用。

Theatre.js

Theatre.js是一款带有专业动画设计工具集的库。使用它，您可以设计电影场景和令人愉悦的UI交互。

要在HTML和纯JavaScript中使用Theatre.js，您可以将其CDN链接添加到HTML文档的头部。

主要特点：

• 与多个JavaScript框架和库兼容： 您可以将Theatre.js与React Three Fiber和THREE.js一起使用。
• 可定制： 该库具有先进的序列编辑器，可帮助您在几秒钟内创建序列块。您还可以使用图形编辑器对应用程序中的每一帧进行微调。
• 可扩展： Theatre.js具有各种扩展，增加了其可用性。您可以使用您自己的工具或添加扩展到该库中。

Theatre.js是一款开源库。

ScrollReveal.js

ScrollReveal.js是一个JavaScript库，允许您在元素滚动到视口时对其进行动画处理。

安装

npm install scrollreveal

用法

const ScrollReveal = require('scrollreveal')

主要特点：

• 易于使用： 将scrollreveal类添加到要动画处理的元素上，您就可以开始使用这个库了。
• 可扩展： 您可以向此库的组件中添加新元素或从中删除元素。
• 灵活： 您可以设置ScrollReveal.js以在悬停、点击或滚动时显示元素。该库还允许您控制显示的缓动、方向和速度。

ScrollReveal.js是一个收费库，起价为30美元。

GreenSock GSAP

GreenSock GSAP是一个用于动画处理SVG、UI、React或Three.js组件的JavaScript库。该库具有创建快速和吸引人的动画所需的一切。

主要特点：

• 高兼容性： 您可以将GSAP与Canvas、CSS、HTML、SVG和JavaScript库和框架（如TweenMax、React、Vue和jQuery）一起使用。
• 可扩展： GSAP的模块化架构允许您自定义组件以满足您的动画需求。
• 灵活： GSAP没有预定义的可以进行动画处理的内容列表。您可以对对象的任何数字属性进行动画处理。
• 强大： 使用GSAP，您可以对数组、贝塞尔曲线、颜色等进行动画处理。该库还允许您构建序列、重复、yoyo和定义回调。

GreenSock Animation Platform (GSAP)有一个免费版本，付费版本的起价为88英镑。

ProgressBar.js

ProgressBar.js是一个用于创建响应式和时尚进度条的动画库。

安装

使用bower

bower install progressbar.js

使用npm

npm install progressbar.js

主要特点：

• 内置多种形状：ProgressBar.js内置了三种形状，半圆形、圆形和线形。您还可以使用此库创建自定义形状。
• 响应式：此库的进度条在不同屏幕尺寸上完美工作。
• 可定制：您可以自定义组件的颜色、字体大小和字体样式。

ProgressBar.js是一个开源库。

AnisJS

AniJS是一个提供快速简便的方式来开发和原型化UI的UI交互库。此库在压缩后大小为9.0kb。

安装

bower install anijs --save

使用

主要特点：

• 使用简单：要使用此库，请在需要动画的元素上添加AnisJS类。
• 可扩展：您可以自定义AnisJS组件以满足您的需求。
• 灵活：您可以在JavaScript对象、SVG属性、CSS属性和DOM元素中使用AnisJS。
• 与主流浏览器兼容：您可以在Chrome、Firefox、Safari和Edge上使用AnisJS。

AnisJS是一个开源库，可以免费使用。

Three.js

Three.js是一个通用的3D库。该库使用WebGL渲染器，还支持SVG和CSS3D渲染器作为插件。

安装

npm install --save three

使用

import * as THREE from 'three';

主要特点：

• 易于使用：Three.js有着完善的API文档，易于设置和使用。
• 功能强大：您可以使用该库创建复杂的3D场景。Three.js还支持各种功能，如动画、材质和灯光。
• 灵活：您可以创建不同的3D动画，从游戏、可视化到模拟。
• 与各种框架和库兼容：您可以将Three.js库与React Three Fiber、Egret、Aframe、PlayCanvas和Babylon.js一起使用。

Three.js是一个开源JavaScript库。

Vivus.js

vivus.js 是一个轻量级的用于动画SVG的JavaScript库。使用此库对SVG进行动画处理时，它们会呈现出被绘制出来的效果。

安装

npm install vivus

或者

bower install vivus

主要特点：

• 多种动画类型：Vivus.js允许您创建延迟、逐个和同步动画。在该库中，延迟是默认的动画类型。
• 允许自定义脚本：您可以创建自定义脚本来使用此库中可用的动画类型。
• 无依赖性：由于无任何依赖性，您可以在大多数Web项目中使用此库。

Vivus.js是一个免费的库。

Tilt.js

Tilt.js 是一个小型JavaScript库，允许开发人员在DOM上创建3D倾斜效果。您可以使用Tilt.js与原生JavaScript或React、Preact、Angular和Polymer等库和框架一起使用。

安装

npm install --save tilt.js

或者

yarn add tilt.js

使用

将此脚本添加到标签之前。

主要特点：

• 易于使用：将data-tilt属性添加到要使用Tilt.js的元素上即可开始使用。
• 可定制：您可以自定义Tilt.js的组件以适应您的需求。
• 响应式：该库中的组件可在具有不同屏幕尺寸的设备上使用。
• 可访问性：Tilt.js以可访问性为基础构建，并支持屏幕阅读器和键盘导航。

Barba.js

Barba.js是一个用于在网站页面之间创建流畅过渡效果的小型库。这个库的压缩版本仅有7kb，并且在减少浏览器请求和缩短不同网页之间的延迟方面非常方便。

安装

npm install @barba/core

或者

yarn add @barba/core

使用

import barba from '@barba/core';

主要功能：

• 使用TypeScript编写：由于TypeScript允许您在代码中定义类型，因此可以尽早捕捉到代码错误。
• 智能过渡：Barba.js允许您定义规则并确定应用程序的正确过渡效果。
• 各种插件：您可以通过诸如barbarouter和barbaprefetch之类的插件来改善Barba.js的功能。

BarbaJS是根据MIT许可免费使用的库。

Splide

Splide是一个用TypeScript编写的轻量级滑块/轮播库。该库允许您通过更改选项（如缩略图、多个幻灯片、垂直方向和嵌套滑块）来创建不同类型的幻灯片。

安装

npm install @splidejs/splide

主要功能：

• 可扩展：您可以通过extension feature向应用程序添加其他组件。
• 灵活：您可以使用Splide创建各种类型的滑块，例如视频滑块、文本滑块和image sliders。您还可以创建嵌套滑块。
• 无依赖：您可以在任何构建工具或框架中使用Splide，因为它不依赖于其他库。

Splide有一个用于个人使用的免费套餐。如果您打算在商业环境中使用此库，则可以获得从10美元起的高级套餐许可。

结论

您可以使用上述动画库将静态布局变成充满活力的布局。选择动画库将取决于您想要实现的效果和易用性。有时，您可能会在不同的应用页面上使用多个动画库。

如果您喜欢JavaScript库，可以查看我们关于可以使用的最佳React animation libraries的文章。