在SwiftUI中，如何在显示时设置按钮偏移的动画

在SwiftUI中，我希望在视图最初显示时，通过从顶部进入最终位置，从屏幕外显示一个按钮，而不是在按下按钮时要求动画

我试过：

Button(action: {}) {
    Text("Button")
}.offset(x: 0.0, y: 100.0).animation(.basic(duration: 5))

---

但是没有乐趣。

如果你想玩offset，这可以让你开始

struct ContentView:View{
@状态专用变量偏移量：长度=0
var body：一些观点{
按钮（操作：{}{Text（“按钮”）}
.偏移量（x:0.0，y:offset）
奥纳佩尔先生{
withAnimation（.basic（持续时间：5））{self.offset=100.0}
}
}
}

我首先建议使用.transition（.move（.top）），但我正在更新我的答案。除非您的按钮位于屏幕的边框上，否则可能不太合适。移动仅限于移动视图的大小。因此，您可能需要使用偏移量

---

请注意，要使其从屏幕外开始，偏移的初始值可以为负值。

首先，您需要创建一个过渡。您可以为

AnyTransition

创建扩展，也可以只创建一个变量。使用

move（）

修改器指示过渡将视图从特定边移入

let transition=AnyTransition.move（边：。顶部）；

仅当视图位于屏幕边缘时，此选项才起作用。如果视图更靠近中心，则可以使用

combined（）

修改器组合另一个过渡，例如

offset（）

来添加额外的偏移

let transition=AnyTransition
.移动（边：。顶部）
.合并（与：
.抵消(
.init（宽度：0，高度：100）
)
);

此转换将用于显示和删除视图，但您可以使用

AnyTransition.asymetric（）

使用不同的转换来显示和删除视图

接下来，创建一个

showButton

bool（命名为任何名称），它将处理显示按钮的操作。这将使用

@State

属性包装，以便SwiftUI在更改时刷新UI

@State var showButton:Bool=false；

接下来，您需要将转换添加到按钮中，并将按钮包装在

if

语句中，检查

showButton

bool是否为

true

if（self.showButton==true）{
按钮（操作：{}）{
文本（“按钮”）
}
.过渡（过渡）；
}

最后，您可以在动画块中将

showButton

bool更新为

true

或

false

，以设置按钮转换的动画<代码>切换（）

withAnimation{
self.showButton.toggle（）；
}

您可以将代码放入appear（）中，并将bool设置为

true

，以便在视图出现时显示该按钮。您可以在大多数情况下调用

onAppear（）

，例如

VStack

.onAppear{
动画片{
self.showButton=true；
}
}

---

查看Apple文档，查看可用于

AnyTransition的内容
在顶部显示一个带有动画的消息框：

import SwiftUI

struct MessageView: View {
    @State private var offset: CGFloat = -200.0
    var body: some View {
        VStack {
            HStack(alignment: .center) {
                Spacer()
                Text("Some message")
                    .foregroundColor(Color.white)
                    .font(Font.system(.headline).bold())
                Spacer()
            }.frame(height: 100)
                .background(Color.gray.opacity(0.3))
                .offset(x: 0.0, y: self.offset)
                .onAppear {
                    withAnimation(.easeOut(duration: 1.5)) { self.offset = 000.0
                    }
            }
            Spacer()
        }
    }
}

有帮助！但是为什么用分号呢？很有帮助！但为什么用括号？->如果（self.showButton==true）@Jessy，这只是一个preference@PeterKreinz这只是一种偏好