ios - 坠落效果 - 在 z 轴上移动

Question

我正在尝试做一个下降效果。我的意思是向 z 轴移动。

到目前为止我是这样做的:

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

感谢this问题。

但这并不能帮助我实现我的目标。

我想制作下落效果的动画，就像用户的视线指向下落方向一样。

See this animation to explain my effect.

Answer 1

我制作了一个名为“Falling View”的 UIView，它使用 CATransform 层作为其支持层来托管您已经提供的转换。添加到“下降 View ”的任何 View 或图层都应用了此变换，因此您需要做的就是更改图层的 zPosition 以创建缩放/下降效果。

在这个例子中，我创建了一个名为 orangeSquare 的 CALayer，它是一个位于屏幕中央的橙色方 block 。当您调用 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 来做同样的事情，你只需要编辑 View 层的 zPosition

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

---

头文件只包含公共(public) animateSquare 方法

#import <UIKit/UIKit.h>

@interface FallingView : UIView

-(void)animateSquare;

@end