js动画效果有哪些-js动画效果有哪些内容 收藏 0

创建优质动画的14个JavaScript库

随着JavaScript技术的不断发展，它的动画库也如雨后春笋般层出不穷。本文介绍一些实用的JavaScript动画库，希望它们能帮助你创建出令人着迷的用户体验！

Bounce.js是一个用于制作漂亮的CSS3关键帧动画的JavaScript库，使用其特有的方式生成的动画效果。只需添加一个组件，选择预设，然后你就可以得到一个短网址或者导出为CSS代码。

Snabbt.js是一个简约快速的JavaScript动画库。它侧重围绕元素进行移动，能够平移、旋转、缩放和调整元素。通过矩阵乘法操作，转换可以以任何你想要的方式进行组合。最终，将通过CSS3转换矩阵呈现页面结果。

Rekapi是一款JavaScript关键帧动画库。它提供了一套API让你可以定义关键帧动画并控制动画播放。Rekapi并未指定渲染行为。事实上，Rekapi的内核并未执行任何渲染操作。它提供了一个API来定义渲染器，标准的发行包包括HTML DOM和HTML5 2D Canvas渲染器模块。

Shifty是建立在JavaScript里一个渐变动画引擎，目的是适应任何数量的渐变动画的需求。

Tween.js是一款可生成平滑动画效果的js动画库。Tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

Velocity.js是velocity模板语法的javascript实现。Velocity模板适用于大量模板使用的场景，支持复杂的逻辑运算，包含基本数据类型、变量赋值和函数等功能。Velocity.js支持Node.js和浏览器环境。

Move.js是一款简单小巧的模拟CSS3动画的js插件。该插件可以完成CSS3的各种动画效果：移动、变形、倾斜、背景色渐变、旋转等，并且可以在动画中使用各种easing效果。

本站文章除注明转载外，均为本站原创或翻译

10 个功能强大的 JavaScript 动画库，打造引人入胜的用户体验

动画。从人群中脱颖而出、吸引访客注意力的绝佳方式。通过富有创意的物体运动和流畅的页面转换，不仅能为我们的网站增添独特的美感，还能提高用户参与度，创造令人难忘的第一印象。

有了这 10 个功能强大的 JavaScript 库，创建动画再简单不过了。滚动动画、手写动画、SPA 页面转换、打字动画、颜色动画、SVG 动画……它们的功能无穷无尽。

地址：https://animejs.com/

Anime.js 在 GitHub 上有超过 4.3 万颗星，是最受欢迎的动画库之一。

它是一个轻量级 JavaScript 动画库，具有简单的 API，可用于为 CSS 属性、SVG、DOM 属性和 JavaScript 对象制作动画。使用 Anime.js，我们可以播放、暂停、重启或反转动画。该库还提供了惊人的功能，可通过跟进和重叠动作为多个元素制作动画。该库还包含各种与动画相关的事件，我们可以使用回调和承诺来监听这些事件。

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

Lottie 是一个库，可以解析使用 Bodymovin 插件以 JSON 格式导出的 Adobe After Effects 动画，并在移动和网络应用程序上进行原生渲染。这样，用户就无需手动重新制作由专业设计师在 After Effects 中创建的高级动画。仅网络版在 GitHub 上就有超过 27k 个星。

地址：http://velocityjs.org/

使用Velocity，你可以创建颜色动画、变换、循环、缓和、SVG动画等。它使用的 API 与 jQuery 库中的 $.animate() 方法相同，如果 jQuery 可用，它还可以与之集成。该库提供渐变、滚动和滑动效果。除了能控制动画的持续时间和延迟外，还能在动画完成后的某个时间反转动画，或在动画进行时完全停止。该库在 GitHub 上有 17k 多颗星，是 Anime.js 的理想替代品。

地址：https://roughnotation.com/

Rough Notation 是一个 JavaScript 库，用于在网页上创建彩色注释并制作动画。它使用 RoughJS 创建手绘的外观和感觉。您可以创建多种注释样式，包括下划线、方框、圆圈、高亮、删除线等，还可以控制每种注释样式的持续时间和颜色。

地址：https://popmotion.io/

Popmotion 是一个功能强大的库，用于创建引人注目的动画。它为何与众不同？- Popmotion 不假定您打算制作动画的对象属性，而是提供可在任何 JavaScript 环境中使用的简单、可组合的函数。

该库支持数字、颜色和复杂字符串的关键帧、弹簧和惯性动画。该库测试良好，维护积极，在 GitHub 上拥有 19k 多颗星。

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

Vivus 是一个 JavaScript 库，可让你为 SVGs 制作动画，使其看起来就像正在绘制一样。它速度快、重量轻，完全不依赖任何工具，并提供三种不同的 SVG 动画制作方法：它提供三种不同的 SVG 动画制作方法：延迟、同步和逐一。还可以使用自定义脚本，以自己喜欢的方式绘制 SVG。

Vivus 还允许您自定义持续时间、延迟、定时功能和其他动画设置。查看 Vivus Instant，了解现场实际操作示例。

地址：https://greensock.com/

GreenSock Animation Platform (GSAP) 是一个库，可让我们创建适用于所有主流浏览器的精彩动画。可以在 React、Vue、WebGL 和 HTML 画布中使用它来制作颜色、字符串、运动路径等动画。它还附带了一个 ScrollTrigger 插件，让您只需少量代码就能创建令人印象深刻的基于滚动的动画。

GSAP已在1100多万个网站中使用，在GitHub上有超过15K个 \”星\”，是一个通用而受欢迎的工具。您可以使用 GreenSock 的 GSDevTools 来轻松调试使用 GSAP 创建的动画。

地址：https://threejs.org/

Three.js 是一个轻量级库，用于显示复杂的 3D 物体和动画。它利用 WebGL、SVG 和 CSS3D 渲染器来创建引人入胜的三维体验，可在各种浏览器和设备上运行。它是 JavaScript 社区的知名库，在 GitHub 上拥有超过 85k 个星级。

地址：https://scrollrevealjs.org/

通过 ScrollReveal 库，您可以轻松地为进入或离开浏览器视口的 DOM 元素制作动画。它提供各种类型的优雅特效，可在多个浏览器中滚动时显示或隐藏元素。ScrollReveal 库也非常易于使用，在 GitHub 上的依赖性为零，拥有超过 2100 个星级用户。

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

让网站出类拔萃的一种创造性方法是，在用户浏览网页时，在网页之间添加生动的过渡效果。这比简单地显示新网页或重新加载浏览器能带来更好的用户体验。

这就是 Barba.js 为何如此有用的原因；该库可让网站像单页面应用程序（SPA）一样运行，从而创建令人愉悦的页面转换。它能减少页面之间的延迟，最大限度地减少浏览器的 HTTP 请求次数。它在 GitHub 上获得了将近 11k颗星。

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

它提供了简单的声明式 API，可轻松创建流畅的动画和特效，在各种屏幕尺寸的设备上都能呈现出完美的效果。您可以移动 HTML 或 SVG DOM 元素，也可以创建一个特殊的 Mo.js 对象，该对象具有一系列独特的功能。它是一个可靠且经过充分测试的库，在 GitHub 上已编写了 1500 多个测试，拥有 1700 多颗星。

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

它的名字就说明了一切：一个动画打字库。

它能逐个字符键入特定字符串，就像有人在实时键入一样，允许你暂停键入速度，甚至暂停键入特定时间。通过智能退格，它可以键入以与当前字符相同的字符集开始的连续字符串，而不会退格整个前一个字符串–就像我们在上面的演示中看到的那样。

此外，它还支持批量键入，即同时在屏幕上键入一组字符，而不是一个接一个地键入。Typed.js在GitHub上有超过12K颗星，深受Slack和Envato的信任。

作为开发人员，利用这些工具无疑会提升你的项目，使其在竞争日益激烈的数字环境中脱颖而出。

2022年最好的10个JavaScript动画库

如果你想抓住你的网站访问者的注意力，还有什么能比动画更好呢？使用网络上免费提供的许多应用引擎，你可以很容易地让你的网站元素褪色、跳动或嗖嗖作响。在今天的文章中，我们将看到JavaScript动画库如何帮助实现这一切。

首先，介绍一下JavaScript的动画

添加只需要一个动作的简单动画（例如，切换）是一回事。对于这一点，你总是可以使用简单的CSS动画。但是，对于更复杂或高级的效果。 JavaScript是一个更好的工具。不言而喻，使用JavaScript来创建动画比使用CSS更具挑战性。

然而，JavaScript可以处理CSS所不能处理的事情。这给了开发者更多的权力来控制需要协调多个移动部件的复杂动画。

JavaScript动画是通过在一个元素的样式上添加渐变来实现的。你可以把它们作为你代码的一部分在线添加，或者把它们包含在其他对象中。在渲染时，这些变化由一个定时器调用。另外，你可以通过调整变化的时间间隔来控制动画的连续性。

让我们从Anime.js开始这个JavaScript动画库的列表。这个轻量级的动画库在GitHub上有35K多颗星。 通过一个强大的API工作，你可以用它来为HTML、CSS、JS、SVG和DOM属性制作动画。通过一个内置的交错系统，它可以使创建波纹、定向运动、跟随和重叠的效果显得很简单。这个系统在定时和属性上都是可用的。

使用内置的回调和控制函数，你可以做很多事情。例如，你可以同步播放、暂停、控制、逆转和触发事件。

Velocity.js结合了jQuery和CSS转换的优点。它的评分接近17K星，在 GitHub上有接近17K颗星，并拥有像WhatsApp和Motorola这样的杰出用户。 Mailchimp.循环、反转、延迟、隐藏/显示元素、属性数学（+、-、*、/）和硬件加速，都是其功能的一部分。

你可以使用Velocity.js来滚动 browser windows.它既可以与浏览器中加载的jQuery一起工作，也可以独立于它，甚至可以撤消之前的动画效果。

在接近 18K星，Popmotion是一个适用于任何JavaScript环境的功能性动画库。它几乎可以与任何接受数字输入的API一起工作，如 React，Three.js，A-Frame和PixiJS。

Popmotion的重量只有11.7kB，但却很有冲击力。它的特点是动画，如关键帧、衰减、用于同步多个实例的时间线等。你可以错开任何系列的动画或函数，也可以使用纯函数来组成你自己的配置。

Three.js以60K以上的星级在这个JavaScript动画库列表中排名第一。 它依靠的是 WebGL来创建和渲染浏览器中的3D动画。

有大量的文档可以帮助你，一旦你通过了学习曲线，使用这个库就没有什么不能完成的。首先，使用Three.js编辑器，你可以创建一个场景。此后，你可以添加几何图形，并调整灯光和摄像机。材料、纹理、物体、颜色和雾化都可以进行调整，最后的文件可以发布到你的项目中。

GreenSock的GSAP与一组小的JavaScript文件一起工作，使动画在所有主要的浏览器中看起来很好。它能顺利地将多个动画属性连接起来，并消除浏览器的错误。

GSAP的动作包括在Canvas上创建动画，以及为场景中的任何对象制作动画。还可以逐步揭示、变形或沿路径移动任何对象。为此，它与一堆软件应用一起工作，如SVGPlugins、PixiPlugin、WebGL、Adobe Animate和EaseJS。它的模块化结构有助于你选择你需要的功能。拥有800万用户和10K+颗星的 GitHub上有800万用户和10K多颗星，这个强大的库有很多优点。

6. AniJS

在这个列表中的JavaScript库中，AniJS有些独特。它允许你在一个简单的 \”句子 \”结构中为元素添加动画，这对刚接触动画的人来说是很好的。更重要的是，它的非特定性质使得几乎每个人都可以在日常的用户体验设计中使用它。

上 GitHub，AniJS的评分超过了3.5K星。它不依赖任何第三方库，通常有助于加快开发速度。它在安卓和iOS上都能很好地工作。 Android and iOS，也可以在所有流行的浏览器中使用。

7. Mo.js

运动图形在动画中起着很大的作用，Mo.js是一个可以让你产生影响的选择。由于有大量的教程和演示帮助，初学者可能不会发现创建几何形状和时间动画的难度。

这些API可能看起来很简单，但你可以用它们做很多事情。在这个工具包中，你会发现一个曲线编辑器和时间线编辑器来帮助你建立你的动画，以及一个播放器来控制你的动画。有不同的模块用于交错、缓和、时间线和更多。所有这些为Mo.js赢得了接近16K星的评价。

8. Vivus.js

如果你想在屏幕上实时地模仿钢笔画，你会用Vivus达到目的。它可以让你对SVG进行动画处理，给人以被绘制的感觉。由于它没有任何依赖性，所以它是快速和轻便的。

你可以选择任何一种可用的动画 – 延迟、同步或OneByOne。否则，你也可以创建一个自定义脚本来绘制你的SVG。为了提高灵活性，你可以用一个简单的JavaScript函数来覆盖每个路径的动画。超过1.3万名用户对这个库竖起了大拇指。

9. ScrollReveal JS

如果你希望在你的网页元素滚动进入视图时为它们制作动画，ScrollReveal不会让你失望。这个简单易学的动画库没有任何依赖性，在GitHub上有18.5K多颗星。

ScrollReveal支持不同类型的效果，在网络和移动浏览器上运行良好。它故意用一个裸露的配置来工作，所以你可以把它作为你的创造力的画布。为了使动画的效果最大化，创作者建议你少用它。

10. Typed.js

Typed.js是一个简单的库（更像是一个插件，真的），用于在你的屏幕上对打字进行动画处理。一旦你输入任何字符串，访问者就可以看到它以设定的速度被打出来。不仅如此，你还可以操作退格按钮，以及开始一个新的句子。如果你希望让禁用JS的访问者也能看到，你只需要在页面上放置一个HTML div。这样一来，机器人和搜索引擎也能查看输入的文字。

该库在GitHub的评分为9.5K+星，强大的用户包括Slack和Envato。

11. Lottie by AirBnB

Lottie是一种轻量级的动画图形格式，平衡了高质量的图形和渲染成本。它使应用程序更小，并包括动态功能。它可以用于网络、安卓、iOS和物联网，不需要额外的软件。

Lottie可以在任何支持JavaScript的浏览器上运行。动画是以纯文本形式存储的，是人类可读的。由于文本数据是以JSON格式存储的，它很容易被任何JavaScript环境同化。这使得它成为一种流行的动画图形格式，以增强移动前端。仅仅是安卓版本就有接近3万颗星。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com