iphone - CATransform3DMakeRotation 导致 UIimage 与 UIimageview 一起旋转

Question

我面临UIImageView旋转问题。

我需要UIImageView用像广告这样的动画来水平旋转。

为此，我使用以下代码：

[UIView animateWithDuration:1.0
        delay:0.0
        options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction
        animations:^{
             if (baddview) {
                 baddview = FALSE;
                 adimageView.layer.transform = CATransform3DMakeRotation(0, 0, 1, 0);                          
             } else {
                 baddview = TRUE;
                 adimageView.layer.transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);                          
             }
         }
         completion:^(BOOL finished) {
         }
];

图像视图正在根据我的需要旋转，但图像视图中的图像出现反转，就像旋转 180 度后一样（您可以在此处看到图像）。

如何在UIImageView不旋转的情况下为旋转设置动画UIImage？

Answer 1

One possible approach is making 2 UIImageViews, and animating them. What you would have to do is:

1. Before the animation block, create the new UIImageView and place it behind the current UIImageView, but make sure that it has a rotation of 180.
2. Make two animation blocks, one that rotates the first view 90 degrees at half (ie 0.5 sec) the duration, and the other block animates the view behind to CATransform3DIdentity at full duration (ie 1.0 sec).

I will add some code if needed.

Or alternatively, set the isDoubleSided property of CALayer to NO. Then, rotate both views 180 degrees. The top view will be hidden, since it is not double sided.

---

I just created a new single-view project, and added a UIButton to perform the flip. Here is the rest of the code:

Header File:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController {
    UIImageView* _imageView1;
    UIImageView* _imageView2;
}

- (IBAction)flip:(id)sender;

@end

Implementation file:

#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>
@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    UIImage* image1 = [UIImage imageNamed:@"gaara1.png"];
    _imageView1 = [[UIImageView alloc] initWithImage:image1];
    [_imageView1 setFrame:CGRectMake((CGRectGetWidth(self.view.bounds) - 300)/2, 100.f, 300, 75)];

    UIImage* image2 = [UIImage imageNamed:@"gaara2.png"];
    _imageView2 = [[UIImageView alloc] initWithImage:image2];
    [_imageView2 setFrame:CGRectMake((CGRectGetWidth(self.view.bounds) - 300)/2, 100.f, 300, 75)];
    // the second imageView is in the back
    [self.view addSubview:_imageView2];
    [self.view addSubview:_imageView1];

}

- (IBAction)flip:(id)sender {
    [_imageView1.layer setDoubleSided:NO];
    [_imageView2.layer setDoubleSided:NO];

    [_imageView1.layer setZPosition:10.f];

    [_imageView1.layer setTransform:CATransform3DIdentity];
    [_imageView2.layer setTransform:CATransform3DMakeRotation(-M_PI, 1.f, 0.f, 0.f)];

    [UIView animateWithDuration:1.0
                          delay:0.0
                        options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction
                     animations:^{
                         _imageView1.layer.transform = CATransform3DMakeRotation(M_PI, 1.f, 0.f, 0.f);
                         _imageView2.layer.transform = CATransform3DIdentity;
                     }
                     completion:NULL];

}

@end

The images:

Answer 2

您的代码可能会导致问题。UIView 动画用于动画化 UIView 的属性，而不是图层。

如果您尝试在 UIView 动画块中操作图层变换，我预计会出现问题。您应该限制自己在 UIView 动画块中更改视图属性：

[UIView animateWithDuration:1.0
                      delay:0.0
                    options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction
                 animations:^{
                     _imageView1.transform = CGAffineTransformMakeRotation(M_PI);
                     _imageView2.transform = CGAffineTransformIdentity;
                 }
                 completion:NULL];

CAAnimation 对象用于动画层。

如果您想为视图的图层变换设置动画，请直接执行（这将为您提供隐式动画）或创建 CABasicAnimation 对象来执行更复杂的动画。