How to reproduce this Objective-C animation with SwiftUI? - animation

Question

I really like SwiftUI and trying to re-build with it an old iPhone app originally created back in 2009. So far, the trickiest part appears to be a particular animation. Here is how it looks in the original:
I.e. a view is being updated and also animated, so that its updated copy appears to slide in. Here is the code I am using to achieve this effect:
[self.phaseCell.layer addAnimation:[AnimationManager transitionFromRight] forKey:#"From Right"];
+ (CATransition *)transitionFromRight
{
return [AnimationManager animation:kCATransitionFromRight];
}
+ (CATransition *)animation:(NSString *)direction
{
CATransition *animation = [CATransition animation];
[animation setDelegate:(id<CAAnimationDelegate>)self];
[animation setType:kCATransitionPush];
[animation setSubtype:direction];
[animation setDuration:0.5f];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
return animation;
}
Is it possible to create something similar with SwiftUI?

Answer 1

here is a demo, triggering the transition on tap:
struct MoonPhase: Identifiable {
let id = UUID()
var name: String
var image: String
}
let phases = [
MoonPhase(name: "New Moon", image: "moonphase.new.moon"),
MoonPhase(name: "First Quarter", image: "moonphase.first.quarter"),
MoonPhase(name: "Full Moon", image: "moonphase.full.moon"),
MoonPhase(name: "Last Quarter", image: "moonphase.last.quarter"),
]
struct ContentView: View {
#State private var index = 0
var body: some View {
VStack {
Divider()
// the interesting part
HStack {
Image(systemName: phases[index].image)
Text(phases[index].name)
}
.id(index)
.frame(maxWidth: .infinity)
.transition(.asymmetric(insertion: .move(edge: .trailing).combined(with: .opacity),
removal: .move(edge: .leading).combined(with: .opacity)))
Divider()
HStack {
Image(systemName: "asterisk")
Text("Moon in Pisces")
}
Divider()
}
.onTapGesture {
withAnimation(.easeInOut(duration: 1)) {
index = (index + 1) % phases.count
}
}
.font(.largeTitle)
.padding()
}
}