在第一篇文章中 在本系列中，我们研究了微交互的基础知识：它们是什么，为什么要使用它们，如何构建它们。 在第二篇文章中，我们构建了两个动画菜单。

在本教程中，我们将制作两个有趣的动画：模态动画和图片库。

模式：

图片库：

Building an animated modal

我们将建立的

我们将使用react-spring useTransition来说明如何从DOM装载和卸载组件（在本例中为模式），以及如何在照片库中装载照片。

嵌入式代码沙箱 ：

定义微交互

在上一个博客中，我们研究了微交互的各个部分。 让我们为模态组件定义交互触发，状态定义和动画定义。

互动触发

我们的模式将由主UI中的按钮触发，并且当单击模式内部的“关闭”按钮时将被关闭。

国家定义

我们的模态将处于以下两种状态之一：

• visible

• hidden

动画定义

单击模式触发按钮时，模式将淡入并从视口顶部平移其Y位置。

单击模式关闭按钮时，模式将淡出并向视口顶部平移其Y位置。

让我们建立一个模式

创建一个新的反应代码沙箱，然后添加

react-spring 作为依赖项。

接下来，在 src 目录中创建一个名为 Modal.js 的新文件。 在进入时，模态将淡入并从视口顶部滑入，在退出时会淡出并向视口顶部滑出。

如果您有App.js文件，则可以将其删除-我们将在index.js中使用。 您还必须删除对App.js的导入以及index.js中组件的实例化。 用以下代码替换index.js： 


 index.js ：


在 src 目录中创建一个名为 modal.css 的新文件，并添加以下代码。 我们不会在本教程中介绍样式，因此，我们提供了您需要专注于动画的所有内容。

 Modal.css ：


我们还向 styles.css 添加样式：

 Styles.css ：


在 Modal.js 的内部导入React，来自“ react-spring” 和 modal.css 的 {动画}。

 Modal.js ：


现在，让我们简单地返回一个

，其中写有“ Modal”，以确保所有内容均按预期呈现。


 Modal.js ：


大部分动画工作都将在 index.js 中完成，因为这是我们的生存状态。

在 index.js 中，从 react-spring 导入我们的模态组件 useTransition ，然后将 useState 添加到React导入中 。

 Index.js ：


如果有它们，请删除“代码沙箱”  h1 和 h2 元素并实例化我们的Modal组件。

 Index.js ：


您应该在UI中看到“模态”渲染。



让我们添加一些状态来显示和隐藏我们的模式。 要显示模式，我们将有一个“显示模式”按钮。 由于默认情况下我们的模式是不可见的，因此我们将 modalVisible 状态初始化为false。

在 App 内的return语句之前，添加以下内容：

 Index.js 


现在，让我们使用react-spring的 useTransition 构建动画，该动画可从DOM装入和卸载组件。

在 useState 钩子下面，声明一个 fadingAnimation 常量，并将其设置为等于调用 useTransition 的结果。

 Index.js ：


这个钩子有三个参数：

第一个参数是动画所依赖的状态，在我们的示例中为 modalVisible 。

第二个参数是每个项目的关键点。  React需要被映射的元素的键，并且由于调用 useTransition  hook的结果必须被映射，因此我们必须为 key 传递一个值。  case为空（因为我们只有一个项，就是模态）。

第三个参数是生命周期定义。 生命周期定义对象具有几个必需的属性。 我们必须定义这三个属性才能使用 useTransition ：

from
enter
leave

您可以在此处查看可选属性的完整列表。


这三个值中的每一个都期望一个对象的CSS属性在动画过程中发生变化。

我们希望我们的模态从不透明度0过渡到视口之外。 输入模态后，我们想通过将不透明度更改为1来淡入，并通过平移Y属性从顶部滑入。 在休假期间，我们希望模态淡出并滑向顶部。


 Index.js ：


 useTransition 挂钩要求将其结果映射到render函数中。 因此，让我们用映射到 fadingAnimation 上的JSX表达式替换简单的  。

我们可以从 fadingAnimation 中解构 item ， key 和 props 。   props 有点令人困惑，因为它实际上是我们要传递给模态组件的动画，因此我们将其重命名为 style 以使其更加清晰。

我们将把 style 作为参数传递给模态组件以及 key 。

我们还需要传递一个函数，该函数将在单击“关闭模式”按钮时通过更新 modalVisible 状态来关闭模式。

 Index.js ：


现在，我们添加一个按钮以显示模式。 在过渡映射之前，添加以下内容。


 Index.js ：


这是我们最终确定的 index.js

 Index.js ：


呈现UI后，我们会看到一个按钮：





当我们单击它时，我们看到“模态”一词，但是目前没有动画。

现在，让我们建立模式。 这将有两个参数：


style

closeModal

closeModal 函数作为单击处理程序传递给关闭按钮，以便用户关闭模式。

 Modal.js ：


如果返回浏览器，我们可以看到模态出现和关闭，但没有动画。


这是因为我们必须使用特殊的动画HTML元素来使模型进行动画处理。 我们要动画化的任何元素都必须以 animated 开头，例如  。 因此，让我们将

 元素更改为动画div。


 Modal.js ：


最后，我们必须将 style 传递给  ，以作为观看动画的道具。

 Modal.js ：


就是这样！ 现在，您有了一个完全动画的模式，可以在显示和隐藏时进行安装和卸载。


在此处查看最终代码  ：


Building an image gallery

用普通的JavaScript制作图像库并对其进行动画处理可能很乏味。 但是不能用react-spring！ 让我们创建一个在三张照片之间切换的图片库。

我们将建立什么



最终代码： 


定义微交互

互动触发

当用户单击视口中的任何位置时，图库将过渡到下一张图像。

国家定义

我们的图库中将有3张图像，因此其状态将是以下状态之一，每个数字代表当前正在显示的图像。


0

1

2

react-spring 作为依赖项。

如果您有App.js文件，则可以将其删除-我们将在index.js中使用。 您还必须删除对App.js的导入以及index.js中组件的实例化。 用以下代码替换index.js： 


 index.js ：


创建两个新文件： Gallery.js 和 gallery.css ，然后将以下代码添加到 gallery.css 。 今天我们不会介绍CSS，因此我们已为您提供样式！

 Gallery.css ：


在根目录中创建一个 images 文件夹，并添加三张照片。

您可以在取消飞溅上找到它们。 我添加了 mountains.jpg ， beach.jpg 和 desert.jpg 。

在 Gallery.js 内，导入以下软件包以及刚上传的三个图像和CSS文件。

 Gallery.js ：


现在，我们定义要在其中进行迭代的三张图片。 每个都将采用一种样式并呈现一个 animated.img 标签（因为react-spring要求任何可动画的元素以 animated 开头），并带有其各自的图像源alt 标签和样式。

 Gallery.js ：


接下来，让我们设置组件。


 Gallery.js ：


首先，我们需要确定我们当前正在查看的照片的状态。 在return语句上方，我们将此状态称为 index 及其设置函数 setIndex ，然后将第一张图片的值初始化为 0 。

 Gallery.js ：


当用户单击视口中的任意位置时，我们要切换到下一张图像。 我们可以使用 useCallback 进行此操作。

由于我们有三个图像，因此我们要确保状态值保持为0、1或2，因此我们可以使用模量来获取下一状态值除以3的余数。


例如，如果状态当前为2，而我们想要下一张照片，我们加1，总计3。由于3超出了我们拥有的照片数量的范围（索引从0开始，我们有0、1和2可供使用 图片索引），让我们将其修改为3即可得到余数。


（2 + 1）％3 = 0，因为3 mod 3的余数为0。


您可以在此处了解更多有关mods的信息。


 Gallery.js ：


让我们在包裹的

上添加 onClick 处理程序作为参数，以便用户可以通过单击视口来切换到下一张照片。


 Gallery.js ：


接下来，让我们设置动画。 我们将使用 useTransition 从DOM装载和卸载照片，因此我们一次只能渲染一张照片。

 useTransition 接受三个参数：

item

key

lifecycle

opacity 和 transform 。

我们还将添加一个 config 选项，以更改该动画发生的速度。 您可以在此处查看配置的完整选项。

 Gallery.js ：


现在，我们准备添加一些JSX。 首先，我们呈现一个段落，告诉用户可以单击任意位置以更改为下一张图像。


 Gallery.js ：


由于 useTransition 需要我们映射其返回值，因此让我们映射过渡并渲染每个图像。 我们将从 transitions 中分解 item ， props 和 key 的结构。

然后，通过使用 useTransition 中定义的 item 或 index ，从 images 数组中获取图像组件。  。

最后，我们将返回Image组件，并将其传递给 key 和 props （作为样式属性）。

 Gallery.js ：


这是我们完成的  Gallery.js  ：

最后，让我们回到 index.js 导入我们的Gallery组件并进行渲染。

 index.js ：


就是这样！ 现在，您将拥有一个功能齐全的图片库。


您可以在此处：
查看最终代码。

Conclusion

我希望这一系列有关使用react-spring创建微交互的博客文章使您能够在网站内创建有趣的交互。


您只需几行代码就可以创建复杂的动画和交互。


有关微动画和微交互的更多文章，请查看以下资源。


Why Use Micro-Animations In Your Design?
Micro-Interactions
Should You Advocate For Micro-Animations?
Micro-Interactions & Micro-Animations
Tags: animation, react-spring

from:https://stackoverflow.blog/2020/01/30/micro-interactions-with-react-spring-part-3/

• 点赞
• 收藏
• 分享
• 文章举报