Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save kandelvijaya/a25159432474a2972db8adbad3f8e39b to your computer and use it in GitHub Desktop.
Save kandelvijaya/a25159432474a2972db8adbad3f8e39b to your computer and use it in GitHub Desktop.
Weird behavior when using transition with views that have animations.
//
// LoadingIndicator.swift
// AnimationTransitionDemo
//
// Created by Vijaya Prakash Kandel on 5/23/20.
// Copyright © 2020 Vijaya Prakash Kandel. All rights reserved.
//
import SwiftUI
struct LoadingIndicator: View {
@State private var isRotating: Bool = false
private let animation = Animation.linear(duration: 2.0).repeatForever(autoreverses: false)
var body: some View {
VStack {
Image(systemName: "rays")
.rotationEffect(isRotating ? .init(degrees: 360) : .init(degrees: 0))
// Implict animation. SwiftUI will animate the transition/ change on this using the same auto repeat. Therefore sliding out never actually slides out this view.
// .animation(animation)
.onAppear {
// Explicit Animation. We tell SwiftUI which state change we are interested to change exclusively
withAnimation(self.animation) {
self.isRotating = true
}
}
}
}
}
struct SettingsView: View {
var body: some View {
Image(systemName: "gear")
}
}
struct SettingsMorphedLoadingView: View {
@State private var isLoading: Bool = true
var body: some View {
HStack {
if isLoading {
LoadingIndicator()
.onTapGesture {
withAnimation(.default) {
self.isLoading.toggle()
}
}
.transition(AnyTransition.scale.combined(with: .opacity))
} else {
SettingsView()
.transition(AnyTransition.scale.combined(with: .opacity))
.onTapGesture {
// using explicit animation both `loadingIndicator`
// and `transition` works but can't reason why?
withAnimation(.default) {
self.isLoading.toggle()
}
}
}
}
// using implicit animation `transition` works
// but the `loadingIndicator` wont spin after transitioning
// inFact `loadingIndicator` spins during the transition period and stops.
.animation(.default)
}
}
struct LoadingIndicator_Previews: PreviewProvider {
static var previews: some View {
VStack {
LoadingIndicator()
SettingsMorphedLoadingView()
}
}
}
@kandelvijaya
Copy link
Author

2020-05-23 11 37 03

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment