Daniel Rahamim
Daniel Rahamim

Reputation: 315

Flipping card transition in iOS

I have followed the following guide to implement flipping card animation: https://www.raywenderlich.com/110536/custom-uiviewcontroller-transitions

And here is the code of my animator (identical to the one on the guide):

import UIKit

class FlipCardAnimator: NSObject, UIViewControllerAnimatedTransitioning {
var originFrame = CGRect.zero
var cardView = UIView()

func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval {
    return 0.6
}

func animateTransition(transitionContext: UIViewControllerContextTransitioning) {

    guard let fromVC = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey),
        let containerView = transitionContext.containerView(),
        let toVC = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey) else {
            return
    }

    let initialFrame = originFrame
    let finalFrame = transitionContext.finalFrameForViewController(toVC)

    let snapshot = toVC.view.snapshotViewAfterScreenUpdates(true)

    snapshot.frame = initialFrame
    snapshot.layer.cornerRadius = 25
    snapshot.layer.masksToBounds = true

    containerView.addSubview(toVC.view)
    containerView.addSubview(snapshot)
    toVC.view.hidden = true

    perspectiveTransformForContainerView(containerView)

    snapshot.layer.transform = yRotation(M_PI_2)

    let duration = transitionDuration(transitionContext)

    UIView.animateKeyframesWithDuration(
        duration,
        delay: 0,
        options: .CalculationModeCubic,
        animations: {

            UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 1/3, animations: {
                fromVC.view.layer.transform = self.yRotation(-M_PI_2)
            })

            UIView.addKeyframeWithRelativeStartTime(1/3, relativeDuration: 1/3, animations: {
                snapshot.layer.transform = self.yRotation(0.0)
            })

            UIView.addKeyframeWithRelativeStartTime(2/3, relativeDuration: 1/3, animations: {
                snapshot.frame = finalFrame
            })
        },
        completion: { _ in
            toVC.view.hidden = false
            snapshot.removeFromSuperview()
            transitionContext.completeTransition(!transitionContext.transitionWasCancelled())
    })
}


func yRotation(angle: Double) -> CATransform3D {
    return CATransform3DMakeRotation(CGFloat(angle), 0.0, 1.0, 0.0)
}

func perspectiveTransformForContainerView(containerView: UIView) {
    var transform = CATransform3DIdentity
    transform.m34 = -0.002
    containerView.layer.sublayerTransform = transform
}

}

The problem: I am only seeing the view flipping on it's edge, and then nothing! the screen disappears and I don't see the destination view controller view at all. Although I can see it's function viewDidLoad does being called (added printing debug). For some reason, only the first 1/3 of the animation works, and then I cant see anything.

Upvotes: 0

Views: 260

Answers (0)

Related Questions