ScrollView 的 SwiftUI 动画

Posted 2023-02-24

【中文标题】ScrollView 的 SwiftUI 动画

【英文标题】：SwiftUI animation of a ScrollView

【发布时间】：2019-12-04 23:40:46

【问题描述】：

我在 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

【参考方案1】：

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

【讨论】：

谢谢你的回答，但是当用户点击并切换到另一个页面时我会遇到问题，然后当它返回全屏时新页面会闪烁，因为它不是一个屏幕拍摄。

【参考方案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)

【讨论】：

感谢您的回答，不过我注意到了一些事情，如果我在不使用锚值的情况下按比例缩小，则不会出现闪烁，它运行良好且流畅，但视图不会向右缩放将它放在左上角缩放，菜单将保持覆盖。但是一旦我改变 y 值，就会出现闪烁。

@Philippe，尝试像我的回答一样缩放和制作偏移，但也有 y 位置。您的视图应该缩小并顺利进入新位置