12 个动态 JavaScript 动画库增强用户体

12 个动态 JavaScript 动画库增强用户体验

过迷人有趣的动画可以吸引用户的注意力！因此，今天我们将一起来探索 10 个动态 JavaScript 动画库，轻松增强用户体验。从滚动动画到手写效果和 SPA 页面过渡，这些库增添了独特的美感，提高了参与度，并留下了令人难忘的第一印象。

现在，让我们一起来深入了解一下！

1.Anime.js

地址：https://animejs.com/

Anime.js 在 GitHub 上拥有超过 43,000 颗星，是顶级动画库。这个轻量级的 JavaScript gem 拥有一个简单的 API，允许 CSS 属性、SVG、DOM 属性和 JavaScript 对象的无缝动画。

使用 Anime.js，可以实现播放、暂停、重新启动或反转动画。其多功能性在通过精确排序和重叠功能对多个元素进行动画处理方面表现出色。使用回调探索各种与动画相关的事件，并承诺动态动画体验。

2.Lottie

地址：https://airbnb.io/lottie/

Lottie 是一个出色的库，可以解析通过 Bodymovin 插件以 JSON 格式导出的 Adobe After Effects 动画。它可以在移动和 Web 应用程序上无缝地本地渲染这些动画，从而消除了专业 After Effects 艺术家手动重新创建复杂设计的需要。

GitHub 网页版拥有超过 27,000 颗星，凸显了其受欢迎程度和有效性。与 Lottie 一起探索轻松动画集成的世界！

3. Velocity

地址：http://velocityjs.org/

Velocity 是一个动态库，使你能够制作迷人的彩色动画、变换、循环、缓动、SVG 动画等。利用熟悉的 $.animate() API（类似于 jQuery），它可以在可用时与 jQuery 无缝集成。

凭借渐变效果、滚动、滑动以及对持续时间和延迟的全面控制等多功能功能，Velocity 在 GitHub 上拥有超过 17,000 颗星，脱颖而出。它是 Anime.js 的一个引人注目的替代品，它提供了一个强大的解决方案来增强你的动画工作。

4.Rough Notation

地址：https://roughnotation.com/

使用 Rough Notation 提升你的网页注释，这是一个 JavaScript 库，可为你带来生动的动画注释。由 RoughJS 提供支持，它增添了迷人的手绘美感。探索多种注释样式，例如下划线、框、圆圈、突出显示和删除线。

享受对每种注释样式的持续时间和颜色的细粒度控制。利用 Rough Notation 的动态且丰富多彩的注释功能，在您的网页上释放创造力！

5.Popmotion

地址：https://popmotion.io/

使用 Popmotion 释放动画的力量！与传统库不同，Popmotion 不会对对象的属性做出假设。它提供了简单、可组合的函数，适用于任何 JavaScript 环境。深入研究数字、颜色和复杂字符串的关键帧、弹簧和惯性动画。

这个经过充分测试和积极维护的库在 GitHub 上拥有超过 19,000 颗星，为你的项目带来多功能性和活力。利用 Popmotion 的创新和灵活方法提升你的动画！

6. live

地址：https://maxwellito.github.io/vivus/

使用 Vivus 提升你的 SVG！这个 JavaScript 库使 SVG 栩栩如生，创造了绘图过程的错觉。Vivus 快速、轻量且独立于工具，提供三种动画方法：延迟、同步和一对一。

使用自定义脚本定制您的 SVG 绘图体验，调整持续时间、延迟、计时函数等。深入 Vivus Instant 的世界，获取现场实践示例。使用 Vivus 的迷人动画将静态 SVG 转变为动态杰作！

7.GSAP：动画平台

地址：https://greensock.com/

使用 GreenSock 动画平台 (GSAP) 潜入令人惊叹的动画世界！这个多功能库无缝集成到主要浏览器、React、Vue、WebGL 和 HTML 画布中，提供对颜色、字符串、运动路径等进行动画处理的功能。

GSAP 的 ScrollTrigger 插件通过令人印象深刻的基于滚动的动画增强您的创作，只需几行代码。

GSAP 受到超过 1100 万个网站的信赖，并在 GitHub 上拥有 15K 颗星，可将您的设计变为现实。使用 GSDevTools 简化调试，确保您的动画精确呈现。通过 GSAP 释放创造力并吸引观众！

8. Three.js

地址：https://trijs.org/

使用 Three.js 将你的项目提升到新的维度！这个轻量级库擅长呈现复杂的 3D 对象和动画。利用 WebGL、SVG 和 CSS3D 渲染器，Three.js 打造与各种浏览器和设备兼容的沉浸式 3D 体验。

它是 JavaScript 社区的最爱，在 GitHub 上拥有超过 85K 颗星，展示了其广泛的赞誉和可靠性。释放 Three.js 的力量，在动态 3D 领域将您的愿景变为现实！

9.ScrollReveal

地址：https://scrollrevealjs.org/

使用 ScrollReveal 增强网站的视觉吸引力！这个多功能库简化了 DOM 元素进入或离开浏览器视口的动画。ScrollReveal 在滚动时提供无缝元素可见性的优雅效果，确保跨多个浏览器的令人愉快的用户体验。

其人性化的设计、对 GitHub 的零依赖以及超过 2100 位用户的认可，使其成为迷人的滚动动画的首选。使用 ScrollReveal 轻松提升您的网络形象！

10.Barb.js

地址：https://barba.js.org/

使用 Barba.js 提升您网站的用户体验！这个创新库将你的网站转变为无缝旅程，模仿单页应用程序 (SPA) 并提供令人愉快的页面转换。通过减少页面之间的延迟并最大限度地减少 HTTP 请求，Barba.js 增强了导航流畅性。

它在 GitHub 上拥有近 11,000 颗星，证明了它在创建迷人的 Web 转换方面的受欢迎程度和有效性。使用 Barba.js 提升您网站的吸引力，并给您的用户留下持久的印象！

11.Mon.js

地址：https://mojs.github.io/

使用 Mo.js 提升您的网页设计！这个功能强大的库拥有简单的声明式 API，可以轻松制作流畅的动画和迷人的特效，确保在所有屏幕尺寸上提供出色的视觉体验。

无论你是操纵 HTML 或 SVG DOM 元素，还是创建具有独特功能的独特 Mo.js 对象，这个可靠且经过充分测试的库都经过 1500 多项测试的支持，在 GitHub 上拥有超过 1700 颗星。释放 Mo.js 的创意潜力，为你的网站注入动态动画并给人留下深刻的印象！

12.Typed.js

地址：https://mattboldt.com/demos/typed-js/

释放 Typed.js 的魔力！这个动态打字库名副其实，逐字符动画输入文本，就像数字抄写员实时打字一样。

惊叹于它的多功能性：控制打字速度、插入暂停或使用智能退格键实现无缝连续字符串输入。批量输入？绝对地！同时键入一组字符以获得迷人的效果。

Typed.js 在 GitHub 上拥有超过 12K 颗星，是值得信赖的最爱，得到了 Slack 和 Envato 等行业巨头的认可。利用 Typed.js 的迷人魅力提升您的文本动画并吸引你的观众！

总结

今天文章中分享的12个工具库，都比较实用，希望这些内容对你的工作有所帮助。

最后，如果你觉得我今天分享的内容不错的话，请记得点赞我关注我，并将此内容分享给你的朋友们，也许能够帮助到他们。

在此，感谢你的阅读，祝编程愉快！

们前面提到过，转换（transitions）实际上就是一种特殊的CSS动画（见《前端设计必须掌握：定义CSS样式之间的切换》）：

只有两个状态：起始状态和终止状态
动画不会出现循环
中间状态只能由时变函数（transition-timing-function）来控制

实际动画需求要复杂得多，比如我们可能会需要：

自动播放的动画（不会有交互状态）
控制中间状态
创建循环动画
在同一个HTML元素上应用不同的动画
在动画过程中控制不同的元素属性
给不同的属性应用不同的时变函数

这个时候就需要使用CSS3动画（animation）特性，而且提供了更多的功能。CSS3动画就像一部迷你电影，里面有演员（HTML元素）、剧本（keyframes）以及动作片段（CSS规则）。

animation 属性

和 transition 属性一样，animation 是一组动画属性的速写：

name: 动画名称
duration: 动画持续时间
timing-function: 时变函数，用来计算中间状态
delay: 延时，在一定时候后启动动画
iteration-count: 动画重复的次数
direction: 动画的运行方向，可以是反过来的
fill-mode: 动画填充模式，用来确定动画开始之前和结束之后的样式

例：按钮弹跳动画

CSS代码如下：

效果图如下：

首先我们选定“演员”为一个加载按钮（html元素），然后设定其表演剧本（keyframes）为弹跳，然后添加一些动作指令（CSS规则）来创建一个CSS3动画：

name: bouncing （动画名称必须和keyframes名称一致）
duration: 0.5s （持续0.5秒）
timing-function: cubic-bezier(0.1,0.25,0.1,1)
delay: 0s （没有延迟）
iteration-count: infinite （无限循环）
direction: alternate （交替往返）
fill-mode: both（填充模式同时应用backwards和forwards规则，后面会详细说明）

@keyframes

在“电影开拍”之前，我们得创建“剧本”（@keyframes，即关键帧），用来规定动画中间的每一个表演步骤。@keyframes通过percentages（百分比格式的时间坐标）来定义：

0% 动画的第一帧（可选）。
50% 动画的中间时间节点。
100% 动画的最后一帧。

我们也可以分别使用关键词 from 和 to 来代替 0% 和 100%。

你可以定义任意多的keyframes，比如 33%, 4% 乃至 29.86%。每个 keyframe 都是一个 CSS规则，定义这个时间节点下元素的某个或某些属性。

@keyframes 具体语法定义如下：

@keyframes animationname {keyframes-selector {css-styles;}}

animationname: 必需。定义动画的名称。
keyframes-selector: 必需。百分比格式的时间坐标。合法的值：0-100% | from（与 0% 相同）| to（与 100% 相同）。
css-styles: 必需。一个或多个合法的 CSS规则（样式定义）。

CSS代码：

效果图如下：

上面的例子把起点 0% 和终点 100% 设置成一样的状态，并且是 infinite 播放，这样可以确保动画的两次播放之间的无缝衔接。

另外如果若干时间节点具有相同的样式，可以合并在一起简写，比如：

如果在@keyframes中0%和100%时间点所设置的属性有默认值，那么有些情况下可以忽略不写。

动画名称（animation-name）

动画名称（animation-name）会至少出现两次：

一次是“编写剧本” @keframes 时。
一次是“演员入戏”时，即设置HTML元素的 animation-name 属性值为“剧本”的名称（或者在 animation 速写中）。

和CSS class名称一样，animation 的名称只能包含：

字母 (a-z)
数字 (0-9)
下划线 underscore (_)
中划线 dash (-)

不能以数字或者两个中划线开始。

动画持续时间（animation-duration）

和 transition durations 一样，animation durations 可以设置为秒 1s 或毫秒 200ms。

默认值为 0s，即不会有动画出现。

动画时变函数（animation-timing-function）

和 transition timing functions 一样，animation timing functions 可以使用一些预定义的关键词比如 linear, ease-out, 或者使用cubic bezier函数来自定义。

缺省值是 ease。

我们可以通过设置线性时变函数以及自定义的@keyframes来模拟复杂的贝塞尔曲线。Bounce.js 就是这样一个在线高级动画生成工具，支持导出CSS样式代码。

动画延时（animation-delay）

和 transition delays 一样，animation delays 可以设置为秒 1s 或毫秒 200ms。

默认值为 0s，即不会有延迟。

这个属性在触发多个时间交替的动画序列时很有用。

动画循环次数（animation-iteration-count）

默认情况下，动画只运行一次（即默认值为 1），你可以设置3种类型的数值：

整数如 2 或 3
小数如 0.5，意味着只运行动画的一半
关键词 infinite 无限重复

动画方向（animation-direction）

animation-direction 定义浏览器对@keyframes的读取顺序。

normal: 正常方向，从 0% 开始，到 100% 结束，然后再从 0% 开始。
reverse: 相反方向，从 100% 开始，到 0% 结束，然后再从 100% 开始。
alternate: 交替方向，从 0% 开始，到 100% ，再到 0%。
alternate-reverse: 反向交替方向，从 100% 开始，到 0%，再到 100%。

通过下面的循环动画，对比小方块的运动轨迹，可以比较直观的感受这几个方向取值之间的差别：

动画填充模式（animation-fill-mode）

animation-fill-mode 用来确定动画开始之前和结束之后的状态。这样才是一个完整的动画过程。

通过 keyframes 我们定义了动画不同阶段下的CSS规则，这有可能会和已经定义的样式冲突。

填充模式属性允许我们告诉浏览器是否动画样式在动画之外也生效。

让我们想象这样一个按钮：

默认是红色
在动画开始时被设置为绿色
在动画结束时被设置为蓝色

效果图：

我们可以简单的理解为：forwards就是动画样式作用区间向时间轴正方向（->）延伸，backwards则向负方向（<-）延伸，而both就是双向（<- ->）延伸。从而影响到相邻区间的默认样式。

现文字波浪动画，我们首先想到的是使用 Javascript 来实现。如今，现代 CSS 属性已逐渐被现代浏览器所支持，本文将探索使用纯 CSS 来实现。

1.效果预览

2.实现方案

实现方案主要使用现代 CSS 提供的样式属性来实现：

一个 HTML 元素 h1
text-stroke 实现文字镂空
background-clip 实现背景裁切
radial-gradient 实现背景渐变
animation 实现波浪动画

2.1.创建页面框架

使用 html:5 和 div[class=wavy-text]{Wavy Text Animation} 快速创建页面框架:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>现代CSS：纯 CSS 实现文字波浪动画</title>
  </head>
  <body>
    <div class="wavy-text">Wavy Text Animation</div>
  </body>
</html>

2.2.实现文字镂空效果

镂空效果实现比较简单，主要通过 color 和 text-stroke 属性来实现

.wavy-text {
  --color: #269af2;
  color: transparent;
  -webkit-text-stroke: 0.2rem var(--color);
}

2.3.实现背景色渐变

背景色渐变，主要使用到了 radial-gradient 和

.wavy-text {
  --color: #269af2;

  --_p: 93% 83.5% at;
  --_g1: radial-gradient(var(--_p) bottom, var(--color) 79.5%, #0000 80%)
    no-repeat;
  --_g2: radial-gradient(var(--_p) top, #0000 79.5%, var(--color) 80%)
    no-repeat;
  /* 背景颜色 */
  background: var(--_g1), var(--_g2), var(--_g1), var(--_g2);
}

2.4.实现背景裁切

背景裁切主要用到了 CSS 属性 background-clip, 实现文本裁切效果。该属性已经被现代浏览器所支持，但是部分浏览器需要使用 -webkit- 前缀来支持。

.wavy-text {
  -webkit-background-clip: text;
          background-clip: text;
}

2.5.实现波浪动画

实现波浪动画，主要是通过背景位置 backgroun-position 和 background-size 的变化来实现，动画中增加了无线循环。

.wavy-text {
  animation: s 2s infinite alternate, m 3s infinite linear;
}
@keyframes m {
  0% {
    background-position: -200% 100%, -100% 100%, 0% 100%, 100% 100%;
  }
  100% {
    background-position: 0% 100%, 100% 100%, 200% 100%, 300% 100%;
  }
}
@keyframes s {
  0% {
    background-size: 50.5% 80%;
  }
  33% {
    background-size: 50.5% 70%;
  }
  66% {
    background-size: 50.5% 85%;
  }
  100% {
    background-size: 50.5% 95%;
  }
}

2.6.实现文本居中

实现文本水平垂直居中，我们仅用了一行 CSS 代码 place-content 来实现，它是 align-content 和 justify-content 的混合属性。

body {
  display: grid;
  place-content: center;
}

3.总结

现代 CSS 相关属性已经被越来越多的浏览器所支持，通过 CSS 来实现的效果也越来越多，欢迎大家和小懒一起关注和学习。

如果本文对您有帮助，欢迎关注、点赞和转发，感谢您的支持！

在线咨询

上一篇：HTML5实现头像的上传
下一篇：DashVector向量数据库 + ModelSco

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商