Falling effect - move on z axis - ios

Question

I m trying to do a falling effect like. I mean move toward z axis.
So far I did this:
CATransform3D transform = CATransform3DIdentity;
transform.m34 = 1.0 / -2000;
Thanks to this question.
But it doesn't help me to achieve my goal.
I want to animate falling effect like the user's eyes directions is to the falling direction.
See this animation to explain my effect.

Answer 1

I have made a UIView called 'Falling View' that uses a CATransform layer as its backing layer that hosts the transform you already provided. Any view or layer added to the 'Falling View' has this transform applied to it, so all you need to do is change the layer's zPosition to create a zooming / falling effect.
In this example I created a CALayer called orangeSquare that is an orange square that sits in the center of the screen. When you call the animate method the square's zPosition is changed to the distance used in the CATransform3D, which is the greatest value it can be before it stops being visible.
#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
You can do the same using a UIView instead of a CALayer you just have to edit the view's layer's zPosition
UIView *orangeSquareView;
orangeSquareView.layer.zPosition = 2000;
The header file just consists of the public animateSquare method
#import <UIKit/UIKit.h>
#interface FallingView : UIView
-(void)animateSquare;
#end