Microinteractions have become increasingly important in a world with a dizzying number of digital platforms and an ocean of content. While microinteractions used to be considered an interesting resource in the early days of digital design, in today’s hypercompetitive digital space they have become a crucial element in the overall user experience.

在拥有令人眼花number乱的数字平台和无数内容的世界中，微交互变得越来越重要。 尽管微交互在数字设计的早期曾被视为一种有趣的资源，但在当今竞争激烈的数字空间中，微交互已成为整个用户体验中的关键要素。

Basically, a microinteraction is a particular moment of a user’s interaction with a product in order to complete a specific task. For example, when someone presses a “Like” button (whatever it looks like) and sees that their action produced feedback — the number has changed, the color of the button has changed or it has become inactive, the text on the button reported that the action was done and so on — this is a case of microinteraction.

基本上，微交互是用户与产品进行交互以完成特定任务的特定时刻。 例如，当某人按下“赞”按钮(无论其外观如何)并看到他们的动作产生了反馈-数字已更改，按钮的颜色已更改或已变为无效状态时，该按钮上的文字会报告操作已完成，依此类推-这是微交互的情况。

The idea here is to present a menu button with 4 horizontal lines, and, when the user taps on the button, it animates into an ‘x’ shape, to represent the option of closing the menu.

这里的想法是呈现一个带有4条水平线的菜单按钮，当用户点击该按钮时，它会动画化为“ x”形，以表示关闭菜单的选项。

I began with an empty project, enabling SwiftUI. Then I created a file with two views, like this:

我从一个空项目开始，启用了SwiftUI。 然后，我创建了一个具有两个视图的文件，如下所示：

I defined a fixed frame for it, and for my purposes it can be a square shaped button. There’s a state property isAnimating, that the animations will respond to.

我为此定义了一个固定框架，出于我的目的，它可以是方形按钮。 有一个状态属性isAnimating ，动画将对其进行响应。

For the button body the action is simply to toggle the isAnimating property, and its label closure calls the createMenu method. Let's take a look at it.

对于按钮主体，操作仅是切换isAnimating属性，其标签闭合调用createMenu方法。 让我们来看看它。

There’s a lot going on here, but I’ll break it down. First, the method returns a type eraser view AnyView, and contains two properties, the count, which is the number of rows for the button, and the configuration of the menu.

这里有很多事情，但我会分解。 首先，该方法返回一个类型的橡皮擦视图AnyView ，并包含两个属性： count (按钮的行数)和菜单的配置。

In menu the geometry reader is used, so that we can access the width and height we have available, and, therefore, calculate the properties we need. So, 4 views are grouped, and we calculate availableHeight, spacing, height and width.

在menu ，使用了几何图形读取器，以便我们可以访问可用的宽度和高度，从而计算所需的属性。 因此，对4个视图进行了分组，然后我们计算了availableHeight ， spacing ， height和width 。

Then, the rectangles are created with the height and width, and we can finally configure them. Each rectangle is overlapping the other ones, so we’ll use the offset modifier and multiply the index by the available height. This way they get positioned correctly along the y axis.

然后，使用高度和宽度创建矩形，最后我们可以对其进行配置。 每个矩形都与其他矩形重叠，因此我们将使用offset修饰符并将索引乘以可用高度。 这样，它们就可以正确地沿y轴定位。

Then I configured the animations, which are custom modifiers. I’ll get to them in a second. Finally I used the animation modifier, with a small delay and the easeInOut option, and return the menu.

然后，我配置了动画，它们是自定义修改器。 一会儿，我会去找他们。 最后，我使用了animation修改器( easeInOut延迟)和easeInOut选项，然后返回菜单。

配置动画 (Configuring the Animations)

The MiddleMenuRect is a custom modifier that handles the second and third rectangles (index '1' and '2'). Both of them need to rotate, on opposite directions.

MiddleMenuRect是一个自定义修饰符，用于处理第二个和第三个矩形(索引“ 1”和“ 2”)。 它们都需要沿相反的方向旋转。

Here’s how the code look like:

代码如下所示：

In the body function, two modifiers are being called: rotate and offset. That's because when the rect is rotated there's a slight difference in position, so they need to me adjusted in order to form the 'x'.

在body函数中，调用了两个修饰符： rotate和offset 。 这是因为当旋转rect时，位置略有不同，因此需要对它们进行调整以形成“ x”。

The modifiers return a value based on a condition of being the middle indexes and the isAnimating boolean.

修饰符基于成为中间索引和isAnimating布尔值的条件返回值。

For the MarginMenuRect the setup is very similar, but this time, the first and last indexes are placed as conditions and the modifiers opacity and offset are applied. While the rectangles are moved through the 'x' axis in different directions, the opacity is reduced, giving the idea that they were 'removed'. Check out the code:

对于MarginMenuRect的设置非常相似，但是这次，第一个和最后一个索引作为条件放置，并且应用了修饰符opacity和offset 。 当矩形沿“ x”轴沿不同方向移动时，不透明度降低了，从而产生了“已删除”的想法。 签出代码：

For better readability, the MiddleMenuRect and the MarginMenuRect view modifiers were added to an extension:

为了提高可读性，在扩展中添加了MiddleMenuRect和MarginMenuRect视图修饰符：

That’s it! We have a nice menu button, that when tapped turns into an ‘x’. Here’s how it looks in action:

而已！ 我们有一个不错的菜单按钮，当您点击它时，它会变成一个“ x”。 实际效果如下：

Nice, isn’t it?

很好，不是吗？

Utilising microinteractions can enrich usability. The features of an app attract a user to the product, but the details more then often make a huge difference. This was an example of how a microinteraction can be implemented in SwiftUI and give a nice touch to your apps.

利用微交互可以丰富可用性。 应用程序的功能吸引了用户使用该产品，但是更多的细节通常会带来巨大的不同。 这是一个示例，说明了如何在SwiftUI中实现微交互并为您的应用程序提供良好的体验。

Developing it was fun, and it was pleasant to see the animation in place. If you want to see the full code, here’s the gist. Thanks for reading!

开发它很有趣，并且很高兴看到动画到位。 如果您想查看完整的代码，这是要点 。 谢谢阅读！

Originally published at https://vinileal.com on April 11, 2020.

最初于 2020年4月11日 发布在 https://vinileal.com 上。