Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Koloda Tinder-Like Animation Version 2. Prototyping in Pixate and Development in Swift

DZone's Guide to

Koloda Tinder-Like Animation Version 2. Prototyping in Pixate and Development in Swift

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

About a month ago we told you about how we developed Tinder-like Koloda in Swift. The animation proved successful in the community of developers and designers, so we decided to continue playing with it.

After we launched the first and simpler version of Koloda animation, Dmitry Goncharov, our designer, insisted on implementing his next idea. Also, Eugene Andreyev, our iOS developer and creator of the first Koloda animation promised to further customize calculations for frames so that any developer could make their own unique component based on our open source project.

So here’s the second chapter in our story about Koloda. This time we’ll talk about both design and development. Meanwhile you can also check the animation on Dribbble and GitHub

How we prototyped Koloda in Pixate

by Dmitry Goncharov

I got inspired by Tinder-like concepts and decided to elaborate on the initial idea to turn Koloda into something unusual. Surprisingly, a new concept came to me in a few hours. My idea was to get rid of the deck of cards and collect each next card from the background. 

I designed the mock up in Photoshop and used Pixate for prototyping it. Pixate is a design tool similar to InVision, Marvel, Origami, Form, and others. Even though prototyping in Pixate takes much more time than in InVision, the result looks almost like a real app. The prototype I created reproduced the behavior of cards exactly how I wanted it.

Pixate animationNow let’s talk a little bit about the process.

The main Pixate’s toolset includes layers, action kit, and animations. After the assets are loaded and located on the artboard, you can start working on layers, and then, proceed to reproducing interactions.

At first, I had to make the cards move horizontally and fly away from the screen once they cross a certain vertical line. I did this with the help of a simple animation which could be implemented under certain if-conditions. I also made the cards change their transparency and spin a bit during interactions.

Then, I needed to make a new card appear in a way as if it collects itself from the background, so had to stretch and scale it. I set a scale for the prototype from 3.5x (the size, when a card is still on the background) to 1x. 

Koloda prototyping in PixateFor a better effect I added a few bounce animations and that was it! The prototype was ready for development. I’d like to conclude with my overall impressions of Pixate. 

Advantages: 

  • Preview on mobile devices 
  • Simple process of prototyping 
  • No need to have specific knowledge of the animation basics 
  • The prototype looks much like a real iOS or Android app 
  • Convenient project sharing (export to computer, external link, or QR-code)

Disadvantages: 

  • A prototype doesn’t cover all apps’ functionality and is rather intended for demonstrating separate features and interactions
  • A single artboard can’t accommodate all screens of a prototype 
  • No possibility to export a prototype as code
  • The web app is a bit buggy 
  • The basic asset kit is quite limited
  • No timelines for animations (in case you’re used to After Effects)

Despite the disadvantages, Pixate is a great tool that lets designers create native clickable prototypes, reproduce navigation patterns and interactions between screens, but most importantly, it helps the whole team understand the general vector of the project development. You can watch a tutorial by Jared Lodwick to learn more about Pixate.

Now as you know a bit about prototyping Koloda, it’s time we spoke about how we developed the second version of the animation!

Tinder-like Koloda version 2

[Koloda animation Version 2]

How we developed Koloda v.2

by Eugene Andreyev

The main difference between the first and second versions of Koloda animation is in cards layout. The front card in the new version is placed in the middle of the screen and the back card is stretched on the background. In addition, the back card does not respond to the movement of the front card, and arrives with a bounce effect after the front card is swiped. 

Also, the second version of Koloda was easier to build because Dima made a prototype of it in Pixate. Firstly, Pixate allowed me to observe all interactions on a prototype. Secondly, I could acess Pixate studio to see all transformations applied and their order, and then, simply pass them into code without having to manually adjust anything.

Lastly, the second version of Koloda is part of a travel app, unlike the first one which was all about rock'n'roll.

Koloda version 2

[Koloda Animation Version 1]

Implementation of KolodaView v.2

To implement Dima’s animation, I had to place the cards differently, so I put the magic method frameForCardAtIndex described in the previous article (in the paragraph KolodaViewimplementation) in the public interface.

In KolodaView inheritor I overrode the method and put the cards in the following order:

override func frameForCardAtIndex(index: UInt) -> CGRect {

       if index == 0 {

           let bottomOffset:CGFloat = defaultBottomOffset

           let topOffset:CGFloat = defaultTopOffset

           let xOffset:CGFloat = defaultHorizontalOffset

           let width = CGRectGetWidth(self.frame ) - 2 * defaultHorizontalOffset

           let height = width * defaultHeightRatio

           let yOffset:CGFloat = topOffset

           let frame = CGRect(x: xOffset, y: yOffset, width: width, height: height)

           return frame

       } else if index == 1 {

           let horizontalMargin = -self.bounds.width * backgroundCardHorizontalMarginMultiplier

           let width = self.bounds.width * backgroundCardScalePercent

           let height = width * defaultHeightRatio

           return CGRect(x: horizontalMargin, y: 0, width: width, height: height)

       }

       return CGRectZero

   }

What’s going on here? We place frontCard in the middle of KolodaView, and stretch the background card with a scalePercent that equals 1.5.

Koloda Tinder-like animation version 2

Bounce animation for the background card 

Since the background card arrives with a bounce effect and changes its transparency while moving, I created a new delegate method:

KolodaView - func kolodaBackgroundCardAnimation(koloda: KolodaView) -> POPPropertyAnimation?

In this method, POPAnimation is created and passed to Koloda. Then, Koloda uses it for animating frame changes after a user swipes a card. If the delegate returns nil, it means that Koloda uses default animation.

Below you can see the implementation of this method in the delegate:

 func kolodaBackgroundCardAnimation(koloda: KolodaView) -> POPPropertyAnimation? {

       let animation = POPSpringAnimation(propertyNamed: kPOPViewFrame)

       animation.springBounciness = frameAnimationSpringBounciness

       animation.springSpeed = frameAnimationSpringSpeed

       return animation

   }

How to prevent background cards from moving?

I also added a delegate method in the new version of Koloda:

func kolodaShouldMoveBackgroundCard(koloda: KolodaView) -> Bool

If a false value is returned, it means that the interactive animation is turned off and cards that are on the background won’t move simultaneously with movements of the front card.

Here is what the animation looks like if the value is false:

And here is what it looks like if the value is true:

Koloda Tinder-like animation version 2

Hope you liked the second version of Koloda! Check it out on:

Read also:

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
animation ,app development

Published at DZone with permission of Kate Abrosimova. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}