Koloda Tinder-Like Animation версия 2. Прототипирование в Pixate и разработка в Swift

Около месяца назад мы рассказали вам о том, как мы разрабатывали колоду в стиле  Tinder в Swift . Анимация оказалась успешной в сообществе разработчиков и дизайнеров, поэтому мы решили продолжить играть с ней.

После того, как мы запустили первую и более простую версию анимации  Koloda, наш дизайнер Дмитрий Гончаров настоял на реализации своей следующей идеи. Также Евгений Андреев, наш iOS-разработчик и создатель первой анимации Koloda, пообещал дополнительно настроить расчеты для фреймов, чтобы любой разработчик мог создать свой уникальный компонент на основе нашего проекта с открытым исходным кодом.

Итак, вот вторая глава в нашей истории о Колода. На этот раз мы поговорим как о дизайне, так и о разработке. Тем временем вы также можете проверить анимацию на  Dribbble  и  GitHub . 

Как мы создали прототип Koloda в Pixate

Дмитрий Гончаров

Меня вдохновили концепции, подобные Tinder, и я решил развить первоначальную идею превратить Koloda во что-то необычное. Удивительно, но новая концепция пришла ко мне через несколько часов. Моя идея состояла в том, чтобы избавиться от колоды карт и собрать каждую следующую карту с фона. 

Я разработал макет в Photoshop и использовал  Pixate  для его создания . Pixate — это инструмент дизайна, похожий на InVision, Marvel, Origami, Form и другие. Хотя создание прототипов в Pixate занимает гораздо больше времени, чем в InVision, результат выглядит почти как настоящее приложение. Созданный мной прототип воспроизводил поведение карт именно так, как я этого хотел.

Теперь давайте немного поговорим о процессе.

Основной набор инструментов Pixate включает слои, набор действий и анимацию. После загрузки ресурсов и их размещения на монтажной области вы можете начать работать со слоями, а затем перейти к воспроизведению взаимодействий.

Сначала я должен был заставить карты двигаться горизонтально и улетать от экрана, когда они пересекают определенную вертикальную линию. Я сделал это с помощью простой анимации, которая может быть реализована при определенных условиях if. Я также заставил карты изменить свою прозрачность и немного вращаться во время взаимодействия.

Затем мне нужно было сделать так, чтобы новая карта выглядела так, как будто она собирает себя на фоне, поэтому пришлось растянуть и масштабировать ее. Я установил масштаб для прототипа от 3,5х (размер, когда карта все еще на заднем плане) до 1х. 

For 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!

[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 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

   }

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

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

       let animation = POPSpringAnimation(propertyNamed: kPOPViewFrame)

       animation.springBounciness = frameAnimationSpringBounciness

       animation.springSpeed = frameAnimationSpringSpeed

       return animation

   }

func kolodaShouldMoveBackgroundCard(koloda: KolodaView) -> Bool