ios - 在旋转的上下文中理解 CGAfflineTransform

Question

我正在进行一些实验来学习 iOS 中的手势和动画。创建类似 Tinder 的界面就是其中之一。我正在遵循本指南:http://guti.in/articles/creating-tinder-like-animations/

我理解图像位置的变化，但不理解旋转。我想我已经指出我的问题是不理解 CGAfflineTransform。特别是以下代码:

CGFloat rotationStrength = MIN(xDistance / 320, 1);
CGFloat rotationAngle = (CGFloat) (2 * M_PI * rotationStrength / 16);
CGFloat scaleStrength = 1 - fabsf(rotationStrength) / 4;
CGFloat scale = MAX(scaleStrength, 0.93);
CGAffineTransform transform = CGAffineTransformMakeRotation(rotationAngle);
CGAffineTransform scaleTransform = CGAffineTransformScale(transform, scale, scale);
self.draggableView.transform = scaleTransform;

这些值和计算，例如:320、1-fabs(strength)/4、.93 等，来自哪里？他们如何为最终轮换做出贡献？

另一方面，Tinder 似乎结合使用了滑动和平移。他们是向图像添加滑动手势，还是只考虑平移的速度？

Answer 1

那个代码有很多magic constants ，其中大部分可能被选中是因为它们产生了“看起来不错”的东西。这可能让人难以理解。这与实际的转换无关，而是与用于创建它们的值有关。

让我们逐行分解，看看是否更清楚。

---

CGFloat rotationStrength = MIN(xDistance / 320, 1);

值 320 可能被假定为设备的宽度(在 6 和 6+ 出现之前，它是所有 iPhone 的纵向宽度)。

这意味着 xDistance/320 是用户沿 x 轴拖动多远的一个因素(基于名称 xDistance)。当用户没有拖动任何距离时这将为 0.0，当用户拖动了 320 点时将为 1.0。

MIN(xDistance/320, 1) 取拖动距离因子的最小值和 1)。这意味着如果用户拖动超过 320 点(这样距离因子将大于 1，旋转强度将永远不会大于 1.0。它不会再次防止负值(如果用户向左拖动， xDistance 将是一个负值，它始终小于 1。但是，我不确定该指南是否考虑到了这一点(因为 320 是全宽，而不是半宽。

因此，第一行是一个介于 0 和 1 之间的因子(假设没有负值)，表示应该应用多少旋转。

---

CGFloat rotationAngle = (CGFloat) (2 * M_PI * rotationStrength / 16);

下一行计算实际的旋转角度。角度以弧度指定。由于 2π 是一个整圆 (360°)，因此旋转角度的范围是从 0 到整圆的 1/16 (22.5°)。选择值 1/16 可能是因为它“看起来不错”。

两条线在一起意味着当用户拖动得越远， View 旋转得越多。

---

CGFloat scaleStrength = 1 - fabsf(rotationStrength) / 4;

从变量名来看，它似乎会计算 View 应该缩放多少。但它实际上是在计算 View 应该具有的比例因子。比例为 1 表示“正常”或未缩放的大小。当旋转强度为 0 时(当 xDistance 为 0 时)，缩放强度将为 1(未缩放)。随着旋转强度的增加，接近 1，这个比例因子接近 0.75(因为那是 1 - 1/4)。

fabsf 就是浮点绝对值(fabsf(-0.3) 等于0.3)

---

CGFloat scale = MAX(scaleStrength, 0.93);

在下一行中，计算了实际比例因子。它只是 scaleStrength 的最大值和 0.93(缩小到 93%)。 0.93 的值完全是任意的，很可能正是作者发现的吸引人的地方。

由于比例强度的范围为 1 到 0.75，并且比例因子绝不会小于 0.93，因此比例因子仅在 xDistance 的前三分之一发生变化。接下来三分之二的所有比例强度值都将小于 0.93，因此不会改变比例因子。

---

使用如上计算的 scaleFactor 和 rotationAngle， View 首先旋转(按该角度)，然后按比例缩小(按该比例因子)。

总结

所以，简而言之。当 View 向右拖动时(xDistance 接近 320 点)， View 在整个拖动过程中从 0° 线性旋转到 22.5°，并在拖动的前三分之一中从 100% 缩放到 93%(然后保持在93% 用于剩余的拖动手势)。