Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

3D Animation - CABasicAnimation and CATransform3D giving gap between views

Tags:

ios

iphone

ios5

caanimation

catransform3d

So,I am trying to implement an animation which is in this app http://itunes.apple.com/us/app/spg-mobile-app/id312306003?mt=8 which is in the first view

I have implemented animation for flipping views and i am succeeded in animating one side and when i have given the reverse logic for reverse flipping, it is giving some gap between views

here is my code

- (UIImage *)screenShot: (UIView *) aView
{
    // Arbitrarily masks to 40%. Use whatever level you like
    UIGraphicsBeginImageContext(hostView.frame.size);
    [aView.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    CGContextSetRGBFillColor (UIGraphicsGetCurrentContext(), 0, 0, 0, 0.4f);
    CGContextFillRect (UIGraphicsGetCurrentContext(), hostView.frame);
    UIGraphicsEndImageContext();
    return image;
}


- (CALayer *) createLayerFromView: (UIView *) aView transform: (CATransform3D) transform
{

    CALayer *imageLayer = [CALayer layer];
    imageLayer.anchorPoint = CGPointMake(1.0f, 1.0f);
    imageLayer.frame = (CGRect){.size = hostView.frame.size};
    imageLayer.transform = transform;
    UIImage *shot = [self screenShot:aView];
    imageLayer.contents = (__bridge id) shot.CGImage;

    return imageLayer;
}

- (void)animationDidStart:(CAAnimation *)animation
{

    UIView *source = (UIView *) _source;
    [source removeFromSuperview];
}

- (void)animationDidStop:(CAAnimation *)animation finished:(BOOL)finished
{

    UITableView *dest = (UITableView *) destination;
    dest.frame = CGRectMake(160, 0, 160, 460);
    [hostView addSubview:dest];
    [transformationLayer removeFromSuperlayer];


    //if (delegate)
    //SAFE_PERFORM_WITH_ARG(delegate, @selector(segueDidComplete), nil);
}

-(void)animateWithDuration: (CGFloat) aDuration
{
    goesForward=FALSE ;

    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.delegate = self;
    group.duration = aDuration;

    CGFloat halfWidth = hostView.frame.size.width; // 2.0f;
    float multiplier = goesForward ? -1.0f : 1.0f;

    CABasicAnimation *translationX = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.translation.x"];
    translationX.toValue = [NSNumber numberWithFloat:multiplier * halfWidth];

    CABasicAnimation *translationZ = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.translation.z"];
    translationZ.toValue = [NSNumber numberWithFloat:-200.0]; //halfWidth];

    CABasicAnimation *rotationY = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.rotation.y"];
    rotationY.toValue = [NSNumber numberWithFloat: multiplier * M_PI_2];

    group.animations = [NSArray arrayWithObjects: rotationY, translationX, translationZ, nil];
    group.fillMode = kCAFillModeForwards;
    group.removedOnCompletion = NO;

    [CATransaction flush];
    [transformationLayer addAnimation:group forKey:kAnimationKey];
}

- (void) constructRotationLayer
{

    UIView *source = (UIView *) _source;
    UIView *dest = (UIView *) destination;
    hostView = [source superview];

    //    if ([hostView isKindOfClass:[UIWindow class]]) {
    //        NSLog(@"I am window class");
    //    }

    transformationLayer = [CALayer layer];
    transformationLayer.frame = hostView.bounds;  //CGRectMake(40, 0, 280, 460);    
    transformationLayer.anchorPoint = CGPointMake(0.5f, 0.5f);
    CATransform3D sublayerTransform = CATransform3DIdentity;
    sublayerTransform.m34 = 1.0 / -1000;
    [transformationLayer setSublayerTransform:sublayerTransform];
    [hostView.layer addSublayer:transformationLayer];


    CATransform3D transform = CATransform3DMakeTranslation(0, 0, 0);
    [transformationLayer addSublayer:[self createLayerFromView:source transform:CATransform3DRotate(transform, M_PI_2, 0, 0, 0)]];

    transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
    transform = CATransform3DTranslate(transform, hostView.frame.size.width, 0, 0);

    if (!goesForward)
    {
        transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
        transform = CATransform3DTranslate(transform, hostView.frame.size.width, 0, 0);
        transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
        transform = CATransform3DTranslate(transform, hostView.frame.size.width, 0, 0);
    }

    [transformationLayer addSublayer:[self createLayerFromView:dest transform:transform]];
}

- (void)perform
{
    [self constructRotationLayer];
    [self animateWithDuration:0.4f];
}

So, here i am calling perform method first and Here i have uploaded my total code Here

This Code worked for me a bit but still getting some gap, the thing is the frame of the going view and coming view should be same

- (UIImage *)screenShot: (UIView *) aView
{
    // Arbitrarily masks to 40%. Use whatever level you like
    UIGraphicsBeginImageContext(hostView.frame.size);
    [aView.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    CGContextSetRGBFillColor (UIGraphicsGetCurrentContext(), 0, 0, 0, 0.4f);
    CGContextFillRect (UIGraphicsGetCurrentContext(), hostView.frame);
    UIGraphicsEndImageContext();
    return image;
}


- (CALayer *) createLayerFromView: (UIView *) aView transform: (CATransform3D) transform
{
    CALayer *imageLayer = [CALayer layer];
    imageLayer.anchorPoint = CGPointMake(1.0f, 1.0f);
    imageLayer.frame = (CGRect){.size = hostView.frame.size};
    imageLayer.transform = transform;  
    UIImage *shot = [self screenShot:aView];
    imageLayer.contents = (__bridge id) shot.CGImage;
    return imageLayer;
}

- (void)animationDidStart:(CAAnimation *)animation 
{
//    UIView *source = (UIView *) super.sourceViewController;
    [source removeFromSuperview];
}

- (void)animationDidStop:(CAAnimation *)animation finished:(BOOL)finished 
{
//    UIView *dest = (UIView *) super.destinationViewController;
    if (hostView !=nil) {
        NSLog(@"hostView %@",hostView);
        if (dest) {
    [hostView addSubview:dest];              
        }
    }

    [transformationLayer removeFromSuperlayer];
    if (delegate)
        SAFE_PERFORM_WITH_ARG(delegate, @selector(segueDidComplete), nil);

}

-(void)animateWithDuration: (CGFloat) aDuration
{
    CAAnimationGroup *group = [CAAnimationGroup animation]; 
    group.delegate = self; 
    group.duration = aDuration; 

    CGFloat halfWidth = hostView.frame.size.width / 2.0f;
    float multiplier = goesForward ? -1.0f : 1.0f;

    CABasicAnimation *translationX = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.translation.x"];
    translationX.toValue = [NSNumber numberWithFloat:multiplier * halfWidth];

    CABasicAnimation *translationZ = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.translation.z"];
    translationZ.toValue = [NSNumber numberWithFloat:-halfWidth];

    CABasicAnimation *rotationY = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.rotation.y"]; 
    rotationY.toValue = [NSNumber numberWithFloat: multiplier * M_PI_2];

    group.animations = [NSArray arrayWithObjects: rotationY, translationX, translationZ, nil];
    group.fillMode = kCAFillModeForwards; 
    group.removedOnCompletion = NO;

    [CATransaction flush];
    [transformationLayer addAnimation:group forKey:kAnimationKey];

}

- (void) constructRotationLayer
{
//    UIView *source = (UIView *) super.sourceViewController;
//    UIView *dest = (UIView *) super.destinationViewController;
    hostView = source.superview;

    transformationLayer = [CALayer layer];
    transformationLayer.frame = hostView.bounds;
    transformationLayer.anchorPoint = CGPointMake(0.5f, 0.5f);
    CATransform3D sublayerTransform = CATransform3DIdentity; 
    sublayerTransform.m34 = 1.0 / -1000;
    [transformationLayer setSublayerTransform:sublayerTransform];   
    [hostView.layer addSublayer:transformationLayer];

    CATransform3D transform = CATransform3DMakeTranslation(0, 0, 0);
    [transformationLayer addSublayer:[self createLayerFromView:source transform:transform]];

    transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
    transform = CATransform3DTranslate(transform, hostView.frame.size.width, 0, 0);
    if (!goesForward) 
    {
        transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
        transform = CATransform3DTranslate(transform, hostView.frame.size.width, 0, 0);
        transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
        transform = CATransform3DTranslate(transform, hostView.frame.size.width, 0, 0);
    }

    [transformationLayer addSublayer:[self createLayerFromView:dest transform:transform]];
}

- (void)perform
{
    [self constructRotationLayer];
    [self animateWithDuration:0.4f];
}
like image 266
Charan Avatar asked Apr 09 '12 09:04

Charan

2 Answers

I did the same. My working code is below. Please like it. 

- (UIImage *)screenShot: (UIView*)  aView
    {
        // Arbitrarily masks to 40%. Use whatever level you like
        UIGraphicsBeginImageContext(hostView.frame.size);
        [aView.layer renderInContext:UIGraphicsGetCurrentContext()];
        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
        CGContextSetRGBFillColor (UIGraphicsGetCurrentContext(), 0, 0, 0, 0.4f);
        CGContextFillRect (UIGraphicsGetCurrentContext(), hostView.frame);
        UIGraphicsEndImageContext();
        return image;
    }


    - (CALayer*)  createLayerFromView: (UIView *) aView transform: (CATransform3D) transform
    {
        CALayer *imageLayer    = [CALayer layer];
        imageLayer.anchorPoint = CGPointMake(1.0f, 1.0f);
        imageLayer.frame       = (CGRect){.size = hostView.frame.size};
        imageLayer.transform   = transform;  
        UIImage *shot          = [self screenShot:aView];
        imageLayer.contents    = (id) shot.CGImage;

        return imageLayer;
    }

    - (void)animationDidStart:(CAAnimation *)animation 
    {
        UIViewController *source;
        if (islogin) {
            source = (UIViewController *)self.navigationController;
        }
        else
            source = (UIViewController *)self.joinTABBARController;
        [source.view removeFromSuperview];
    }

    - (void)animationDidStop:(CAAnimation *)animation finished:(BOOL)finished 
    {
        UIViewController *dest;
        if (islogin) {
           dest = (UIViewController *) self.joinTABBARController; 
        }
        else
            dest = (UIViewController  *)self.navigationController;
        [hostView addSubview:dest.view];
        [transformationLayer removeFromSuperlayer];
    //    if (delegate)
    //        SAFE_PERFORM_WITH_ARG(delegate, @selector(segueDidComplete), nil);
    }

    //-(void)animateWithDuration: (CGFloat) aDuration
    //{
    //    CAAnimationGroup *group = [CAAnimationGroup animation]; 
    //    group.delegate = self; 
    //    group.duration = aDuration; 
    //    
    //    CGFloat halfWidth = hostView.frame.size.width / 2.0f;
    //    float multiplier = goesForward ? -1.0f : 1.0f;
    //    
    //    CABasicAnimation *translationX = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.translation.x"];
    //    translationX.toValue = [NSNumber numberWithFloat:multiplier * halfWidth];
    //    
    //    CABasicAnimation *translationZ = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.translation.z"];
    //    translationZ.toValue = [NSNumber numberWithFloat:-halfWidth];
    //    
    //    CABasicAnimation *rotationY = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.rotation.y"]; 
    //    rotationY.toValue = [NSNumber numberWithFloat: multiplier * M_PI_2];
    //    
    //    group.animations = [NSArray arrayWithObjects: rotationY, translationX, translationZ, nil];
    //    group.fillMode = kCAFillModeForwards; 
    //    group.removedOnCompletion = NO;
    //    
    //    [CATransaction flush];
    //    [transformationLayer addAnimation:group forKey:kAnimationKey];
    //}

    - (void) constructRotationLayer:(TranDirection)aDirection
    {
        UIViewController *source;
        UIViewController *dest;
        if (islogin) {
            source = (UIViewController *) self.navigationController;
            dest   = (UIViewController*)  self.joinTABBARController;
        }
        else
        {
            source = (UIViewController *) self.joinTABBARController;
            dest   = (UIViewController *) self.navigationController;
        }
        hostView = source.view.superview;

        transformationLayer             = [CALayer layer];
        transformationLayer.frame       = hostView.bounds;
        transformationLayer.anchorPoint = CGPointMake(0.5f, 0.5f);
        CATransform3D sublayerTransform = CATransform3DIdentity; 
        sublayerTransform.m34           = 1.0 / -1000;
        [transformationLayer setSublayerTransform:sublayerTransform];   
        [hostView.layer addSublayer:transformationLayer];

        CATransform3D transform = CATransform3DMakeTranslation(0, 0, 0);
        [transformationLayer addSublayer:[self createLayerFromView:source.view transform:transform]];

        //    transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
        //    transform = CATransform3DTranslate(transform, hostView.frame.size.width, 0, 0);
        //    if (!goesForward) 
        //    {
        //        transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
        //        transform = CATransform3DTranslate(transform, hostView.frame.size.width, 0, 0);
        //        transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
        //        transform = CATransform3DTranslate(transform, hostView.frame.size.width, 0, 0);
        //    }
        //    
        //    [transformationLayer addSublayer:[self createLayerFromView:dest.view transform:transform]];

        if (aDirection == RTOL)
        {
            transform = CATransform3DRotate(transform, radians(90), 0, 1, 0);
            transform = CATransform3DTranslate(transform, CUBESIZE, 0, 0);
            [transformationLayer addSublayer:[self createLayerFromView:dest.view transform:transform]];
        } else {
            transform = CATransform3DRotate(transform, radians(90), 0, 1, 0);
            transform = CATransform3DTranslate(transform, CUBESIZE, 0, 0);
            transform = CATransform3DRotate(transform, radians(90), 0, 1, 0);
            transform = CATransform3DTranslate(transform, CUBESIZE, 0, 0);
            transform = CATransform3DRotate(transform, radians(90), 0, 1, 0);
            transform = CATransform3DTranslate(transform, CUBESIZE, 0, 0);
            [transformationLayer addSublayer:[self createLayerFromView:dest.view transform:transform]];

        }

    }

    -(void)moveFrom:(TranDirection)aDirection duration:(float)aDuration
    {
        [CATransaction flush];
        CABasicAnimation *rotation;
        CABasicAnimation *translationX;
        CABasicAnimation *translationZ;
        CAAnimationGroup *group = [CAAnimationGroup animation]; 
        group.delegate = self; 
        group.duration = aDuration; 

        if (aDirection == RTOL)
        {
            translationX         = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.translation.x"];
            translationX.toValue = [NSNumber numberWithFloat:-(CUBE_VERTICAL_WIDTH / 2)];
            rotation             = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.rotation.y"]; 
            rotation.toValue     = [NSNumber numberWithFloat:radians(-90)];
        } else {
            translationX         = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.translation.x"];
            translationX.toValue = [NSNumber numberWithFloat:(CUBE_VERTICAL_WIDTH / 2)];
            rotation             = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.rotation.y"]; 
            rotation.toValue     = [NSNumber numberWithFloat:radians(90)] ;
        }

        translationZ              = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.translation.z"];
        translationZ.toValue      = [NSNumber numberWithFloat:-(CUBE_VERTICAL_WIDTH / 2)];
        group.animations          = [NSArray arrayWithObjects: rotation, translationX, translationZ, nil];
        group.fillMode            = kCAFillModeForwards; 
        group.removedOnCompletion = NO;
        [transformationLayer addAnimation:group forKey:kAnimationKey];
    }

    - (void)perform:(TranDirection)tdir
    {
        [self constructRotationLayer:tdir];
        // [self animateWithDuration:2.0f];
        [self moveFrom:tdir duration:.4];
    }
like image 42
dayitv89 Avatar answered Nov 11 '22 07:11

dayitv89

At last solved my problem, messed up with anchor point

- (UIImage *)screenShot: (UIView *) aView
{
    // Arbitrarily masks to 40%. Use whatever level you like
    UIGraphicsBeginImageContext(hostView.frame.size);
    [aView.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    CGContextSetRGBFillColor (UIGraphicsGetCurrentContext(), 0, 0, 0, 0.4f);
    CGContextFillRect (UIGraphicsGetCurrentContext(), hostView.frame);
    UIGraphicsEndImageContext();
    return image;
}


- (CALayer *) createLayerFromView: (UIView *) aView transform: (CATransform3D) transform
{
    CALayer *imageLayer = [CALayer layer];
    imageLayer.anchorPoint = CGPointMake(1.0f, 1.0f);
    imageLayer.frame = (CGRect){.size = hostView.frame.size};
    imageLayer.transform = transform;  
    UIImage *shot = [self screenShot:aView];
    imageLayer.contents = (__bridge id) shot.CGImage;
    return imageLayer;
}

- (void)animationDidStart:(CAAnimation *)animation 
{
//    UIView *source = (UIView *) super.sourceViewController;
    [source removeFromSuperview];
}

- (void)animationDidStop:(CAAnimation *)animation finished:(BOOL)finished 
{
//    UIView *dest = (UIView *) super.destinationViewController;
    if (hostView !=nil) {
        NSLog(@"hostView %@",hostView);
        if (dest) {
    [hostView addSubview:dest];              
        }
    }

    [transformationLayer removeFromSuperlayer];
    if (delegate)
        SAFE_PERFORM_WITH_ARG(delegate, @selector(segueDidComplete), nil);

}

-(void)animateWithDuration: (CGFloat) aDuration
{
    CAAnimationGroup *group = [CAAnimationGroup animation]; 
    group.delegate = self; 
    group.duration = aDuration; 

    CGFloat halfWidth = hostView.frame.size.width / 2.0f;
    float multiplier = goesForward ? -1.0f : 1.0f;

    CABasicAnimation *translationX = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.translation.x"];
    translationX.toValue = [NSNumber numberWithFloat:multiplier * halfWidth];

    CABasicAnimation *translationZ = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.translation.z"];
    translationZ.toValue = [NSNumber numberWithFloat:-halfWidth];

    CABasicAnimation *rotationY = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.rotation.y"]; 
    rotationY.toValue = [NSNumber numberWithFloat: multiplier * M_PI_2];

    group.animations = [NSArray arrayWithObjects: rotationY, translationX, translationZ, nil];
    group.fillMode = kCAFillModeForwards; 
    group.removedOnCompletion = NO;

    [CATransaction flush];
    [transformationLayer addAnimation:group forKey:kAnimationKey];

}

- (void) constructRotationLayer
{
//    UIView *source = (UIView *) super.sourceViewController;
//    UIView *dest = (UIView *) super.destinationViewController;
    hostView = source.superview;

    transformationLayer = [CALayer layer];
    transformationLayer.frame = hostView.bounds;
    transformationLayer.anchorPoint = CGPointMake(0.5f, 0.5f);
    CATransform3D sublayerTransform = CATransform3DIdentity; 
    sublayerTransform.m34 = 1.0 / -1000;
    [transformationLayer setSublayerTransform:sublayerTransform];   
    [hostView.layer addSublayer:transformationLayer];

    CATransform3D transform = CATransform3DMakeTranslation(0, 0, 0);
    [transformationLayer addSublayer:[self createLayerFromView:source transform:transform]];

    transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
    transform = CATransform3DTranslate(transform, hostView.frame.size.width, 0, 0);
    if (!goesForward) 
    {
        transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
        transform = CATransform3DTranslate(transform, hostView.frame.size.width, 0, 0);
        transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
        transform = CATransform3DTranslate(transform, hostView.frame.size.width, 0, 0);
    }

    [transformationLayer addSublayer:[self createLayerFromView:dest transform:transform]];
}

- (void)perform
{
    [self constructRotationLayer];
    [self animateWithDuration:0.4f];
}
like image 133
Charan Avatar answered Nov 11 '22 08:11

Charan
Sign in to Comment

Related questions

Registering other company on iOS developer program [closed]
popViewController / viewWillAppear not animated in iOS 5
Reloading AVMutableComposition
iPhone Twitter SDK integration problems with iOS 5 devices
Objective-C / iOS: Converting an array of objects to JSON string
Moving an image along a series of CGPoints
UITableView's tableHeaderView height property is changed to strange values during load and rotation
When Dismissing a Modal View Controller the underlying UIScrollView resizes to fullscreen
How to be notified when iPhone enters airplane mode?
iPhone Bluetooth Communication Examples
Accept untrusted SSL server certificate with CFStream socket on iOS
Change contentSizeForViewInPopover on navigationController push on iOS
iphone - play audio stream in background
why there is no "Use Core Data" check box with Tabbed Application template
How to use __bridge for ARC correctly
Build a list of constants variable from other constants
Multiple iPhone Developer Accounts on One Mac?
Calculate bearing between two locations (lat, long)
Why does iPhone 6 use @2x image assets?
UITableView, make footer stay at bottom of screen? [duplicate]

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!