How to use WithAnimation with #ObservedObject - ios

Question

Let's say, I have a simple profile screen like that:
class Model: ObservableObject {
#Published var isSignedIn = false
init() {}
func login() {
//Some networking here
isSignedIn = true
}
func logout() {
//Some networking here
isSignedIn = false
}
}
struct ContentView: View {
#ObservedObject var model = Model()
var body: some View {
ZStack {
//ProfileView
VStack {
//Some Views with WithAnimation inside
// ...
Text("Hello, Dear User!")
Button(action: {
self.model.logout()
}) {
Text("Sign Out")
}
}
.opacity(model.isSignedIn ? 1 : 0)
//LoginView
VStack {
Text("Hello, Stranger")
Button(action: {
self.model.login()
}) {
Text("Sign In")
}
}
.opacity(model.isSignedIn ? 0 : 1)
}
}
}
And I want to apply animation to opacity changing.
The first approach is to use .animation modifier. But it has certain drawbacks: it does not work properly if inner view has WithAnimation - it overrides animation that was set with WithAnimation.
My second approach to use .onReceive:
class Model: ObservableObject {
#Published var isSignedIn = false
init() {}
func login() {
isSignedIn = true
}
func logout() {
isSignedIn = false
}
}
struct ContentView: View {
#ObservedObject var model = Model()
#State var isSignedIn = false
var body: some View {
ZStack {
//ProfileView
VStack {
Text("Hello, Dear User!")
Button(action: {
self.model.logout()
}) {
Text("Sign Out")
}
}
.opacity(model.isSignedIn ? 1 : 0)
//LoginView
VStack {
Text("Hello, Stranger")
Button(action: {
self.model.login()
}) {
Text("Sign In")
}
}
.opacity(model.isSignedIn ? 0 : 1)
}
.onReceive(self.model.$isSignedIn) { value in
withAnimation(Animation.easeIn) {
self.isSignedIn = value
}
}
}
}
There are some problems (in my opinion):
Another #State var is required to handle changing in the model
Each WithAnimation block requires separate .onReceive
So the question is: is it a correct way to apply WithAnimation to #ObservedObject, or is there a better solution?

Answer 1

Your first approach can be changed, so you don't need to use additional #State property
class Model: ObservableObject {
#Published var isSignedIn = false
init() {}
func login() {
withAnimation(Animation.easeIn) {
isSignedIn = true
}
}
func logout() {
withAnimation(Animation.easeIn) {
isSignedIn = false
}
}
}
struct SView: View {
#ObservedObject var model = Model()
var body: some View {
ZStack {
//ProfileView
VStack {
Rectangle()
Text("Hello, Dear User!")
Button(action: {
self.model.logout()
}) {
Text("Sign Out")
}
}
.opacity(model.isSignedIn ? 1 : 0)
//LoginView
VStack {
Rectangle()
Text("Hello, Stranger")
Button(action: {
self.model.login()
}) {
Text("Sign In")
}
}
.opacity(model.isSignedIn ? 0 : 1)
}
}
}
struct SwiftUIView_Previews: PreviewProvider {
static var previews: some View {
SView()
}
}
In your 2nd approach you need to change
.opacity(model.isSignedIn ? 1 : 0)
to
.opacity(self.isSignedIn ? 1 : 0)

Answer 2

You can specify the animation directly inside withAnimation. This way it will be specific for this change only:
Button(action: {
withAnimation(.easeInOut) { // add animation
self.model.logout()
}
}) {
Text("Sign Out")
}