做一个绕Y轴旋转的动画时遇到问题

最新推荐文章于 2024-10-14 05:57:07 发布

原创最新推荐文章于 2024-10-14 05:57:07 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#动画 #iOS

学习情况同时被 3 个专栏收录

172 篇文章

订阅专栏

IOS 开发

144 篇文章

订阅专栏

OpenGL

13 篇文章

订阅专栏

在iOS开发中，作者发现一个红色方块在做绕Y轴旋转动画时，仅显示一半，似乎被其在同一父视图的蓝色矩形遮挡。经过调试，发现将两者放在不同父视图时，动画显示正常。问题的关键在于，当红色方块与蓝色矩形位于同一UIView时，它们共享同一Core Animation Layer，导致动画效果互相影响。理解UIView与CALayer的关系对于解决此类问题至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片中蓝色矩形作为背景，当点击按钮时红色方形绕Y轴旋转

这是我做的一个Demo，红色方块与蓝色矩形的super view都是self.view，当红色方块做绕Y轴旋转动画时，只看到一半的红色方形在旋转。

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    // image view
    _pmainPicture=[[UIImageView alloc]initWithFrame:CGRectMake(0, 100, [[UIScreen mainScreen] bounds].size.width, 190.0f)];
    _pmainPicture.backgroundColor = [UIColor blueColor];
    _pmainPicture.contentMode = UIViewContentModeScaleAspectFill;
    _pmainPicture.userInteractionEnabled = YES;
    [self.view addSubview:_pmainPicture];


    //button
    _pButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [_pButton setTitle: @"请点击" forState: UIControlStateNormal];
    _pButton.frame = CGRectMake(_pSwitch.frame.origin.x, _pSwitch.frame.origin.y+100, 200, 44);
    _pButton.backgroundColor = [UIColor blueColor];
    [_pButton setTitleColor: [UIColor redColor] forState: UIControlStateNormal];
    [_pButton addTarget: self action:@selector(buttonAction:) forControlEvents:UIControlEventTouchUpInside];
    _pButton.accessibilityIdentifier = @"myButton";
    [self.view addSubview: _pButton];

    // 头像
    _headImageView = [[UIImageView alloc] init];
    _headImageView.frame = CGRectMake(0, 100, 100, 100);
    _headImageView.backgroundColor = [UIColor redColor];
    [self.view addSubview:_headImageView];
}

这是按钮点击方法

-(void) buttonAction:(UIButton*) button
{
    [self rotate360WithDuration:2.0 repeatCount:1];
    _headImageView.backgroundColor = [UIColor redColor];
    _headImageView.animationDuration = 2.0;
    _headImageView.animationRepeatCount = 1;
    [_headImageView startAnimating];
}

这是绕Y轴旋转的动画

- (void)rotate360WithDuration:(CGFloat)aDuration repeatCount:(CGFloat)aRepeatCount{
    CAKeyframeAnimation *theAnimation = [CAKeyframeAnimation animation];
    theAnimation.values = [NSArray arrayWithObjects:
                           [NSValue valueWithCATransform3D:CATransform3DMakeRotation(0, 0,1,0)],
                           [NSValue valueWithCATransform3D:CATransform3DMakeRotation(3.13, 0,1,0)],
                           [NSValue valueWithCATransform3D:CATransform3DMakeRotation(3.13, 0,1,0)],
                           [NSValue valueWithCATransform3D:CATransform3DMakeRotation(6.26, 0,1,0)],
                           nil];
    theAnimation.cumulative = YES;
    theAnimation.duration = aDuration;
    theAnimation.repeatCount = aRepeatCount;
    theAnimation.removedOnCompletion = YES;

    [_headImageView.layer addAnimation:theAnimation forKey:@"transform"];
}

运行这些代码就看到一个效果，红色方块旋转的时候，只看到一半在旋转，就好像蓝色矩形遮住了一样。

如果改成以下代码

// 头像
    _headImageView = [[UIImageView alloc] init];
    _headImageView.frame = CGRectMake(0, 0, 100, 100);
    _headImageView.backgroundColor = [UIColor redColor];
    [_pmainPicture addSubview:_headImageView];

这样重新运行代码，红色方块绕着Y轴旋转，没有被蓝色矩形遮住了。

这两段代码的区别是，前者红色方块与蓝色矩形在同一个父窗口上（self.view），后者红色方块与蓝色矩形不在同一个父窗口。

UIView是iOS系统中界面元素的基础，所有的界面元素都继承自它。它本身完全是由CoreAnimation来实现的。它真正的绘图部分，是由一个叫CALayer（Core Animation Layer）的类来管理。UIView本身，更像是一个CALayer的管理器，访问它的跟绘图和跟坐标有关的属性，例如frame，bounds等等，实际上内部都是在访问它所包含的CALayer的相关属性。

前者红色方块与蓝色矩形同在同一layer层，所以红色方块做动画时，影响了蓝色矩形。