Question

我在ZStack中有两个视图（VStack），一个在另一个视图之上

第二个视图后面的第一个VStack用作菜单。位于顶部的第二个视图是主应用程序视图。

当我单击按钮时，我会缩小主视图并将其稍微移到屏幕右侧以显示菜单。

每次我按比例缩小或放大主视图时，主视图中都会有一个ScrollView，动画无法顺利运行，页面闪烁，而且看起来很丑。如果我删除ScrollView，则效果很好。

我试图用List替换ScrollView，但是它不能解决闪烁仍然保持不变的问题。

有什么办法可以解决这个问题？

下面是示例代码

struct ContentView: View {
 var body: some View {

ZStack {

 Menu()

VStack {

  ScrollView(.vertical, showsIndicators: false) {

  VStack(spacing:0) {

     Header()

     MainAppView()

     }

  }

TabBar()

}

.scaleEffect(self.openMenu ? 0.5 : 1, anchor: UnitPoint(x: 1.5, y: 0.5))

.animation(.easeInOut(duration: 0.2))

}

}

}

Please click to check animated gif example

Answer 1

您可以尝试的是制作闪烁视图的屏幕截图，然后使用刚刚添加到真实视图中的屏幕截图进行动画处理。动画之后，只需删除屏幕截图即可。当然，您必须以编程方式制作屏幕截图。

Answer 2

由于缺少代码，我无法重复所有行为。我认为您遇到了这个问题，因为您正在缩小ScrollView并重新计算所有内容。尝试仅对其进行一些偏移，而不是缩放，并且应该没有闪烁：

// replace this
.scaleEffect(self.openMenu ? 0.5 : 1, anchor: UnitPoint(x: 1.5, y: 0.5))

// with this:
.offset(x: self.openMenu ? 300 : 0)

ScrollView的SwiftUI动画

2 个答案: