ios - 如何在 Swift 中缩放卡片时翻转卡片

Question

我正在尝试获取一个卡片 UIView 对象，其中包含背面和正面图像 subview ，并翻转它，同时将其放大，直到中间翻转，然后将其缩小。我使用 UIView.transition(with:duration:options:animations:completion:) 只处理翻转部分，但这似乎不是正确的解决方案，因为所有动画都在该 block 仅发生在整个动画的中间，这是有道理的，因为这是需要添加/删除 View 的点。

我猜我需要在这里下降到较低的级别，但我对 UIView 层之外的动画不太熟悉。关于如何将这种缩放功能添加到卡片翻转中，有什么建议吗？

Answer 1

我将卡片的两面都放在 View 的图层下，您可以通过设置 CALayer 的 contents 来实现。然后在子图层上应用CABasicAnimation。

这是一个简单的演示，应该在 Playground 上运行，没有实现缩放，您可以自己通过 CATransform3DRotate(t:angle:x:y:z:) 修改矩阵。

var t = CATransform3DMakeRotation(CGFloat(M_PI), 0, 1, 0)
t.m34 = 0.001 // set a 3D perspective to simulate real flipping
let anim = CABasicAnimation(keyPath: "transform")
anim.byValue = NSValue(caTransform3D: t)
anim.duration = 3
anim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
anim.fillMode = kCAFillModeForwards
anim.isRemovedOnCompletion = true

let cardContainer = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 100))
cardContainer.backgroundColor = UIColor.clear

// layer1: front side of the card
let layer1 = CALayer()
layer1.frame = CGRect(x: 0, y: 0, width: 200, height: 100)
layer1.backgroundColor = UIColor.red.cgColor
layer1.isDoubleSided = false

// layer2: back side of the card
let layer2 = CALayer()
layer2.frame = CGRect(x: 0, y: 0, width: 200, height: 100)
layer2.backgroundColor = UIColor.blue.cgColor
layer2.isDoubleSided = false
layer2.transform = CATransform3DMakeRotation(CGFloat(M_PI), 0, 1, 0)

cardContainer.layer.addSublayer(layer1)
cardContainer.layer.addSublayer(layer2)
layer1.add(anim, forKey: "anim1")
layer2.add(anim, forKey: "anim2")