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

Posted 2023-03-10

【中文标题】如何在 Swift 中缩放卡片时翻转卡片

【英文标题】：How to flip a card while scaling it in Swift

【发布时间】：2017-11-01 23:12:16

【问题描述】：

我正在尝试获取一个卡片 UIView 对象，其中包含前后图像子视图，并在将其缩放的同时将其翻转到中间翻转，然后将其缩小。我使用UIView.transition(with:duration:options:animations:completion:) 只使用翻转部分，但这似乎不是正确的解决方案，因为块中的所有动画只发生在完整动画的中途，这是有道理的，因为这就是重点需要添加/删除视图。

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

【问题讨论】：

我认为您应该能够以UIView.animate 的块的形式进行操作，并一个接一个地安排它们。

@ShamasS 你能详细说明一下吗？我很想这样做，基本上只是在自定义 UIView.animate 中实现UIView.transition(with，但我正在努力弄清楚如何做。

【参考方案1】：

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

这是一个简单的演示，应该在操场上运行，没有实现缩放，你可以通过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")

【讨论】：

感谢您的详细撰写！不幸的是，我被困在使用 UIViews 并且无法进入图层级别。我正在翻转的视图之一不是直接图像（它是一个乐天动画）。

您仍然可以尝试 CoreAnimation 解决方案，因为所有 UIView 都会有一个属于 CALayer 实例的 backing layer，因此请改为在它们上应用动画。 （实际上 UIView 动画是 CoreAnimation API 的封装，它们被委托给actionForLayer:forKey:）记得将.isDoubleSided 设置为false。