erio与反应弹簧的微交互：第3部分

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

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

模式：

图片库：

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 ：

这个钩子有三个参数：

1. 第一个参数是动画所依赖的状态，在我们的示例中为 modalVisible 。
2. 第二个参数是每个项目的关键点。 React需要被映射的元素的键，并且由于调用 useTransition hook的结果必须被映射，因此我们必须为 key 传递一个值。 case为空（因为我们只有一个项，就是模态）。
3. 第三个参数是生命周期定义。 生命周期定义对象具有几个必需的属性。 我们必须定义这三个属性才能使用 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: The animation
• closeModal: The event handler for closing the modal

Modal.js ：

模态将包含标题，一些内容和一个关闭按钮，因此让我们添加这些内容以及样式的一些类名称。

Modal.js ：

让我们将 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: The index for our photo
• key: The key for our mapped over item
• lifecycle: An object describing the animation

我们希望图像在滑入和滑出视图时淡入和淡出，因此我们将在每个生命周期步骤中定义 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/