How to mimic the way apple implements medals in their fitness app?

Hi all,

I am currently making a fitness app and want to replicate the way Apple incorporate medals in their Fitness app. They have a page called awards and it looks like a collection view of different medals that the user can unlock. Once unlocking a medal the user can tap on the medal and it opens to a full screen intractable scene where the user can rotate the medal etc.

I have had a play around with SceneKit and managed to get a medal loaded into a scene and display it in the app. However my functionality does not look as smooth or as polished as Apples.

Does anyone have any idea on how they have managed to present all of the different Scene-kit scenes in a collection-view for example? Or how they have achieved the smooth transition between tapping on the medal in the collection-view and the scene.

I guess this is created using SwiftUI. Can this be replicated in Storyboards?

Thanks!

Up vote post of SuperFlyGames Down vote post of SuperFlyGames
2.1k views
Posted by
SuperFlyGames
Reply

  • How do you know they present in SceneKit ?

    —
    Claude31

  • I dont, but I as they are 3D models that can be interacted with (once tapped on) I thought there was no other option then them being in a SceneView.

    —
    SuperFlyGames
Add a Comment

Replies

Can you tell me how you made the medal, thank you very much!

Posted by
dapdeing
Up vote reply of dapdeing Down vote reply of dapdeing
Add a Comment

I’m no expert on this, but I would suggest using a 3d modelling application, and creating a 3D Object, of said model.

Then you would have to render the model on the device as well as creating a custom feedback depending on how fast the user moves their finger. Since it’s only a left and right pan, I imagine this would be easier.

You will get a smoother result doing this rather than creating individually rendered images which display one after the other creating the appearance of movement. Not to mention, this would require significantly more effort and would not be worth it.

You would also need to create an animation for when the user goes back, which would be controlling the 3d object.

hope this helps!

Trial and error paired with YouTube videos regarding the topic are probably your best bet to get you in the right direction

Posted by
levidecalmer
Up vote reply of levidecalmer Down vote reply of levidecalmer
Add a Comment