[英]SwiftUI: How to delete a view after a certain time
I have this animation code:我有这个 animation 代码:
struct CheckmarkAnimation: View {
@State private var isAnimating = false
var body: some View {
ZStack {
Circle()
.trim(to: isAnimating ? 1:0)
.stroke(.green, lineWidth: 3)
.frame(width: 100, height: 100)
.animation(.easeInOut(duration: 1), value: isAnimating)
Image(systemName: "checkmark")
.foregroundColor(.green)
.font(.largeTitle)
.scaleEffect(isAnimating ? 1.5 : 0)
.animation(.spring(response: 0.5, dampingFraction: 0.4).delay(1), value: isAnimating)
}
.onAppear {
isAnimating.toggle()
}
}
}
I would like this view to disappear after the scaling effect on the checkmark ends.我希望这个视图在复选标记上的缩放效果结束后消失。 How do I do this?我该怎么做呢?
Here are 2 ways to do it:这里有两种方法:
.clear
after 2 seconds 2 秒后将绘图颜色更改为.clear
Here's a way to have it disappear (turn invisible but still take up space).这是一种让它消失的方法(变成隐形但仍然占用空间)。 Change the drawing color to .clear
after 2 seconds: 2 秒后将绘图颜色更改为.clear
:
struct CheckmarkAnimation: View {
@State private var isAnimating = false
@State private var color = Color.green
var body: some View {
ZStack {
Circle()
.trim(to: isAnimating ? 1:0)
.stroke(color, lineWidth: 3)
.frame(width: 100, height: 100)
.animation(.easeInOut(duration: 1), value: isAnimating)
Image(systemName: "checkmark")
.foregroundColor(color)
.font(.largeTitle)
.scaleEffect(isAnimating ? 1.5 : 0.001)
.animation(.spring(response: 0.5, dampingFraction: 0.4).delay(1), value: isAnimating)
}
.onAppear {
isAnimating.toggle()
withAnimation(.linear(duration: 0.01).delay(2)) {
color = .clear
}
}
}
}
.scaleEffect()
on ZStack
在ZStack
上使用.scaleEffect()
Insert this scale animation before the .onAppear
:在 .onAppear 之前插入这个刻度.onAppear
:
.scaleEffect(isAnimating ? 0.001 : 1)
.animation(.linear(duration: 0.01).delay(2), value: isAnimating)
.onAppear {
isAnimating.toggle()
}
Note : Use 0.001
instead of 0
in scaleEffect
to avoid注意:在scaleEffect
中使用0.001
而不是0
以避免
ignoring singular matrix: ProjectionTransform忽略奇异矩阵:ProjectionTransform
messages in the console.控制台中的消息。
.scaleEffect() on ZStack is an elegant solution. ZStack 上的 .scaleEffect() 是一个优雅的解决方案。
struct CheckmarkAnimation: View {
@State private var isAnimating = false
@State private var color = Color.green
var body: some View {
ZStack {
Circle()
.trim(to: isAnimating ? 1:0)
.stroke(color, lineWidth: 3)
.frame(width: 100, height: 100)
.animation(.easeInOut(duration: 1), value: isAnimating)
Image(systemName: "checkmark")
.foregroundColor(color)
.font(.largeTitle)
.scaleEffect(isAnimating ? 1.5 : 0)
.animation(.spring(response: 0.5, dampingFraction: 0.4).delay(1), value: isAnimating)
}
.scaleEffect(isAnimating ? 0 : 1)
.animation(.linear(duration: 0.01).delay(2), value: isAnimating)
.onAppear {
isAnimating.toggle()
}
}
}
This code works and makes the view disappear^^此代码有效并使视图消失^^
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.