Question

在用SwiftUI 2创建所需的matchGeometryEffect时，我一直在绞尽脑汁。在此学习过程中，有一些事情我确实无法解释。我会举一个例子。

我尝试创建一个List-> Detail过渡，其效果通常称为“ Hero”效果。列表视图的个人资料图片过渡到详细信息视图上的大横幅。

为此，我创建了两个KFImage（KF = Kingfisher，这是我用来方便地下载和缓存图像的软件包），并带有几个修饰符：

列表视图：

if !isProductDetailViewPresented {
   KFImage(store.results.first?.images?.first?.url)
      .resizable()
      .cornerRadius(30)
      .scaledToFill()
      .matchedGeometryEffect(id: "image.testprod", in: animationNamespace!, anchor: .center, isSource: !isProductDetailViewPresented)
      .animation(.easeInOut(duration: 0.3))
      .frame(width: 60, height: 60, alignment: .center)
      .zIndex(999)
}

详细信息视图：

if isProductDetailViewPresented {

...

    KFImage(product?.images?.first?.url)
        .resizable()
        .scaledToFill()
        .cornerRadius(30)
        .matchedGeometryEffect(id: "image.testprod", in: animationNamespace!, anchor: .center, isSource: isProductDetailViewPresented)
        .frame(height: 300)
        .animation(.easeInOut(duration: 0.3))

...

}

...这几乎有效；无论如何，我的图片不会限制到.frame(width: 60, height: 60)。相反，它会拉伸以使图像适合视图，使宽度大于60。尽管高度保持为60。

我想解决这个问题；也许应该将此.frame()修饰符放在.matchedGeometryEffect()修饰符之前。但是当我这样做时，只有两个图像的位置会过渡；不是大小。这使我认为.matchedGeometryEffect()修饰符将框架“固定”到.frame()修饰符在.matchedGeometryEffect()修饰符之前的位置。

这很奇怪，因为互联网上显示的几个示例显示，.frame()在.matchedGeometryEffect()之前被调用，例如here（搜索.matchedGeometryEffect()，只有2个）和here（“关注关注者”部分）。

两个问题：

只有当我在{em} .frame()之后致电.matchedGeometryEffect() {em}而在线资源却相反时，我的矿怎么工作？

.matchedGeometryEffect()如何处理修饰符的顺序？我应该考虑什么？

老实说，我在弄清楚这个API方面花费了很多时间。我希望你们能为我清理一切。：）

SwiftUI 2 matchingGeometryEffect：修饰符的顺序

0 个答案: