Question

我试图做一个下降的效果。我的意思是朝z轴移动。

到目前为止，我做到了这一点：

CATransform3D transform = CATransform3DIdentity;
transform.m34 = 1.0 / -2000;

感谢this问题。

但它无助于我实现目标。

我想设置降落效果，就像用户的眼睛方向是下降方向一样。

See this animation to explain my effect.

Answer 1

我制作了一部叫做“堕落的观点”的UIView＆＃39;使用CATransform图层作为其承载您已提供的转换的后备层。任何视图或图层都会添加到“下降视图”中。将此变换应用于它，所以您需要做的就是更改图层的zPosition以创建缩放/下降效果。

在这个例子中，我创建了一个名为orangeSquare的CALayer，它是一个位于屏幕中心的橙色方块。当您调用animate方法时，square的zPosition将更改为CATransform3D中使用的距离，这是它在停止显示之前的最大值。

#import "FallingView.h"

#define zDistance 2000.0

@interface FallingView()

@property (nonatomic) CATransformLayer *backgroundLayer;
@property (nonatomic) CALayer *orangeSquare;

@end

@implementation FallingView

-(void)awakeFromNib {
    //set up the layers
    [self setupLayers];
}

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        //set up the layers
        [self setupLayers];
    }
    return self;
}

-(void)setupLayers {
    //set up the background layer property to point to this view's layer
    self.backgroundLayer = (CATransformLayer *)self.layer;

    //add a transform to the layer
    CATransform3D transform = CATransform3DIdentity;
    transform.m34 = -1.0/zDistance;
    self.backgroundLayer.transform = transform;

    //set up the orange square
    self.orangeSquare = [CALayer layer]; //initialize the orange square layer
    self.orangeSquare.backgroundColor = [UIColor orangeColor].CGColor; //set its background color to orange
    self.orangeSquare.frame = CGRectMake(0, 0, 50, 50); //set its size to width and height to 50
    self.orangeSquare.position = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2); //center the square

    //add the orange square to the background
    [self.backgroundLayer addSublayer:self.orangeSquare];
}

-(void)animateSquare {
    [CATransaction begin]; //Begin a new transaction
    [CATransaction setAnimationDuration:2.0]; //set its duration
    [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]]; //ease in for a falling effect

    //create a basic animation to alter a layer's zPosition
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"zPosition"];
    animation.fromValue = @0;
    animation.toValue = @zDistance;

    //add the animation to the orange square
    [self.orangeSquare addAnimation:animation forKey:@"falling_effect"];

    [CATransaction commit]; //commit the transaction
}

//change the default backing layer to a CATransformLayer
+(Class)layerClass {
    return [CATransformLayer class];
}

@end

你可以使用UIView而不是CALayer来做同样的事情，你只需要编辑视图的zPosition

UIView *orangeSquareView;
orangeSquareView.layer.zPosition = 2000;

头文件只包含公共的animateSquare方法

#import <UIKit/UIKit.h>

@interface FallingView : UIView

-(void)animateSquare;

@end

下降效果 - 在z轴上移动

1 个答案: