iOS Swift - 如何使用 CABasicAnimation 和 CATransform3DRotate 進行 360 度翻轉 animation 與“m34”變換？

Question

賞金將在 2 天內到期。 此問題的答案有資格獲得+50聲望賞金。 程序員正在從有信譽的來源尋找答案：

如果提供一個工作代碼片段以及如何使用 CATransfrom3DRotate with.m34 transfrom 進行 360 度旋轉 animation (CABasicAnimation)，我將不勝感激。 我認為這個問題在堆棧溢出之前沒有得到回答，因此它也將是堆棧溢出的有用補充。 謝謝！

盡管我盡了最大的努力，但我無法弄清楚如何使用 CATransform3DRotate 從左到右進行 UIView 的全周期旋轉 animation 。 請注意，我已經可以使用 CABasicAnimation 將其旋轉 360 度，但沒有 CATransform3DRotate。 但是，我想使用.m34變換來獲得透視深度。 涉及 UIView.animate/transitions 的解決方案對我想要完成的工作沒有幫助。 任何幫助深表感謝。

編輯：我在 Stackoverflow 和其他地方進行了廣泛搜索，但沒有找到任何描述如何使用 CATransform3DRotate 進行 360 度旋轉的內容。 在那里尋求幫助，因為這是一個以前似乎沒有回答過的問題。 謝謝！

這是將 UIView 旋轉 180 度的代碼。

var transform = CATransform3DIdentity
transform.m34 = 1.0 / -200.0

let animation = CABasicAnimation(keyPath: "transform")
animation.toValue = CATransform3DRotate(transform, CGFloat( Double.pi), 0, 1, 0)
animation.duration = 0.8
animation.beginTime = 0.0
animation.fillMode = .forwards
animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
cardView.layer.add(animation, forKey: "360flip")

Answer 1

在最后一個 cardView.layer.add(animation...) 行之前添加了兩行：

    animation.isCumulative = true
    animation.repeatCount = 2

不要問我花了多長時間才弄清楚這個……現在是凌晨 2 點，所以這會給你一個線索；）

干杯。

PS注意 - 因為你重復 animation 你不能使用.easeInEaseOut否則你會在 180º 處暫停，所以你會看到我也將它更改為線性。

Answer 2

您當前的代碼正在替換動畫層的整個變換，這意味着您不能對其應用透視變換。 您還遇到了結尾 state 在數學上與開頭 state 相同的問題，為了解決這個問題，您嘗試將動畫鏈接在一起，並使用填充模式，這使整個事情變得更加復雜。

首先，讓我們處理轉換。 要獲得您想要設置圖層變換的.m34的透視圖，您已經在執行以下操作：

var perspective = CATransform3DIdentity
perspective.m34 = 1 / -200
cardView.layer.transform = perspective

接下來，要僅觸摸圖層變換的旋轉，您可以使用比transform更精確的關鍵路徑：

let rotate = CABasicAnimation(keyPath: "transform.rotation.y")
rotate.fromValue = 0

這將使層變換的 rest 保持不變。

最后，當 animation 的結尾與開頭相同時，如何強制 animation 引擎注意到差異？ 使用byValue ：

rotate.byValue = CGFloat.pi * 2

這會迫使圖層繞遠至 360 度，而不是停留在原來的位置的懶惰捷徑。

最終的完整代碼是：

var perspective = CATransform3DIdentity
perspective.m34 = 1 / -200
cardView.layer.transform = perspective
let rotate = CABasicAnimation(keyPath: "transform.rotation.y")
rotate.fromValue = 0
rotate.byValue = CGFloat.pi * 2
rotate.duration = 2
cardView.layer.add(rotate, forKey: nil)

給出這個結果：

Answer 3

簡而言之，你需要兩組動畫。

查看我之前的答案https://stackoverflow.com/a/24990978/945906