31

我正在尝试做的似乎应该很简单：我创建了一张旧留声机唱片的 2D 自上而下视图。我想在它的 X 轴上旋转它（把它放回去），然后围绕它的 Z 轴旋转它。

我在这里阅读了所有包含 CATransform3D 的问题，我阅读了 Steve Baker 的“矩阵可以成为你的朋友”文章以及 Bill Dudney 的书“Mac OS X 和 iPhone 的核心动画”，我认为 Brad Larson 的“ 3-D Rotation without a trackball”具有所有正确的代码，但由于他允许用户调整所有三个轴，我很难将他的代码缩小到我认为只是一维的（旋转的 z 轴）。

这是我正在测试的图像，并不是说细节对问题很重要：

金唱片

我以通常的方式将其显示在屏幕上：（在 UIView 的子类中）

- (void)awakeFromNib
{
    UIImage *recordImage = [UIImage imageNamed:@"3DgoldRecord"];
    if (recordImage) {
        recordLayer = [CALayer layer];
        [recordLayer setFrame:CGRectMake(0.0, 0.0, 1024, 1024)];
        [recordLayer setContents:(id)[[UIImage imageNamed:@"3DgoldRecord"] CGImage]];
        [self.layer addSublayer:recordLayer];
    }
}

这是第一次测试，只是在屏幕上显示 ;-)

然后，为了“放回去”，我应用一个变换来绕图层的 X 轴旋转，在将图层的内容设置为图像之后和添加子图层之前插入此代码：

    CATransform3D myRotationTransform = 
                    CATransform3DRotate(recordLayer.transform,
                                        (M_PI_2 * 0.85), //experiment with flatness
                                        1.0, // rotate only across the x-axis
                                        0.0, // no y-axis transform
                                        0.0); //  no z-axis transform
    recordLayer.transform = myRotationTransform;

这按预期工作：记录很好地放回。

对于下一步，导致记录旋转，我将此动画绑定到 touchesEnded 事件，尽管一旦退出测试/学习阶段，此旋转将不受用户控制：

CATransform3D currentTransform = recordLayer.transform; // to come back to at the end
CATransform3D myRotationTransform = 
                CATransform3DRotate(currentTransform,
                                    1.0, // go all the way around once
                                    (M_PI_2 * 0.85),    // x-axis change
                                    1.00,    // y-axis change ?
                                    0.0);   // z-axis change ?
recordLayer.transform = myRotationTransform;        
CABasicAnimation *myAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
myAnimation.duration = 5.0;
myAnimation.fromValue = [NSNumber numberWithFloat:0.0];
myAnimation.toValue = [NSNumber numberWithFloat:M_PI * 2.0];
myAnimation.delegate = self;
[recordLayer addAnimation:myAnimation forKey:@"transform.rotation"];

所以我很确定我挂断的是 CATransform3DRotate 调用中的向量（相信我：我一直在尝试对该向量进行简单的更改以观察变化......现在列出的只是最后一次更改我试过）。据我了解，变换中x、y和z的值本质上是动画期间传入的值的百分比，范围从fromValue到toValue。

如果我在正确的轨道上理解这一点，是否可以在一次转换中表达这一点？或者我是否必须为每个有效的动画帧围绕 z 轴稍微旋转原始直立图像，然后通过 x 轴旋转放置结果？我看到一个关于组合变换的问题/答案，但那是一个比例变换，然后是一个旋转变换。我已经搞砸了变换变换，但没有做我认为我应该得到的事情（即将一个变换的结果传递给下一个变换参数似乎只是完全执行一个然后为另一个设置动画）。

4

2 回答 2

63

如果您使用 aCATransformLayer作为图像视图层的父级，这是最简单的。因此，您需要一个自定义视图子类CATransformLayer用作其层。这是微不足道的：

@interface TransformView : UIView

@end

@implementation TransformView

+ (Class)layerClass {
    return [CATransformLayer class];
}

@end

将 aTransformView放入您的笔尖，并将 a 添加UIImageView为TransformView. 将这些视图连接到视图控制器中名为transformViewand的插座discView。

在您的视图控制器中，将 的变换设置transformView为应用透视（通过设置m34）和 X 轴倾斜：

- (void)viewDidLoad
{
    [super viewDidLoad];
    CATransform3D transform = CATransform3DIdentity;
    transform.m34 = -1 / 500.0;
    transform = CATransform3DRotate(transform, .85 * M_PI_2, 1, 0, 0);
    self.transformView.layer.transform = transform;
}

transform.rotation.z为discViewin的关键路径添加动画viewWillAppear:并将其删除viewDidDisappear:：

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    animation.fromValue = [NSNumber numberWithFloat:0];
    animation.toValue = [NSNumber numberWithFloat:2 * M_PI];
    animation.duration = 1.0;
    animation.repeatCount = HUGE_VALF;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    [self.discView.layer addAnimation:animation forKey:@"transform.rotation.z"];
}

- (void)viewDidDisappear:(BOOL)animated {
    [super viewDidDisappear:animated];
    [self.discView.layer removeAllAnimations];
}

结果：

转盘

更新

这是一个 Swift 操场演示：

import UIKit
import XCPlayground

class TransformView: UIView {
    override class func layerClass() -> AnyClass {
        return CATransformLayer.self
    }
}

let view = UIView(frame: CGRectMake(0, 0, 300, 150))
view.backgroundColor = UIColor.groupTableViewBackgroundColor()
XCPlaygroundPage.currentPage.liveView = view

let transformView = TransformView(frame: view.bounds)
view.addSubview(transformView)

var transform = CATransform3DIdentity
transform.m34 = CGFloat(-1) / transformView.bounds.width
transform = CATransform3DRotate(transform, 0.85 * CGFloat(M_PI_2), 1, 0, 0)
transformView.layer.transform = transform

let image = UIImage(named: "3DgoldRecord")!
let imageView = UIImageView(image: image)
imageView.bounds = CGRectMake(0, 0, 200, 200)
imageView.center = CGPointMake(transformView.bounds.midX, transformView.bounds.midY)
transformView.addSubview(imageView)

let animation = CABasicAnimation(keyPath: "transform.rotation.z")
animation.fromValue = 0
animation.toValue = 2 * M_PI
animation.duration = 1
animation.repeatCount = Float.infinity
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
imageView.layer.addAnimation(animation, forKey: animation.keyPath)

将问题中的图像复制到 Playground Resources 文件夹并命名3DgoldRecord.png。结果：

操场结果

于 2012-02-24T05:37:42.507 回答
0

您可以考虑用超级层包装记录层。将 x 轴旋转应用到 superlayer 并将 z 轴旋转动画添加到 recordLayer。

于 2012-02-24T03:34:43.907 回答