Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unable to see animation for .transitionFlipFromRight for first 3 view controllers in array

I have an app with a Tinder-like interface where a user can flip through car

In my ViewController.swift, I have

private var currentCardsOnScreen: [CardViewController] = []

This array gets populated as I put CardViewControllers in the stack:

if !currentCardsOnScreen.map({ $0.id }).contains(vc.id) {
    self.currentCardsOnScreen.append(vc)
}

And items get removed after the swipe happens:

if let index = currentCardsOnScreen.index(of: currentCard), 
    currentCardsOnScreen.map({ $0.id }).contains(currentCard.id) {
         currentCardsOnScreen.remove(at: index)
 }

When the user selects a card, I run this:

guard let currentCard = currentCard(index: index) else { return }

currentCard.flipCard()

Which calls this method:

func flipCard() {
    guard
        let frontOfCard = frontOfCard,
        let backOfCard = backOfCard
    else { return }

    UIView.animate(withDuration: 0.32, delay: 0, options: .transitionFlipFromRight, animations: {
        if self.frontIsShowing {
            self.view.transform = CGAffineTransform(scaleX: 1, y: 1)

            frontOfCard.alpha = 0
            backOfCard.view.alpha = 1
        } else {
            self.view.transform = CGAffineTransform(scaleX: -1, y: 1)
            frontOfCard.transform = CGAffineTransform(scaleX: -1, y: 1)

            frontOfCard.alpha = 1
            backOfCard.view.alpha = 0
        }

        self.frontIsShowing = !self.frontIsShowing
    }, completion: nil)

The number of cards in the stack is always 3. For the first 3 cards, tapping the card will change the value of frontIsShowing but won't show the card flip. If I swipe away the first 3, any card after that will behave as intended. The animation will show and all will be good.

Any ideas what could be going on here?

Edit: Also, not sure if related, but on card 4 when it makes the first flip animation, I see the alphas transition via a fade in/fade out but not a card flip. On the second click is when I see that flip animation. Again, not sure if related but thought I'd mention.

like image 814
Zack Shapiro Avatar asked Oct 24 '17 18:10

Zack Shapiro


2 Answers

I figured it out. I had an Alamofire call to fetch a large chunk of data that was blocking the main thread from animating

like image 192
Zack Shapiro Avatar answered Nov 11 '22 18:11

Zack Shapiro


flipCard() called on main thread and fetch data on background thread

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
     // fetch data in background thread 
});
like image 39
Ashish Avatar answered Nov 11 '22 19:11

Ashish