SwiftUI – 如何动画化（maxHeight: .infinity）？

huangapple
go评论85阅读模式
英文:

SwiftUI - How to animate (maxHeight: .infinity)?

问题

我将为您翻译所需的部分：

"I simplified my code into the example below.
将我的代码简化为以下示例。

After the view above has animated, its size changed. How can I apply animation to the frame of the view below?
在上面的视图动画完成后，它的大小发生了变化。我如何对下面视图的框架应用动画？

  1.     View1()
  2.     
  3.     View2()
  4.         .frame(maxHeight: .infinity)
  5. }
  7. struct View1: View {
  8.     @State private var animate = false
  9.     var body: some View {
  10.         Circle()
  11.             .frame(animate ? 100 : 200)
  12.             .onTapGesture {
  13.                 animate.toggle()
  14.             }
  15.             .animation(.easeInOut, value: animate)
  16.     }
  17. }
  19. struct View2: View {
  20.     var body: some View {
  21.         Color.red
  22.     }
  23. }

I tried this, it works. But everything else inside View2 would also animate, which is not what I want.
我尝试过这个，它可以工作。但是 View2 中的其他内容也会进行动画，这不是我想要的。

  1.     .animation(.easeInOut)
  2. ```"
  4. <details>
  5. <summary>英文:</summary>
  7. I simplified my code into the example below.
  9. After the view above has animated, its size changed. How can I apply animation to the frame of the view below?

VStack {
View1()

  1. View2()
  2.     .frame(maxHeight: .infinity)

}

struct View1: View {
@State private var animate = false
var body: some View {
Circle()
.frame(animate ? 100 : 200)
.onTapGesture {
animate.toggle()
}
.animation(.easeInOut, value: animate)
}
}

struct View2: View {
var body: some View {
Color.red
}
}

  3. I tried this, it works. But everything else inside View2 would also animate, which is not what I want.

View2()
.animation(.easeInOut)

  5. </details>
  8. # 答案1
  9. **得分**: 1
  11. 看一下`.transaction`修饰符。
  13. ```swift
  14. View2()
  15.         .frame(maxHeight: .infinity)
  16.         .transaction { transform in
  17.           transform.animation = .easeInOut
  18.         }
英文:

Look at the .transaction modifier.

  1. View2()
  2.         .frame(maxHeight: .infinity)
  3.         .transaction { transform in
  4.           transform.animation = .easeInOut
  5.         }

答案2

得分: 1

如果我理解正确：

  • 您在VStack中有两个视图
  • 当顶部视图变小时，您希望底部视图填充空间，带有动画效果
  • 底部视图的内容不应该有过多的动画效果。

我认为实际上您需要关注的是VStack。VStack实际上会自动为其内容的更改添加动画效果，因此只需在切换标志时使用withAnimation，而不是显式使用.animation修饰符。

我认为以下代码可以实现您的需求：

  1. struct View1: View {
  2.     @State private var animate = false
  3.     var body: some View {
  4.         Circle()
  5.             .frame(width: animate ? 100 : 200, height: animate ? 100 : 200)
  6.             .onTapGesture {
  7.                 withAnimation {
  8.                     animate.toggle()
  9.                 }
  10.             }
  11.     }
  12. }
  14. struct View2: View {
  15.     var body: some View {
  16.         Color.red
  17.     }
  18. }
  20. struct ContentView: View {
  22.     var body: some View {
  23.         VStack {
  24.             View1()
  26.             View2()
  27.                 .frame(maxHeight: .infinity)
  28.         }
  29.     }
  30. }

所以总结一下，使用withAnimation而不是.animation()。

英文:

If I understand correctly:

  • you have two views in a VStack
  • when the top view gets smaller, you want the bottom view to fill the space, with animation
  • the content of the bottom view should not be over-animated.

I think it is actually the VStack where you need to focus on. A VStack actually animates changes to its contents anyway, so it is enough if you use withAnimation to toggle the flag, instead of an explicit .animation modifier.

I think this works as you were wanting:

  1. struct View1: View {
  2.     @State private var animate = false
  3.     var body: some View {
  4.         Circle()
  5.             .frame(width: animate ? 100 : 200, height: animate ? 100 : 200)
  6.             .onTapGesture {
  7.                 withAnimation {
  8.                     animate.toggle()
  9.                 }
  10.             }
  11.     }
  12. }
  14. struct View2: View {
  15.     var body: some View {
  16.         Color.red
  17.     }
  18. }
  20. struct ContentView: View {
  22.     var body: some View {
  23.         VStack {
  24.             View1()
  26.             View2()
  27.                 .frame(maxHeight: .infinity)
  28.         }
  29.     }
  30. }

So in summary, use withAnimation instead of .animation().

huangapple
  • 本文由 发表于 2023年7月12日 20:35:49
  • 转载请务必保留本文链接：https://go.coder-hub.com/76670613.html
  • animation
  • frame
  • swiftui
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定