iphone - 像核心动画老虎机一样在 z 轴上旋转

Question

我能够通过下面的代码移动或动画我的 UIView:

- (void) makeAnim1{

    //downward animation 
    [UIView animateWithDuration:1.5
                          delay:0.15
                        options: UIViewAnimationCurveLinear
                     animations:^{
                         carousel.frame = CGRectOffset(carousel.frame, 0, 650);
                     }
                     completion:^(BOOL finished){ //task after an animation ends
                         [self performSelector:@selector(makeAnim1_1) withObject:nil afterDelay:2.0];
                         NSLog(@"Done!");
                     }];    
}

- (void) makeAnim1_1{

    //upward animation
    [UIView animateWithDuration:1.5
                          delay:0.1
                        options: UIViewAnimationCurveLinear
                     animations:^{
                         carousel.frame = CGRectOffset(carousel.frame, 0, -650);
                     } 
                     completion:^(BOOL finished){
                        NSLog(@"Done!");
                     }];    


} 

但它只会上下移动 UIView。如何让它像 老虎机 一样旋转但只包含一个图像或 View 。就像在 z 轴上旋转一样。但让它看起来像是包含不止一张图片。

感谢您的帮助。

Answer 1

您无需更改动画 block 内的 frame，而是更改 transform。变换可用于缩放、旋转和平移(移动) View 。您只能绕 z 轴旋转，但这正是您所要求的。 View 上的 transform 属性采用 CGAffineTransform，如下所示:

// rotate pi/2 degrees clockwise
carousel.transform = CGAffineTransformMakeRotation(M_PI_2);

---

如果你需要做更高级的变换，比如绕另一个轴旋转，那么你需要使用一点核心动画并设置 View 层的变换属性(它需要一个 CATransform3D 而不是 CGAffineTransform)。

与所有 Core Animation 代码一样，您需要导入 QuartzCore.framework 并在您的代码中包含 QuartzCore/QuartzCore.h。

您正在执行的上述动画是 UIView 动画，它仅用于为 View 设置动画，但您要求的动画需要 View 层的更高级动画。我建议您查看 CABasicAnimation 的文档，并查看 Core Animation Programming Guide for iOS 以了解更多信息。

您可以像这样为 View 层的 x 轴旋转设置动画:

CABasicAnimation *slotAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
[slotAnimation setToValue:[NSNumber numberWithFloat:M_PI_2]];
// animation customizations like duration and timing 
// that you can read about in the documentation 
[[carousel layer] addAnimation:slotAnimation forKey:@"mySlotAnimation"];

上面的代码确实会围绕 x 轴旋转 View ，但如果没有透视，看起来会很傻(在 SO 中搜索“perspective Core Animation”，之前有人问过)。可能需要进行很多调整才能获得正确的外观，但这应该足以让您入门。