как я могу заставить эту анимацию работать правильно?

Question

Я хочу сделать следующее: мой текст ("Hello 0") должен повернуться на 90 градусов вокруг оси y, затем увеличить (скрыть) его число, а затем заполнить круговое вращение увеличенным числом. к сожалению, вращение начинается с 90 градусов и до того, как текст будет скрыт?

что я делаю не так?

вот мой код (работающий и воспроизводимый)

struct ContentView: View {

    @State var number : Int = 0
    @State var degrees : Angle = .degrees(0)

    var body: some View {

        VStack {
            Text("Hello \(number)")
                .rotation3DEffect(degrees, axis: (x: 0, y: 1, z: 0))
                .animation(.easeInOut(duration:2.5))
            Button(action: {
                withAnimation(Animation.easeInOut(duration:2.5)) {
                    self.degrees = .degrees(90)
                }

                withAnimation(Animation.easeInOut(duration: 2.5 * 3).delay(2.5)) {
                    self.number = self.number + 1
                    self.degrees = .degrees(359)
                }
            }) {
                Text("Animate")
            }
        }
    }
}

Answer 1

Если я правильно понял цель, вот возможное решение. Протестировано с Xcode 11.4 / iOS 13.4

struct ContentView: View {

    @State var number : Int = 0
    @State var degrees : Angle = .degrees(0)

    var body: some View {

        VStack {
            Text("Hello \(number)").font(.largeTitle)
                .rotation3DEffect(degrees, axis: (x: 0, y: 1, z: 0))
            Button(action: {
                withAnimation(.easeInOut(duration:2.5)) {
                    self.degrees = .degrees(90)               // << animating
                }
                DispatchQueue.main.asyncAfter(deadline: .now() + 2.51) {
                    self.number = self.number + 1             // << don't
                    withAnimation(.easeInOut(duration:2.5)) {
                        self.degrees = .degrees(360)          // << animating
                    }
                    DispatchQueue.main.asyncAfter(deadline: .now() + 2.51) {
                        self.degrees = .degrees(0)            // << don't - reset !!
                    }
                }
            }) {
                Text("Animate")
            }
        }
    }
}