1

How do I programmatically via Quartz, animate a rectangle from lying face up (appear as line in 2D) to full height?

The following (pardon the crude drawing) is what I'm trying to get: a deck of cards (lines) with a card pivoting to full height. I don't have any means of adjusting for perspective.

Possible modus operandi:
1) start off with a UIImageView having zero height.
2) Upper (xl,yl)(xr,yr) coordinates widening apart (adjusting perspective) as the height increases.

enter image description here enter image description here enter image description here

Any reference, API suggestions welcomed.

Frederick C. Lee
  • 9,019
  • 17
  • 64
  • 105
  • Possible duplicate of [How do I apply a perspective transform to a UIView?](http://stackoverflow.com/questions/347721/how-do-i-apply-a-perspective-transform-to-a-uiview) – n_b May 05 '16 at 03:40
  • You need to look into using Matrix Transformations, particularly the "m34" if you want to get a perspective change. – n_b May 05 '16 at 03:40

1 Answers1

2

This will be relatively close to your desired animation with examples for both UIView animations and CABasicAnimation.

To begin, let's set up the from/to 3D transformations:

let perspective: CGFloat = 1.0 / 1000.0

var fromTransform = CATransform3DMakeRotation(-CGFloat(M_PI_2), 1, 0, 0)
fromTransform.m34 = perspective

var toTransform = CATransform3DMakeRotation(0, 1, 0, 0)
toTransform.m34 = perspective

To animate with UIView animations:

view.layer.transform = fromTransform

UIView.animateWithDuration(1.0, animations: {
    view.layer.transform = toTransform
})

If you want to use CABasicAnimation:

let flipAnimation = CABasicAnimation(keyPath: "transform")
flipAnimation.fromValue = NSValue(CATransform3D: fromTransform)
flipAnimation.toValue = NSValue(CATransform3D: toTransform)
flipAnimation.duration = 1.0
flipAnimation.fillMode = kCAFillModeForwards
view.layer.addAnimation(flipAnimation, forKey: "flip")

Edit:

OP desires the anchor point of the animation to be bottom-center, this can be achieved by:

view.layer.anchorPoint = CGPointMake(0.5, 1.0)
Jordan
  • 221
  • 1
  • 5
  • It's close to what I'm looking for. The above code has the foci at the center of the view vs at the base. But it gives me a start on what to study. Thanks! – Frederick C. Lee May 05 '16 at 05:11
  • @FrederickC.Lee Updated to account for anchor point. I believe that is what you were asking for. Simply set the appropriate anchorPoint when setting up the view. – Jordan May 05 '16 at 05:16
  • Yah... that's closer to what I'm looking for. Shall study. Thanks! – Frederick C. Lee May 05 '16 at 05:19
  • Great. Adjusting the perspective value will get closer to the effect you desire, I can't really know _exactly_ what that is though. If I can help more, let me know. Otherwise, please accept my answer :) – Jordan May 05 '16 at 05:25