ios - 如何设置水平卡片从其底部旋转(偏航)到垂直的动画？

Question

如何通过 Quartz 以编程方式将矩形从正面朝上(在 2D 中显示为线)设置为全高？

以下(请原谅粗略的绘图)是我想要得到的:一副卡片(线)，卡片旋转到全高。我没有任何调整视角的方法。

可能的作案手法:1)从高度为零的 UIImageView 开始。 2) 上 (xl,yl)(xr,yr) 坐标随着高度的增加而扩大(调整视角)。





欢迎任何引用，API 建议。

Answer 1

通过 UIView 动画和 CABasicAnimation 的示例，这将相对接近您想要的动画。

首先，让我们设置从/到 3D 转换:

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

使用 UIView 动画制作动画:

view.layer.transform = fromTransform

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

如果你想使用 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")

编辑:

OP希望动画的 anchor 位于底部中心，这可以通过以下方式实现:

view.layer.anchorPoint = CGPointMake(0.5, 1.0)