swiftui - SwiftUI 中的图像“轮播”动画

Question

我正在 SwiftUI 中重新创建一个 Objective-C 应用程序。在我的旧应用程序中，我有一个全屏背景图像，在几个图像之间有一个幻灯片过渡。这是Objective-C代码：

- (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];
}

这是我目前在 SwiftUI 中所拥有的。谁能给我一些关于在哪里添加动画的指示？

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)

标签： swiftui

Answer 1

好，我知道了：

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
            }

只需将以下内容添加到视图上的任何其他元素即可触发视图上的计时器：

.onAppear(perform: {
    let _ = self.timer
})