UIImageView上的iOS CAKeyframeAnimation旋转模式 [英] 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:

当我在rotationMode 设置为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)

我天真地期望旋转模式会将图像定向到路径的切线而不是法线，尤其是当 CAKeyframeAnimation rotationMode 状态

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 的解决方案的细微改动以满足 我的 要求是:

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

1. 当我添加 UIView 时，我预先旋转它以抵消通过设置 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 日编辑

我刚刚向 GitHub 上传了一个演示项目，该项目展示了对象沿贝塞尔路径的移动.代码可以在 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 中沿贝塞尔路径移动对象

推荐答案

这里的问题是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旋转模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！