Problem with animation execution and duration

Hey, I’ve been developing a card game app bUt i have a problem with the flipping animation:

When i press on a card, it’s supposed to flip just like the codewithchris matching game but i added a UiView that pops up in the middle of the screen that represents the card’s back and front images where at the same time as when the card flips, the UIView flips (with the Uiview.transition from: to: ). The only problem is that sometimes the cell flips too fast or the UIView flips but showing the front card on both sides but sometimes it shows the back to the front. Basically animations execution and duration are in shambles even though i used DispatchQueue.main.async on animations.

Please help ! Thank you

@Ryan_Tama

Hi Ryan,

Welcome to the code crew community.

Can you screen record what it is doing and post a video link here? Unfortunately you can’t post videos directly in a reply so you have to post them somewhere (perhaps Dropbox) and then post a link in a reply.

It’s an honor to be part of it.

thanks for the fast reply. Here are the screen recording and screen shot of code:

Screen Recording: https://www.dropbox.com/s/e8ltrwdgg6u3gob/Screen%20Recording%202020-09-06%20at%2016.31.39.mov?dl=0

Screenshot1 : https://www.dropbox.com/s/k9hkdj0qq711gbx/Screenshot%202020-09-06%20at%2016.38.43.png?dl=0

here is the screenshot of (collectionView didselectrowat:) :

Sorry about the delay in responding. Sleep became a priority unfortunately.

I don’t understand the premise of the game so what I see is that the first card tapped turns over but there is nothing behind it, then the second card selected reveals the image behind it before the animation transition.

In the case of the larger View, in the first instance shows the back and then flips to the image side yet in the second instance it shows the image side and animates to the image side.

Are both the collectionView item and the larger UIView supposed to animate simultaneously from the back to the image side?

BTW, images can be dragged into the post directly whereas only videos have to be included by way of a link.

1 Like

No problem haha i understand.

The goal of the game is that that there is a set number of cards flipped back (cards with no front images and cards with front images), when i flip a card with no front images only the flipping animation of the cell happen, whereas when i flip a card that has a front image it’s supposed to (like you said) flip simultaneously with the larger View (to give this suspense vibe). But sometimes the larger View flips simultaneously back image to front image or sometimes it’s just back image to back image.

I don’t know what to do, because i want a make a big game out of it i ´was wondering if learning and doing it on Spritekit would be a good idea ?

Ps i live in France so timezone and sleep are the cause of our late replies lool

Funny you should mention SpriteKit. As part of the “100 Days of Swift”, which Paul Hudson so generously created for free, there were SpriteKit elements to the course. I’ve never been a games person at all but I fell in love with SpriteKit. So much fun.

Anyway the point of me telling you that is that I created a match game (“Pairs” is what it was meant to be called) with a full deck of cards using SpriteKit and that served as my final project. The other way to have done the project was by using a collectionView but SpriteKt was a far better fit and the animations and sounds were a hoot.

This is what it looks like at start up:

and this is how it looks part way through:

If you want to learn SpriteKit then go for it. Very rewarding I must admit.

Getting back to your card flipping issue, can you get your card flipping to work properly without having the large UIView also in progress at the same time? That will give you the chance to get that logic correct first before adding the complexity of the larger View. Once you have that working nicely the larger view can feed off the same logic (at least that is my thinking).

Wow very interesting, if you’ve got a link of your project or of any which involves SpriteKit I’d love to check it out ! But i think that Spritekit would be a better fit as well because yes, the cards did flip perfectly when i didn’t put the larger View, but once i added the larger View with the sound i had to use The main thread a lot with DispatchQueue.main.async and asyncAfter.

What i think the problem is is that the main thread might be overloaded because when i remove some animations or sound it works more smoothly. So i believe that with Spritekit the game might run more smoothly, but my only fear is that i might not be able to replicate the same functionalities of the collectionview cells with Spritekit !

I guess what I’m asking is, through which method should i make my game for a better user experience collectionView or SpriteKit ? and is SpriteKit more complicated to do it?

Hi Ryan,

The project is on GitHub here: https://github.com/ChrisParkerWA/100DaysOfSwift/tree/master/C10PairsV2

SpriteKit will be a reasonably steep learning curve if you decide to go down that path. The best thing to do is have a look at Paul Hudsons 100 Days Of Swift and follow the SpriteKit projects that he does. That way you will get a pretty good grounding in how they work and how things fit together. It’s different.

In some respects it might be easier to stick to the collectionView and get that working as best you can. I don’t know if SpriteKit will necessarily be better but you will certainly be able to replicate the animations that you are trying to get working in your current project.

1 Like

Ok i understand. Thank you very much for your help and the references, i hope i will be able to publish my game on the app store soon :pray:t4: