CardAnimation

Design from Dribble，blog for this, only chinese.

Change Anchor Point of CALayer

like: (0.5, 0.5) ->(0.5, 1)

Frame:

There are many ways to do this: link

subView.frame = frame
subView.layer.anchorPoint = CGPointMake(0.5, 1)
subView.frame = frame

AutoLayout:

Discussion on stackoverflow: link, but I find a simple way:

let subViewHeight = 
let oldConstraintConstant = centerYConstraint.constant
subView.layer.anchorPoint = CGPointMake(0.5, 1)
//Like what you do with frame, you need to compensate for additional translation.
centerYConstraint.constant = subView.bounds.size.height/2 + oldConstraintConstant

Transform and AutoLayout

From iOS8, transform and autolayout play nice. There is a blog for this: Constraints & Transformations

Transform doesn't affect autolayout, only constraints can affect autolayout.

Transformes affect view's frame, but do nothing to view's center and bounds.

Make flip animation background not transparent

Use a subview, and change the container view's background color to what color you want.

When the container view is vertical to screen, make the subview hidden, and after the container view back, make subview visible.

Rotation Animation Bug in action method

let flipTransform = CATransform3DRotate(CATransform3DIdentity, CGFloat(-M_PI), 1, 0, 0)
UIView.animateWithDuration(0.3, {
  view.layer.transform = flipTransform
})

The animation will not execute and the view just change if you execute above code in an action method, like clip a button. You could use 'CGFloat(-M_PI) * 0.99' to fix this.

To-Do List

1. reuse card view

2. reorder card view

3. delete and add card view with pan gesture