iOS 仿射变换旋转的奇怪行为 [英] Strange behavior from affine transform rotation on iOS

问题描述

我想对 UIImageView 做一个相当简单的旋转.基本上，我有一个完美方形图像中的轮子图像，我想在动画下旋转它.

I want to do a fairly simple rotation of a UIImageView. Basically I have an image of a wheel in a perfectly square image and I want to rotate it under animation.

所以我尝试了这个:

- (void)testButtonPressed:(id)sender {
    NSLog(@"Test button pressed");
    CGAffineTransform transform = CGAffineTransformMakeRotation(1.0);

    [UIView animateWithDuration:10.0 delay:0 options:UIViewAnimationOptionCurveLinear
                     animations:^{
                         dial.transform = transform;  // "dial" is a UIImageView
                     }
                     completion: ^(BOOL finished){
                     }];
 }

发生的情况是，当动画开始时，图像(大约 300 个正方形)立即向上跳跃 50-100 像素并被挤压"成一个狭窄的椭圆形.之后，动画就可以正常进行了.

What happens is that, when the animation begins the image (that's about 300 square) immediately jumps up 50-100 pixels and is "squeezed" into a narrow oval. After that, the animation proceeds just fine.

我尝试改用 beginAnimation 并得到相同的行为.

I tried using beginAnimation instead and got the same behavior.

我知道我不了解关于旋转原点的内容(文档圈子里讨论)，但挤压似乎很奇怪，而且这一切同时发生(与动画相比)这一事实很奇怪.

I understand that I don't understand the stuff about the rotation origin (the docs talk in circles), but the squeezing seems odd, and the fact that it all occurs at once (vs being animated) is strange.

有什么想法吗?

(这是在 Xcode 4.5.1 的 iPhone 6.0 模拟器上运行的.这可能只是一个模拟器吗?)

(This is running on the iPhone 6.0 simulator from Xcode 4.5.1. Is is possibly just a simulator thing?)

更新:我有机会多做一点(我在真正的"工作之间做).我创建了一个从来没有自动布局的新 XIB，轮子是正常的"，但背景被垂直压缩.

Update: I got a chance to work on it a little more (I do it in-between "real" work). I created a new XIB that never had autolayout and the wheel was "normal" but the background was vertically compressed.

然后是一点灵感.我注意到图像视图在 NLog 转储中被标记为自动调整大小".没有看到从 IB 关闭它的方法，但确实看到您可以关闭主视图上的自动调整子视图大小".这样做了，它表现得很好！

Then a bit of inspiration. I noticed that the image views were marked "autoresize" in the NLog dumps. Didn't see a way to turn that off from IB, but did see that you can turn off "Autoresize Subviews" on the main view. Did that and it behaved perfectly!

我认为为自动布局引入的一些新功能是这里的罪魁祸首.不过，不知道我是否找到了所有神奇的设置.

I'm thinking that some of the new features introduced for autolayout are the culprit here. Don't know, though, if I've found all the magical settings yet.

但是... 仍然有问题，即我的图像的透明"部分在 iPad 上是黑色的，即使关闭了所有内容的不透明".

But... Still have the problem that the "transparent" parts of my images are black on the iPad, even after turning off "Opaque" on everything.

更新:我终于发现我的图像是 JPG 24 位模式而不是 32 位模式.这适用于模拟器——纯黑色被解释为透明.但它不适用于 iPad.使用 32 位图像修复了这个问题，并且(关闭了自动调整子视图以消除奇怪的扭曲/转换)一切都很好除了......旋转 > 180 度向后动画.动画是聪明"的，走最短路径".

Update: I've finally figured out that my images were in JPG 24 bit mode rather than 32 bit mode. This works on the simulator -- pure black is interpreted as transparent. But it doesn't work on the iPad. Using 32 bit images fixes that and (with "autoresize subviews turned off to eliminate the odd distortions/translations) everything is fine except ... rotations > 180 degrees animate backwards. The animation is being "smart" and taking the "shortest path".

我想我只需要将动画分成两步即可.

I suppose I'll simply have to break the animation into two steps.

推荐答案

为什么不使用 CABasicAnimation.

Why don't you do it with CABasicAnimation.

CABasicAnimation* rotationAnimation;
rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat: -M_PI_2 ];
rotationAnimation.duration = 2.0;
rotationAnimation.cumulative = YES;
rotationAnimation.repeatCount = 1.0; 
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

[imageView.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];

这篇关于iOS 仿射变换旋转的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！