像核心动画老虎机一样在z轴上旋转 [英] Rotate in z-axis like core-animation slot machine

问题描述

我可以通过此代码在此处移动或动画我的UIView：

I was to able to move or animate my UIView by this code down here:

- (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 上下。如何让它像老虎机一样旋转，但只包含一个图像或视图。像在z轴上旋转一样。但是看起来它包含多个图像。

But it only move the UIView up and down. How can I make it spin like a Slot machine but only contains one image or view. Like rotate in z axis. But make it look like it contains more than one image.

感谢您的帮助。

推荐答案

您可以更改转换，而不是更改动画块中的框架。变换可用于缩放，旋转和平移（移动）视图。您只能围绕z轴旋转，但这就是您要求的。视图上的转换属性需要 CGAffineTransform ，如下所示：

Instead of changing the frame inside the animation block you change the transform. The transform can be used to scale, rotate and translate (move) the view. You can only rotate around the z-axis but that is what you asked for. The transform property on the view takes a CGAffineTransform, like this:

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

---

如果你需要要进行更高级的转换，比如围绕另一个轴旋转，那么你需要使用一点Core Animation并设置views层的转换属性（需要 CATransform3D 而不是 CGAffineTransform ）。

---

If you need to do more advanced transforms like rotating around another axis then you would need to use a little bit of Core Animation and to set the transform property of the views layer (which takes a CATransform3D instead of a CGAffineTransform).

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

As with all Core Animation code you need to import QuartzCore.framework and include QuartzCore/QuartzCore.h in your code.

您正在进行的上述动画是UIView动画，仅用于为视图设置动画，但您要求的动画需要更高级的视图层动画。我建议您查看CABasicAnimation的文档，还可以查看iOS核心动画编程指南以了解更多信息。

The above animations you are doing is UIView animations which are only meant to animate views but the animation you are asking for requires more advanced animations of the views layer. I suggest that you look at the documentation for CABasicAnimation and also take a look at the Core Animation Programming Guide for iOS to learn more.

您可以为视图图层的x旋转设置动画，如下所示：

You can animate the x rotation of a views layer like this:

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轴旋转视图但是看起来很傻而没有透视（搜索对于透视核心动画来说，之前已经被问过了。可能需要进行大量调整以获得正确的外观，但这应该足以让您入门。

The above code will indeed rotate the view around the x axis but will look very silly without perspective (search SO for "perspective Core Animation", it has been asked about before). There is probably a lot of tweaking to get the correct look but this should be enough to get you started.

这篇关于像核心动画老虎机一样在z轴上旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！