ios swiftui_SwiftUI在iOS 14中的matchGeometryEffect

ios swiftui

The second iteration of SwiftUI introduced a very cool modifier: matchedGeometryEffect.

SwiftUI的第二次迭代引入了一个非常酷的修饰符： matchedGeometryEffect 。

This modifier lets you create amazing transitions to animate views across hierarchies. To use it, all you need to do is attach it to the two views you’re looking to animate between and ensure that the same identifier is specified.

使用此修改器，您可以创建惊人的过渡，以动画化整个层次结构中的视图。 要使用它，您要做的就是将它附加到要在其上进行动画处理的两个视图上，并确保指定了相同的标识符。

It has some mighty powerful use cases — from animating size changes to interpolating position changes of views.

它具有一些强大的用例-从动画大小更改到插值视图位置更改。

You’ll surely find it handy when creating fancy modal transitions across views, in SwiftUI grids, or when reloading a SwiftUI view with animation.

在SwiftUI网格中跨视图创建奇特的模式转换时，或在重新加载带有动画的SwiftUI视图时，您肯定会发现它很方便。

In the following sections, we’ll explore a bunch of things you can do using the matchedGeometryEffect.

在以下各节中，我们将探索使用matchedGeometryEffect可以执行的matchedGeometryEffect 。

SwiftUI基础版的matchedGeometryEffect (SwiftUI Basic matchedGeometryEffect)

Here’s how a simple matchedGeometryEffect modifier is defined:

这是定义简单的matchedGeometryEffect修饰符的方式：

matchedGeometryEffect(id: "unique", in: namespace)

• The id is a unique identifier that’s set on the pair of views you wish to animate or interpolate.

  id是在要设置动画或插值的一对视图上设置的唯一标识符。

• Namespace is a property wrapper that’s used to differentiate between IDs across views, basically preventing name collisions in SwiftUI.

  Namespace是一个属性包装器，用于区分视图之间的ID，基本上可以防止SwiftUI中的名称冲突。

There are a few more optional arguments that can be passed in the modifier. We’ll discuss them shortly.

修饰符中可以传递更多可选参数。 我们将在短期内讨论它们。

Let’s look at a simple example of matchedGeometry in action:

让我们看一个简单的matchedGeometry示例：

Gist link 要点链接

Wow! We managed to animate two Text views displaying numbers across the view reloads. Isn’t that great for demonstrating a visual demo on how to swap two numbers?

哇！ 我们设法为两个“文本”视图制作动画，这些视图在重新加载视图时显示数字。 演示如何交换两个数字的视觉演示不是很好吗？

You can do the same for n numbers as well. Just ensure that the correct pair IDs are specified.

您也可以对n个数字执行相同的操作。 只需确保指定了正确的对ID。

使用matchedGeometryEffect动画大小和位置 (Animating size and position with matchedGeometryEffect)

What we saw previously was animating the whole frame. But we can opt to animate only the size and position as well by specifying the appropriate property:

我们以前看到的是对整个frame进行动画处理。 但是我们可以通过指定适当的属性来选择仅对size和position进行动画处理：

.matchedGeometryEffect(id: "id", in: nSpace, properties: .size)
.matchedGeometryEffect(id: "id", in: nSpace, properties: .position)

This is handy when you only want to show a zoom transition (use size) or when you want to interpolate position.

当您只想显示缩放过渡(使用size )或要插入位置时，这非常方便。

But make sure you’re setting the property correctly. For example:

但是请确保您正确设置了属性。 例如：

Gist link 要点链接

As you can see, the rounded rectangle transitions only its size. So, it doesn’t really move from left to right. At the same time, the circle only interpolates its position but doesn’t animate its size until we set the property to frame.

如您所见，圆角矩形仅转换其size 。 因此，它实际上并没有从左向右移动。 同时，在将属性设置为frame之前，圆仅插入其position但不设置其size动画。

使用命名空间ID (Using Namespace ID)

Sometimes, you want to pass around a namespace to child views or in NavigationLinks.

有时，您希望将名称空间传递给子视图或NavigationLinks。

To do so, you need to specify Namespace.ID as the type in the destination views:

为此，您需要在目的地视图中指定Namespace.ID作为类型：

具有matchedGeometryEffect的SwiftUI网格 (SwiftUI Grids With matchedGeometryEffect)

Grids were a huge addition in SwiftUI 2.0, and they are a match made in heaven with matchedGeometryEffect.

网格是SwiftUI 2.0中的一个巨大补充，它们是与matchedGeometryEffect匹配的。

From transitioning across layouts to hero modal-like animations, we can do it all.

从跨布局过渡到英雄模态动画，我们都可以做到。

In the following screengrab, we’ve shown how to animate the insertion and removal of items from a SwiftUI grid using matchedGeometryEffect while displaying a list of selected items. Everything in fewer than 50 lines of code:

在以下屏幕截图中，我们展示了如何在显示选定项目列表的同时，使用matchedGeometryEffect动画化SwiftUI网格中项目的插入和移除。 少于50行代码的所有内容：

As you can see, we’ve created two ScrollViews. One holds the LazyVGrid with three column items and the other holds the selected items in an HStack. To select and unselect items, we’ve created an array selectedItemIDs.

如您所见，我们已经创建了两个ScrollViews。 一个将LazyVGrid包含三个列项，另一个将HStack的选定项HStack 。 为了选择和取消选择项目，我们创建了一个数组selectedItemIDs 。

The full source code of this animation along with the views and utility methods is available on GitHub.

可以在GitHub上获得该动画的完整源代码以及视图和实用程序方法。

结论 (Conclusion)

That’s a wrap. I hope this inspires you to build some cool transitions. Animation in SwiftUI has certainly gotten a whole lot easier, more flexible, and more powerful.

这是一个包装。 我希望这能激发您建立一些不错的过渡。 SwiftUI中的动画无疑已经变得更加容易，灵活和强大。

Thanks for reading.

谢谢阅读。

翻译自: https://medium.com/better-programming/swiftuis-matchgeometryeffect-in-ios-14-ab701b2c99c3

ios swiftui