Skip to main content

3D Cards Scrolling Animation in SwiftUI

 

Using ScrollView & GeometryReader to create animated 3D scroll effect.

CardView

Starting with the cards, we will create a struct view that takes color and a number. The cards are going to be RoundedRectangles with the filled color and a Text view with the number stacked on top of each other in a ZStack.

I have a background attribute on the RoundedRectangle that takes a white color as a view. This is because I’m giving colors to the CardView that have opacity attributes with the value 0.3. If you are using colors with the opacity value of 1.0, then there is no need for the background color.

ContentView

The ContentView contains an array of the colors we are sending to the CardView. Choose your colors, or create another type of array and populate it with the content you are going to have inside of your cards.

In the ContentView body, we are going to need a GeometryReader to determine the amount of padding and spacing needed for our HStack. Use ForEach to fill the cards with the numbers and colors. Embed your HStack inside of a ScrollView.

3D Card Animation

In our CardView, we need to know the maxX of our screen. We can retrieve it using UIScreen and have it stored in a variable. Embed the ZStack inside a GeometryReader. Use the rotation3DEffect attribute on the ZStack. Pass the maxX value using the geometry proxy and subtract from it the maxX value we that we stored. Then add half of the maxX value to it to center the card in the middle of the screen with 0 degree. Divide the result by -5 or you can experiment with other values to see how this will affect your animation. 



All Done! Thanks for reading.


Comments

Popular posts from this blog

Generating Tweets Using Kim Kardashian’s Twitter.

  For an experiment, I decided to try to generate tweets using the Markov Chains algorithm. I thought it would be interested to see the stream of words that will be picked if I fed the algorithm short and usually unrelated set of texts (Tweets). Often, when working with an algorithm like Markov Chain, you would give it a book or paragraphs that it can learn from, and it would generate some text that would fit the given input. I want the algorithm to represent someone. Picking words from a specific person and see their vocabulary and what can be generated with it. I wanted the person to have light tweets. I didn’t want to pick a political or a controversial figure. So I thought Kim Kardashian West would be the first in my experiment, and there will be more to come. It will be interesting to see patterns and word choices in these generated tweets. Development Recently, I have been developing for iOS more than any other platform, and because of this swift became my go-to language for deve

How to Display Fractions in Swift & SwiftUI

How To Display Fractions & Special Characters in Swift & SwiftUI Using NSLocalizedString to convert double values to strings NSLocalizedString NSLocalizedString takes a key and a comment and returns a localized value of a string. You can pass Unicode characters to NSLocalizedString and have your special character displayed inside your app. Example To display a fraction, you can use a numerator Unicode, fraction slash Unicode, and a denominator Unicode. The Unicode for numerators is \u{207 x }. The x is a number in this set {0,4,5,6,7,8,9}. A fraction slash is \u{2044}. Lastly, the Unicode for denominators is \u{208 x }. Unlike the numerators, the x is a number between 0 and 9. You can create a string variable that holds the fraction 4/5 in SwiftUI with the code below: There are existing Unicode characters for common fractions such as \u{00BD} for 1/2. You can use the function below to return the common fractions. Pass a double value to the function and it will return the Unic