UIImageView上的iOS CAKeyframeAnimation rotationMode [英] iOS CAKeyframeAnimation rotationMode on UIImageView

问题描述

我正在尝试沿着贝塞尔曲线路径移动的UIImageView对象位置的关键帧动画。该图显示了动画之前的初始状态。蓝线是路径 - 最初直线向上移动，浅绿色框是初始边界框或图像，深绿色鬼是我正在移动的图像：

I am experimenting with Key Frame animation of the position of a UIImageView object moving along a bezier path. This pic shows the initial state before animation. The blue line is the path - initially moving straight up, the light green box is the initial bounding box or the image, and the dark green "ghost" is the image that I am moving:

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

When I kick off the animation with rotationMode set to nil, the image keeps the same orientation all the way through the path as expected.

但是当我将rotationMode设置为 kCAAnimationRotateAuto 开始动画时，图像会立即逆时针旋转90度，并保持此方向一直到路径。当它到达路径的末尾时，它以正确的方向重绘（实际上它显示了我在最终位置重新定位的UIImageView）

But when I kick off the animation with rotationMode set to kCAAnimationRotateAuto, the image immediately rotates 90 degrees anti-clockwise and keeps this orientation all the way through the path. When it reaches the end of the path it redraws in the correct orientation (well it actually shows the UIImageView that I repositioned in the final location)

我天真地期待rotationMode定位图像到路径的切线而不是正常，特别是当Apple文档为 CAKeyframeAnimation rotationMode state

I was naively expecting that the rotationMode would orientate the image to the tangent of the path and not to the normal, especially when the Apple docs for the CAKeyframeAnimation rotationMode state

确定沿路径设置动画的对象是否旋转以匹配路径切线。

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

那么这里的解决方案是什么？我是否必须将图像顺时针旋转90度？或者是否有我遗失的东西？

So what is the solution here? Do I have to pre-rotate the image by 90 degrees clockwise? Or is there something that I am missing?

感谢您的帮助。

编辑3月2日

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

I added a rotation step before the path animation using an Affine rotation like:

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

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

and then after the path animation, resetting the rotation with:

theImage.transform = CGAffineTransformIdentity;

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

This makes the image follow the path in the expected manner. However I am now running into a different problem of the image flickering. I am already looking for a solution to the flickering issue in this SO question:

iOS CAKeyFrameAnimation缩放在动画结束时闪烁

所以现在我不知道我是否已经制作事情变得更好或更糟！

So now I don't know if I have made things better or worse!

编辑3月12日

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

While Caleb pointed out that yes, I did have to pre rotate my image, Rob provided an awesome package of code that almost completely solved my problems. The only thing that Rob didn't do was compensating for my assets being drawn with a vertical rather than horizontal orientation, thus still requiring to preRotate them by 90 degrees before doing the animation. But hey, its only fair that I have to do some of the work to get things running.

所以我对Rob的解决方案的轻微改动 my 要求是：

So my slight changes to Rob's solution to suite my requirements are:

1. 当我添加UIView时，我预先旋转它来对抗通过设置<添加的固有旋转code> rotationMode ：

theImage.transform = CGAffineTransformMakeRotation（90 * M_PI / 180.0）;

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

我需要在动画结束时保持旋转，所以不是在定义完成块之后用新的比例因子对视图的变换进行爆破，而是基于当前变换：

I need to keep that rotation at the end of the animation, so instead of just blasting the view's transform with a new scale factor after the completion block is defined, I build the scale based on the current transform:

theImage.transform = CGAffineTransformScale（theImage.transform，scaleFactor，scaleFactor）;

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

这就是我必须做的就是按照我的预期让我的图像按照路径行进！

And that's all I had to do to get my image to follow the path as I expected!

编辑3月22日

我刚刚上传到Git Hub一个演示项目，展示沿着bezier路径移动对象。代码可以在 PathMove 找到

I have just uploaded to GitHub a demo project that shows off the moving of an object along a bezier path. The code can be found at PathMove

我也在我的博客中写了在iOS中沿着bezier路径移动对象

I also wrote about it in my blog at Moving objects along a bezier path in iOS

推荐答案

这里的问题是Core Animation的自动旋转保持不变视图的水平轴平行于路径的切线。这就是它的工作原理。

The issue here is that Core Animation's autorotation keeps the horizontal axis of the view parallel to the path's tangent. That's just how it works.

如果你希望你的视图的垂直轴跟随路径的切线，那么你正在进行的旋转视图的内容是合理的要做的事。

If you want your view's vertical axis to follow the path's tangent instead, rotating the contents of the view as you're currently doing is the reasonable thing to do.

这篇关于UIImageView上的iOS CAKeyframeAnimation rotationMode的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！