UIImageView 上的 iOS CAKeyframeAnimation rotationMode

Question

我正在试验 UIImageView 对象沿贝塞尔路径移动的位置的关键帧动画。这张照片显示了动画之前的初始状态。蓝线是路径 - 最初直线向上移动，浅绿色框是初始边界框或图像，深绿色“幽灵”是我正在移动的图像:

当我在 rotationMode 设置为 nil 的情况下启动动画时，图像按预期在整个路径中保持相同的方向。

但是当我将 rotationMode 设置为 kCAAnimationRotateAuto 来启动动画时，图像会立即逆时针旋转 90 度并在整个路径中始终保持这个方向。当它到达路径的尽头时，它会以正确的方向重新绘制(它实际上显示了我在最终位置重新定位的 UIImageView)

我天真地期望 rotationMode 会将图像定向到路径的切线而不是法线，特别是当 Apple 文档为 CAKeyframeAnimation rotationMode 时状态

Determines whether objects animating along the path rotate to match the path tangent.

那么这里的解决方案是什么？我必须将图像顺时针预旋转 90 度吗？还是我遗漏了什么？

感谢您的帮助。

---

编辑 3 月 2 日

我使用仿射旋转在路径动画之前添加了一个旋转步骤，例如:

theImage.transform = CGAffineTransformRotate(theImage.transform,90.0*M_PI/180);

然后在路径动画之后，重置旋转:

theImage.transform = CGAffineTransformIdentity;

这使得图像以预期的方式跟随路径。但是，我现在遇到了图像闪烁的另一个问题。我已经在寻找解决这个 SO 问题中闪烁问题的方法:

iOS CAKeyFrameAnimation scaling flickers at animation end

所以现在我不知道我是让事情变得更好了还是更糟了!

---

编辑 3 月 12 日

虽然 Caleb 指出是的，但我确实必须预先旋转我的图像，而 Rob 提供了一个很棒的 几乎完全解决了我的问题的代码包。 Rob 唯一没有做的是补偿我的 Assets 是用垂直而不是水平方向绘制的，因此仍然需要在制作动画之前将它们预旋转 90 度。但是，嘿，我必须做一些工作才能让事情正常运行，这是唯一公平的。

因此，为了满足我的要求，我对 Rob 的解决方案进行了细微改动:

1. 当我添加 UIView 时，我会预先旋转它以抵消通过设置 rotationMode 添加的固有旋转:

   theImage.transform = CGAffineTransformMakeRotation(90*M_PI/180.0);

2. 我需要在动画结束时保持该旋转，因此我不是在定义完成 block 后使用新的比例因子对 View 的变换进行爆破，而是根据当前变换构建比例:

   theImage.transform = CGAffineTransformScale(theImage.transform, scaleFactor, scaleFactor);

这就是我必须做的所有事情，才能让我的形象按照我的预期走下去!

---

编辑 3 月 22 日

我刚刚向 GitHub 上传了一个演示项目，展示了对象沿贝塞尔曲线路径的移动。代码可以在 PathMove 找到

我也在我的博客 Moving objects along a bezier path in iOS 上写过它

Answer 1

这里的问题是 Core Animation 的自动旋转使 View 的水平轴与路径的切线保持平行。这就是它的工作原理。

如果您希望 View 的垂直轴跟随路径的切线，那么像您当前所做的那样旋转 View 的内容是合理的做法。