Эффект падения - перемещение по оси Z

Question

Я пытаюсь сделать эффект падения как. Я имею в виду двигаться в направлении оси Z.

Пока я сделал это:

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

Благодаря этому вопросу.

Но это не помогает мне достичь своей цели.

Я хочу анимировать эффект падения, как направление глаз пользователя - направление падения.

Смотрите эту анимацию, чтобы объяснить мой эффект.

Answer 1

Я сделал UIView под названием "Falling View", который использует слой CATransform в качестве резервного слоя, на котором размещено преобразование, которое вы уже предоставили. К любому виду или слою, добавленному в "Падающий вид", применяется это преобразование, поэтому все, что вам нужно сделать, это изменить zPosition слоя, чтобы создать эффект масштабирования / падения.

В этом примере я создал CALayer под названием orangeSquare, который представляет собой оранжевый квадрат, который находится в центре экрана. Когда вы вызываете метод animate, 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