SwiftUI Анимированное изображение на кнопке - PullRequest
Новая
       66

SwiftUI Анимированное изображение на кнопке

0 голосов
/ 24 января 2020

Используя SwiftUI, я пытаюсь показать анимированное изображение и скрыть текст, когда пользователь нажимает кнопку. Вот мой код: 

@State private var showingActivity = false

var body: some View {
    Button(action: {
        self.showingActivity.toggle()
    }) { 
        HStack {
            if self.showingActivity {
                Image(systemName: "arrow.2.circlepath")
                    .font(.system(size: 29))
                    .rotationEffect(.degrees(self.showingActivity ? 360.0 : 0.0))
                    .animation(Animation.linear(duration: 1.5).repeatForever(autoreverses: false))
            }
            else {
                Text("Continue")
            }
        }
    }
}

Текст Продолжить появляется, и при нажатии он исчезает (как и ожидалось), и изображение отображается, но без анимации. Любые идеи, что я могу делать не так.

Спасибо

Ответы [ 2 ]

1 голос
/ 24 января 2020

или попробуйте это: 

struct ImageView : View {

    @State private var showAction = false

    var body: some View {
        Image(systemName: "arrow.2.circlepath")
            .font(.system(size: 29))
            .rotationEffect(.degrees(self.showAction ? 360.0 : 0.0))
            .animation(self.showAction ? Animation.linear(duration: 1.5).repeatForever(autoreverses: false) : nil)
        .onAppear() {
            self.showAction = true
        }
    }
}

struct ContentView: View {
    @State private var showingActivity = false

    var body: some View {
        Button(action: {
            self.showingActivity.toggle()
        }) {
            HStack {
                if self.showingActivity {
                    ImageView()
                }
                else {
                    Text("Continue")
                }
            }
        }
    }
}
0 голосов

Вы можете использовать .opacity вместо if...else операторов, в этом случае вращение работает на изображении. Но в канве я все еще вижу некоторые глюки, если нажать кнопку несколько раз, но я не пробовал на реальном устройстве (поведение может быть другим). Надеюсь, это поможет: 

struct AnimatableView: View {
    @State private var showingActivity = false

    var body: some View {
        Button(action: {
            self.showingActivity.toggle()
        }) {
            ZStack {
                Image(systemName: "arrow.2.circlepath")
                    .font(.system(size: 29))
                    .rotationEffect(.degrees(self.showingActivity ? 360.0 : 0.0))
                    .animation(Animation.linear(duration: 1.5).repeatForever(autoreverses: false))
                    .opacity(self.showingActivity ? 1 : 0)

                Text("Continue")
                    .opacity(self.showingActivity ? 0 : 1)

            }

        }
    }
}
...