如何围绕Y轴翻转CALayer？

Question

我在CALayer的子类中使用此代码,这些实例是根CALayer的子层.

-(void)setSelected:(bool)s {
    selected=s;
    if (s)
    {
        CATransform3D  rot = CATransform3DMakeRotation(M_PI, 0, 1, 0);
        rot.m34=-1.0 / 200;
        [self setTransform:rot];

    }
    else
    {
            CATransform3D  rot = CATransform3DMakeRotation(0, 0, 1, 0);
        rot.m34=-1.0 / 200;
        [self setTransform:rot];
    }
}

当选定属性设置为TRUE时,会发生以下情况:旋转完成直到角度等于M_PI/2,然后图层消失,因为它是正交的.动画的结尾是错误的:在动画的第一部分(例如在左侧)看起来增长的边缘在左侧而不是右侧结束动画.然而,内容被翻转.

我认为这与两个旋转矩阵之间的插值有关,但我无法准确理解发生了什么.

细节:动画看起来像这样:

1. 围绕Y轴增加旋转+ Pi/2
2. 内容翻转
3. 将围绕Y轴的旋转增加-Pi/2,就好像它从(yz)平面反弹一样

翻转的内容是我想要实现的.

这是我得到的动画的帧.如你所见,梯形的小边始终在左边; 它应该在动画结尾的右侧(右上方框架).

Answer 1

变换的数学运算不正确.您应该在旋转变换后应用透视变换,这意味着连接两个变换.更改旋转变换的m34系数不等效.

您应该通过以下代码替换您的代码:

-(void)setSelected:(bool)s {
    selected=s;
    CATransform3D perpectiveTransform = CATransform3DIdentity;
    perpectiveTransform.m34 =-1.0 / 200;

    if (s)
    {

        CATransform3D  rot = CATransform3DMakeRotation(M_PI, 0, 1, 0);
        [self setTransform:CATransform3DConcat(rot, perpectiveTransform)];

    }
    else
    {
        CATransform3D  rot = CATransform3DMakeRotation(0, 0, 1, 0);
        [self setTransform:CATransform3DConcat(rot, perpectiveTransform)];
    }
}

顺便说一下,应用透视变换的一种更方便的方法是使用超层的sublayerTransform属性,从而将其应用于每个子层(如果需要).

这将产生类似于:

self.superlayer.sublayerTransform = perspectiveTransform;  //do this in your setup
....
self.transform = rot;

为了相同的结果.

Answer 2

如果有人只想水平翻转图像或视图的方向

yourView.layer.transform = CATransform3DMakeScale(-1, 1, 1);

要么

yourView.layer.affineTransform =  CGAffineTransformMakeScale(-1, 1);