Koloda - Animate shuffle effect on load

Question

I am using Koloda to present a deck of playing cards that can be swiped through. I have this part working well.

When I initially load this deck of cards I would like each view / card to fly in separately and then show as being stacked. I would call this a shuffle or a deal effect (like when you deal cards). From what I can tell it appears Koloda does not allow for this. The animations I see are for showing the entire stack of views / frames after they are already stacked up. So in my example this would mean the entire deck. I also do not see a way to add views / cards 1 by 1 without causing a full reload.

Here is how I would like it work if I had 3 cards

Card 1 (bottom of deck flies in from left in animated fashion)

.2 second wait

Card 2 (2nd from bottom of deck / middle card flies in)

.2 second wait

Card 3 (top of deck flies in)

Proceed as normal Koloda View.

I have tried adding animations to my UIViews that get added as contentViews but it doesn't look right. My current guess is a custom animation using animateAppearanceWithCompletion but I have not had much luck. There is also a frameForCard method that might work?

I am using Snapkit in the project if that helps. I am targeting iOS 9+

Douglas Drouillard · Accepted Answer · 2017-06-22T19:35:24.613

I subclassed KolodaViewAnimator and overrode the initial loading animation

override func animateAppearanceWithCompletion(_ completion: KolodaViewAnimator.AnimationCompletionBlock) {

    self.koloda?.alpha = 1.0

    // custom extension method to return my CardView
    let cards = self.koloda!.cards().reversed()
    for (index, card) in cards.enumerated() {
        let delay = Double(index) * 0.2
        card.display(delay: delay)
    }

    completion?(true)
}

Since I am targeting iOS 9+ I can use transforms in my init / setup phase of my custom view. Start off screen.

self.mySubView?.transform = CGAffineTransform(translationX: self.frame.width * -2, y: 0)

Call display() to trigger animation from the subclassed ViewAnimator

    func display(delay: TimeInterval) {

        UIView.animate(withDuration: 0.2, delay: delay, options: [], animations: {
// could be a subview
            self.mySubView.transform = CGAffineTransform(translationX: 0, y: 0)

        }) { (_) in

        }

    }

Koloda - Animate shuffle effect on load

1 Answers1