Question

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

我尝试过：

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

但没有喜悦。

Answer 1

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

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()
        }
    }
}

Answer 2

如果您想玩偏移游戏，这可以帮助您入门。

struct ContentView : View {
    @State private var offset: Length = 0

    var body: some View {
        Button(action: {}) { Text("Button") }
            .offset(x: 0.0, y: offset)
            .onAppear {
                withAnimation(.basic(duration: 5)) { self.offset = 100.0 }
            }
    }
}

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

请注意，要使其偏离屏幕，它的初始值可以为负。

Answer 3

首先，您需要创建一个过渡。您可以为AnyTransition创建扩展名，也可以仅创建一个变量。使用move()修饰符告诉过渡以将视图从特定边缘移入

let transition = AnyTransition.move(edge: .top);

仅当视图在屏幕边缘时才有效。如果您的视线更偏向中心，则可以使用combined()修饰符组合另一个过渡，例如offset()来添加其他偏移量

let transition = AnyTransition
    .move(edge: .top)
    .combined(with:
        .offset(
            .init(width: 0, height: 100)
        )
    );

此过渡将同时用于显示和删除视图，尽管您可以使用AnyTransition.asymmetric()使用不同的过渡来显示和删除视图

接下来，创建一个showButton bool（将其命名为任意名称），它将处理显示按钮的操作。这将使用@State属性包装器，因此SwiftUI会在更改后刷新UI。

@State var showButton: Bool = false;

接下来，您需要向按钮添加过渡，并将按钮包装在if语句中，检查showButton布尔值是否为true

if (self.showButton == true) {
    Button(action: { }) {
        Text("Button")
    }
    .transition(transition);
}

最后，您可以在动画块中将showButton布尔值更新为true或false，以动画化按钮过渡。 toggle()只是颠倒了布尔的状态

withAnimation {
    self.showButton.toggle();
}

您可以将代码放入onAppear()并将bool设置为true，以便在显示视图时显示该按钮。您可以在onAppear()

之类的大多数情况下致电VStack

.onAppear {
    withAnimation {
        self.showButton = true;
    }
}

查看Apple文档，以了解AnyTransition https://developer.apple.com/documentation/swiftui/anytransition

可用的内容

在SwiftUI中如何显示动画按钮偏移

3 个答案: