Image "carousel" animation in SwiftUI - swiftui

Question

I'm recreating an Objective-C app in SwiftUI. In my old app, I have a full-screen background image that has a slide transition between several images. Here's the Objective-C code:
- (void)viewWillAppear:(BOOL)animated{
self.output.text = [self.output.text stringByAppendingString:#"viewWillAppear\r\n"];
[self resetCardReader];
self.creditCard = [[FWCCreditCard alloc] init];
_imageArray = [[NSMutableArray alloc] initWithObjects:[UIImage imageNamed:#"Family on Beach.png"],
[UIImage imageNamed:#"Chinese Graduate.png"],
[UIImage imageNamed:#"New Car.png"],
[UIImage imageNamed:#"House Sold.png"], nil];
index = 0;
}
- (void)viewDidAppear:(BOOL)animated{
self.slideTransition = [CATransition animation]; // CATransition * slideTransition; instance variable
self.slideTransition.duration = 2.0;
self.slideTransition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
self.slideTransition.type = kCATransitionPush;
self.slideTransition.delegate = self;
self.slideTransition.subtype =kCATransitionFromRight; // or kCATransitionFromLeft
self.repeatingTimer = [NSTimer scheduledTimerWithTimeInterval:10.0 target:self selector:#selector(slideShow) userInfo:nil repeats:YES];
[self.repeatingTimer fire];
}
-(void)slideShow
{
[self.BackgroundImage.layer addAnimation:self.slideTransition forKey:nil];
if (index < self.imageArray.count-1) // NSUInteger index; instance variable
{
index++;
}
else
{
index=0;
}
self.BackgroundImage.image =[self.imageArray objectAtIndex:index];
}
Here's what I have so far in SwiftUI. Can anyone give me some pointers on where to add the animation?
struct HomeView : View {
private var backgroundImages = ["Family on Beach","Chinese Graduate","New Car","House Sold"]
private var backgroundImageIndex = 0
#State private var backgroundImage = "Family on Beach"
var body: some View {
ZStack{
Image(backgroundImage)
.resizable()
.aspectRatio(contentMode: .fill)
.colorMultiply(Color(red: 0.09, green: 0.286, blue: 0.486, opacity: 0.8))
.edgesIgnoringSafeArea(.all)
.statusBar(hidden: true)

Answer 1

OK, I got it:
import SwiftUI
extension AnyTransition {
static var rightToLeft: AnyTransition {
let insertion = AnyTransition.move(edge: .trailing)
let removal = AnyTransition.move(edge: .leading)
return .asymmetric(insertion: insertion, removal: removal)
}
}
struct HomeView : View {
private var backgroundImages = ["Family on Beach","Chinese Graduate","New Car","House Sold"]
#State private var backgroundImageIndex = 0
#State private var backgroundImageNameEven = "Family on Beach"
#State private var backgroundImageNameOdd = "Chinese Graduate"
#State private var showImage = true
var timer: Timer {
Timer.scheduledTimer(withTimeInterval: 10, repeats: true){_ in
if(self.backgroundImageIndex < self.backgroundImages.count-1){
self.backgroundImageIndex += 1
} else
{
self.backgroundImageIndex = 0
}
if(self.backgroundImageIndex % 2 == 0){
self.backgroundImageNameEven = self.backgroundImages[self.backgroundImageIndex]
} else {
self.backgroundImageNameOdd = self.backgroundImages[self.backgroundImageIndex]
}
withAnimation{
self.showImage.toggle()
}
}
}
var OddImage: some View {
Image(backgroundImageNameOdd)
.resizable()
.clipped()
.colorMultiply(Color(red: 0.09, green: 0.286, blue: 0.486, opacity: 0.8))
.edgesIgnoringSafeArea(.top)
.aspectRatio(contentMode: .fill)
.animation(.basic(duration: 2))
.transition(.rightToLeft)
}
var EvenImage: some View {
Image(backgroundImageNameEven)
.resizable()
.clipped()
.colorMultiply(Color(red: 0.09, green: 0.286, blue: 0.486, opacity: 0.8))
.edgesIgnoringSafeArea(.top)
.aspectRatio(contentMode: .fill)
.animation(.basic(duration: 2))
.transition(.rightToLeft)
}
var body: some View {
ZStack{
if(!self.showImage){
OddImage
}
if(self.showImage){
EvenImage
}
Just add the following to any other element on the view to trigger the timer on view:
.onAppear(perform: {
let _ = self.timer
})