В SwiftUI, как я могу анимировать смещение кнопки при отображении

Question

В SwiftUI я хочу, чтобы кнопка появлялась за пределами экрана при ее открытии сверху в конечную позицию при первоначальном отображении вида, я не запрашиваю анимацию при нажатии кнопки.

Я пробовал:

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

но без радости.

Answer 1

Если вы хотите поиграть со смещением, это поможет вам начать.

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)), но я обновляю свой ответ.Если ваша кнопка не находится на границе экрана, она может не подойти.Перемещение ограничено размером перемещенного представления.Так что вам, возможно, понадобится использовать смещение в конце концов!

Обратите внимание, что для того, чтобы вывести его за пределы экрана, начальное значение смещения может быть отрицательным.

Answer 2

Прежде всего вам нужно создать переход. Вы можете создать расширение для 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 обновит пользовательский интерфейс при изменении.

@State var showButton: Bool = false;

Затем вам нужно добавить переход к вашей кнопке и заключить ее в оператор if, проверяя, является ли showButton bool равным true

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

Наконец, вы можете обновить showButton bool до true или false в блоке анимации, чтобы анимировать переход кнопки. toggle() просто меняет состояние bool

withAnimation {
    self.showButton.toggle();
}

Вы можете ввести свой код в onAppear() и установить bool на true, чтобы кнопка отображалась при появлении вида. Вы можете позвонить onAppear() на большинство вещей, таких как VStack

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

Проверьте документы Apple, чтобы увидеть, что доступно для AnyTransition https://developer.apple.com/documentation/swiftui/anytransition