Geometry also aided myself inside my iOS development efforts!

More fascinating thing in the Tinder-like cartoon is fluctuations of reduced cards while a user are dragging an upper cards. I wanted to make the Koloda cartoon convenient, to make sure that i possibly could effortlessly indicate how many notes i wish to show about display. So I grabbed an item of paper and started my personal calculations.

KolodaView was required to highlight a correct quantity of notes below the best card, and work out them invade the proper jobs if the cartoon starts. To make it possible, I experienced to calculate structures for all your notes by the addition of the matching indexes to each component. Eg, the initial cards provides an [i] list, the 2nd one could need a [i+1] directory, the third – [i+2], an such like.

You will see the data for the earliest framework together with measurements of the initial card under:

And also in the rule:

Today, since we realize the indexes, cards structures, as well as a percent from which the cartoon ends (through the DraggableCardView), we are able to easily find on where notes under is certainly going when an upper credit is actually swiped. After than we can apply PercentDrivenAnimation.

Consequently, we reached an easy to use UIView cartoon for apple’s ios with an appealing name Koloda. Any designer can tailor they by placing their contents and overlay. Someday, I’d like to be able to personalize frames’ calculations and animations making sure that any creator makes their own part.

How we produced Koloda v.2

by Eugene Andreyev

The key difference in initial and next variations of Koloda cartoon is in notes layout. Leading card when you look at the new version is placed in the display screen and the straight back cards try stretched regarding history. Furthermore, the back credit does not reply to the motion regarding the top cards, and comes with a bounce influence following the top credit was swiped.

Also, the second type of Koloda was actually simpler to develop because Dima produced a prototype of it in Pixate. First of all, Pixate enabled me to discover all connections on a prototype. Furthermore, i really could acess Pixate studio to see all transformations used in addition to their order, immediately after which, simply go them into rule and never having to by hand modify any such thing.

Lastly, the 2nd version of Koloda belongs to a travel app, unlike the initial one which was actually everything about rock’n’roll lesbijski serwis randkowy.

[Koloda Cartoon Version 1]

Implementation of KolodaView v.2

To implement Dima’s cartoon, I experienced to put the notes in a different way, therefore I put the miracle strategy frameForCardAtIndex into the community user interface.

In KolodaView inheritor I overrode the method and put the notes during the following order:

What’s happening right here? We destination frontCard in the middle of KolodaView, and extend the backdrop cards with a scalePercent that equals 1.5.

Reversal animation your history cards

Because the background cards comes with a reversal results and adjustment their openness while move, I produced a unique delegate process:

Contained in this strategy, POPAnimation is created and passed away to Koloda. Next, Koloda makes use of they for animating frame modifications after a user swipes a card. If the delegate comes back nil, it means that Koloda uses standard animation.

Below you can see the utilization of this method within the delegate:

How to prevent background cards from mobile?

I also added a delegate process in brand new form of Koloda:

If a bogus value is came back, it indicates that the entertaining cartoon was deterred and notes which are throughout the history won’t move simultaneously with activities from the forward card.

This is what the cartoon appears like if benefits was false:

And this is what it appears to be like if value does work: