0

在逐步应用转换而不是立即应用它们时，我看到了一些意想不到的、不一致的行为，我想知道为什么。

假设我们有一个标签，我们想向右100和向下平移50，然后放大到1.5原始大小的倍数。所以有两种转换：

  1. 翻译
  2. 规模

假设我们正在试验两种不同的动画：

  1. 并行执行平移和缩放
  2. 执行平移，然后依次执行缩放

在第一个动画中，您可能会执行以下操作：

UIView.animate(withDuration: 5, animations: {
    label.transform = label.transform.translatedBy(x: 100, y: 50).scaledBy(x: 1.5, y: 1.5)
}, completion: nil)

第一部动画

一切都按照您的预期进行。标签同时平滑地平移和缩放。

在第二个动画中：

UIView.animate(withDuration: 5, animations: {
    label.transform = label.transform.translatedBy(x: 100, y: 50)
}, completion: { _ in
    UIView.animate(withDuration: 5, animations: {
        label.transform = label.transform.scaledBy(x: 1.5, y: 1.5)
    }, completion: nil)
})

动画 2

标签翻译正确，然后繁荣，它意外跳跃，然后开始缩放。

是什么导致了这种突然的、意想不到的跳跃？通过检查每个变换（并行和顺序变换）的矩阵，值是相同的，正如预期的那样。

并行动画

transform before translate and scale: CGAffineTransform(a: 1.0, b: 0.0, c: 0.0, d: 1.0, tx: 0.0, ty: 0.0)
translate and scale transform: CGAffineTransform(a: 1.5, b: 0.0, c: 0.0, d: 1.5, tx: 100.0, ty: 50.0)
transform after translate and scale: CGAffineTransform(a: 1.5, b: 0.0, c: 0.0, d: 1.5, tx: 100.0, ty: 50.0)

顺序动画

transform before translation: CGAffineTransform(a: 1.0, b: 0.0, c: 0.0, d: 1.0, tx: 0.0, ty: 0.0)
translation transform: CGAffineTransform(a: 1.0, b: 0.0, c: 0.0, d: 1.0, tx: 100.0, ty: 50.0)
transform after translation: CGAffineTransform(a: 1.0, b: 0.0, c: 0.0, d: 1.0, tx: 100.0, ty: 50.0)

transform before scale: CGAffineTransform(a: 1.0, b: 0.0, c: 0.0, d: 1.0, tx: 100.0, ty: 50.0)
scale transform: CGAffineTransform(a: 1.5, b: 0.0, c: 0.0, d: 1.5, tx: 100.0, ty: 50.0)
transform after scale: CGAffineTransform(a: 1.5, b: 0.0, c: 0.0, d: 1.5, tx: 100.0, ty: 50.0)

那么是什么导致了突然的跳跃呢？

4

1 回答 1

2

您需要了解动画在 iOS 中的工作原理。您的animation闭包块会立即运行，最终值会立即分配给对象（这是很多人忘记的最重要的一点）。该animation块所做的只是让它看起来花费了那么多时间。让我用一个例子来详细说明。

let x = UIView()
x.alpha = 0
//At this point, alpha is 0
UIView.animate(withDuration: 5, animations: {
    x.alpha = 1
}, completion: nil)
//At this point, alpha is 1 right away. But the animation itself will take 5 seconds

考虑到这一点，让我们看看您发布的第二个示例

UIView.animate(withDuration: 5, animations: {
    label.transform = label.transform.translatedBy(x: 100, y: 50)
}, completion: { _ in
    UIView.animate(withDuration: 5, animations: {
        label.transform = label.transform.scaledBy(x: 1.5, y: 1.5)
    }, completion: nil)
})

第一个动画运行并立即转换您的视图。移动到那里只需要 5 秒，但您的视图的 x 和 y 值已经改变。完成后，缩放它会导致奇怪的行为。

于 2017-11-30T07:45:21.827 回答