SwiftUI中的图像“轮播”动画

时间:2019-06-22 14:56:19

标签: swiftui

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

...why does the "asyncio.TimeoutError" exception in the "async def create" function always execute at the end of my program ...?

这是我到目前为止在SwiftUI中拥有的东西。谁能给我一些在哪里添加动画的提示?

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

1 个答案:

答案 0 :(得分: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
})