js图片切换动画—js中图片切换用什么事件 收藏 0

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万颗星。

popmotion，一款神奇的 JavaScript 开源动画库

一、Popmotion简介

Popmotion是一款强大的JavaScript开源动画库。它具有轻量、灵活且高性能的特点。

（一）轻量性

它的代码体积较小，不会给项目带来过多的负担。这使得在各种规模的Web应用中都能轻松集成，无论是简单的小型网站还是复杂的大型单页应用。

（二）灵活性

1. 动画类型多样

支持常见的过渡动画（如元素的淡入淡出、大小变化等）、补间动画（在两个关键帧状态之间生成平滑动画），还能实现复杂的物理动画。例如，模拟物体的弹性碰撞、自由落体等物理效果，通过内置的物理模拟算法，可以让元素的动画更加自然逼真。

2. 可定制化

可以对动画的各个参数进行高度定制。包括动画的持续时间、缓动函数（easing function，如线性、二次方、三次方等不同的速度曲线）、延迟时间等。例如，用户可以根据设计需求，将一个元素的动画设置为延迟2秒后，以二次方缓动函数，在5秒内从初始位置移动到指定位置。

二、核心功能

（一）动画创建

1. 基本动画创建

使用Popmotion创建动画通常非常直观。以创建一个简单的元素移动动画为例，只需要指定元素的目标位置和动画的持续时间等基本参数。

例如，在JavaScript中可以这样创建一个让元素在500毫秒内从当前位置移动到x坐标为100px的位置的动画：

2. 基于时间轴的动画组合

Popmotion允许通过时间轴（Timeline）将多个动画组合在一起。这类似于视频编辑中的时间轴概念，用户可以在不同时间点安排不同的动画序列。

例如，可以创建一个时间轴，在0秒时启动一个元素的淡入动画，在2秒时启动另一个元素的旋转动画，从而实现复杂的动画编排。

（二）动画控制

1. 暂停与恢复

可以在动画执行过程中随时暂停和恢复。例如，当用户将鼠标悬停在一个正在进行动画的元素上时，可以暂停动画，当鼠标移开时，恢复动画。

代码实现如下：

2. 取消与重置

能够取消正在进行的动画，并将元素状态重置到初始状态或指定状态。比如，在用户触发了错误的动画操作时，可以取消当前动画并重新开始正确的动画。

示例代码：

三、应用场景

（一）用户界面交互

1. 按钮动画

当用户点击按钮时，可以使用Popmotion为按钮添加按下和弹起的动画效果，例如按钮按下时稍微缩小，弹起时恢复原状，增强用户操作的反馈感。

2. 菜单动画

在移动端或桌面端应用中，菜单的展开和收起动画可以通过Popmotion来实现。比如，侧边栏菜单可以以滑动或淡入淡出的方式出现和消失，提升用户体验的流畅性。

（二）数据可视化

1. 图表元素动画

在数据可视化图表中，如柱状图、折线图等，使用Popmotion可以为图表元素的出现和数据更新添加动画效果。例如，当新的数据加载时，柱状图的柱子可以逐个以不同的动画方式（如从下往上生长、淡入等）展示出来，使数据展示更加生动直观。

2. 过渡动画

在不同的数据视图切换时，Popmotion可以用于创建平滑的过渡动画。比如，从饼图切换到柱状图时，通过动画来渐变展示元素的变化，帮助用户更好地理解数据的演变过程。

（三）游戏开发

1. 角色动画

在简单的基于浏览器的游戏中，Popmotion可以用于实现游戏角色的移动、攻击、跳跃等动画。例如，通过控制角色元素的位置、旋转和缩放等属性的动画，模拟角色在游戏场景中的各种动作。

2. 场景过渡

游戏中的场景切换可以通过Popmotion实现酷炫的过渡动画。如从一个游戏关卡切换到另一个关卡时，采用旋转、缩放等动画效果来过渡场景，营造出更加沉浸式的游戏体验。

饿了么面试官：实现一下 Element-UI 官网的主题切换动画！

最近看到 ElementPlus 官网上的切换主题方式非常有趣，这是一个过渡的动画效果

所以在网上查了一番，找到基本的实现方法

基本效果

首先我们起一个 html 文件，写一个按钮，以及简单的背景颜色切换，来模拟主题的切换

可以看到实现了最简单的主题切换效果

document.startViewTransition

想要实现过渡效果，需要先用到一个 JavaScript 的原生方法：document.startViewTransition

这个方法是用来做动画过渡效果的

通过调用 API，让浏览器为新旧两种不同视图分别捕获并建立了快照 (即 ::view-transition-old(root)旧快照 和 ::view-transition-new(root) 新快照)，而后新旧两快照在 ::view-transition-image-pair(root) 容器中完成转场动画的过渡。动画结束后则删除其相关伪元素 (快照和容器)

过渡动画效果

我们可以应用一下这个 API

现在去切换主题颜色，发现有过渡效果了~

圆形扩散过渡动画

接下来实现圆形过渡的效果，其实这个动画最终是展示::view-transition-new(root)这个伪元素，所以我们只需要让这个伪元素有原型扩散的过渡动画即可~

那圆形扩散动画咋做呢？其实很简单，只需要将伪元素的半径，从0 -> 100%即可

代码如下

并且我们需要取消掉 document.startViewTransition默认的动画效果，不然它会导致我们自定义的动画效果无效~

最终得到圆形扩散的效果

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