What I'm trying to do is push in from the left side with a custom animation using CATransitions. In my normal code I want to use duration of 0.3, but in the example below I'm using 6.0 just so I can see the actual problem during the transition.
And it is really obvious that there is a fade going on when transitioning to the new view. The new view coming in fades from it's background color to the actual view, whereas the view that is sliding off screen fades from the actual view to it's background color. It's making for some odd looks when doing the push animation to transition.
Below is the code that I'm using for the transition. settingsController is the controller I'm trying to animate to.
let transition = CATransition()
transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
transition.duration = 6.0
transition.type = kCATransitionPush
transition.subtype = kCATransitionFromLeft
self.navigationController?.view.layer.addAnimation(transition, forKey: nil)
UIView.transitionFromView(self.view, toView: settingsViewController.view, duration: 0, options: UIViewAnimationOptions.TransitionNone, completion: nil)
self.navigationController?.pushViewController(settingsViewController, animated: false)
And as mentioned, the actual sliding animation works as I want it to, however there is this fade that happens that just makes it not look right . I've been searching google and stackoverflow and have not seen a solution posted, so I'm wondering if anyone has any idea how to get rid of this fade, or even if there is a work around that "simulates" this behavior so the user experience looks as I want it to.
I've tried making the background colors of both views the same and it still doesn't look right.
The usual way to use a sliding CATransition is to give the transitioning view/layer a superview that clips to bounds (or a superlayer that masks to bounds). That way, the sliding view/layer is not visible outside the superview's bounds, and we never see the fade.
Related
I have a problem when I want to create a transition between to views inside a container view in iOS application. I want to create an animation that makes my first view goes out sliding to the left and the second coming from the right (like switching between photos, a sort of push in Navigation Controller). I created my animation but the problem is that my subview does not disappear once reached the border of my container view but when it reaches the edge of my screen.
I used this code:
CATransition *transition = [CATransition animation];
transition.duration = animationTime;
transition.type = kCATransitionPush;
transition.subtype = transationSubtype;
[transition setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
transition.removedOnCompletion = YES;
[view.layer addAnimation:transition forKey:nil];
As visible in the image the red square goes out from the screen and not from its container and also the green comes inside from the screen edge and not from the container view edge. I want instead that the animation ends when reaches the container view edge.
I tried anything but I was not able to find something useful.
Try to set clipsToBounds property of the container view to YES
I have view which is rotating like this :
if view.layer.animation(forKey: kRotationAnimationKey) == nil {
let rotationAnimation = CABasicAnimation(keyPath: "transform.rotation")
rotationAnimation.fromValue = 0.0
rotationAnimation.toValue = Float(M_PI * 2.0)
rotationAnimation.duration = duration
rotationAnimation.repeatCount = Float.infinity
view.layer.add(rotationAnimation, forKey: kRotationAnimationKey)
}
there are multiple small button on this view.
While parent view is rotating and trying to tap on buttons , i am unable to tap and corresponding action method is not getting called.
Please help on this issue.
When you animate a view or layer, the actual view does not move through the intermediate locations of the animation. Instead, the view object jumps to it's final location at the beginning of the animation. (The animation actually takes place on a "presentation layer" which is laid on top of the view's normal layer hierarchy.)
If you want to be able to tap on a button that's "in flight" in an animation you will have to do hit testing on the view's presentation layer, and you can't have a button respond to touches using target/action.
I have a sample project on Github that demonstrates detecting taps on an in-flight view if you're interested. Take a look at https://github.com/DuncanMC/iOS-CAAnimation-group-demo on Github. It's written in Objective-C, but the idea is the same
I have implemented in my code today a CATransition of type cube,
as I seen here, CATransition can be added to self.view.layer,
so my first question is if I can use my CATransition for switching between viewControllers and not just UIViews?
if I can't do it,
please look at this image:
http://up411.siz.co.il/up1/hnmim2mtjodt.png
as you can see, while the transition is in process, I see the same view of both faces of the cube,
I'd like it to be that one face presents view A and the other one presents view B
here is the code if needed :
self.view.layer.addAnimation(createTransition("Right"), forKey: "kCATransition")
func createTransition(side:String) -> CATransition{
var transition = CATransition()
transition.delegate = self
transition.duration = 0.6
transition.timingFunction = CAMediaTimingFunction(name: "easeInEaseOut")
transition.type = "cube"
transition.subtype = "from\(side)"
return transition
}
You have to add the same transition to the view layer of the second view controller's view as well.
Apple documentation in the Core Animation Programming Guide:
To perform a transition animation, you create a CATransition object and add it to the layers involved in the transition.
I am trying to create a custom UIView transition. Basically when a certain modal view is presented then the views it is covering up move into the background.
To achieve this I am using Core animation to manipulate the CATransform3D on the layer of the view I am moving to the background then presenting the modal view on top of that.
To move the view into the background I am creating a CABasicAnimation to animate the change in the CATransform3D like this
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"transform"];
CATransform3D toTransform = CATransform3DIdentity;
toTransform.m34 = 1.0f / -500.0f;
toTransform = CATransform3DTranslate(toTransform, 0.0f, 0.0f, -40.0f);
[animation setFromValue:[NSValue valueWithCATransform3D:CATransform3DIdentity]];
[animation setToValue:[NSValue valueWithCATransform3D:toTransform]];
[animation setDuration:1.0f];
self.menuView.layer.transform = toTransform;
[self.menuView.layer addAnimation:animation forKey:#"moveBackAnimation];
self.menuView is the view I am moving back.
This works great until I add in the modal view.
RVLAddViewController *addViewController = [[RVLAddViewController alloc] initWithNibName:#"RVLAddViewController" bundle:nil];
[self presentViewController:addViewController animated:YES completion:nil];
I call this code right under the animation when a button is pressed.If this code isn't present them every thing works as expected the view looks like it is just fading into the distance and then it stays there.
When the modal view is presented then instead of gradually fading into the distance, it shoots down to the smaller size and moves into the top left hand corner.
I'll upload a sample application as soon as I can, github is down right now. edit No need -a solution has been given! /edit
I messed around with this for a while, and it looks like it has to do with auto layout. If you turn that off, it works as you would expect.
I need a a little help with my animation.
I got two buttons, the first button calls an animation and the second one calls another animation.
Now when I press the first button a code like this one down below will be called.
The Problem is that when I press the second button the animation kinda teleports to it's starting position (second animations position), is there a way to make the animations flow together from where it was interupted?
CABasicAnimation *anim1 = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
anim1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
anim1.fromValue = [NSNumber numberWithFloat:((-10*M_PI)/180)];
anim1.toValue = [NSNumber numberWithFloat:((10*M_PI)/180)];
anim1.repeatCount = HUGE_VALF;
anim1.autoreverses = YES;
anim1.duration = .5;
[head addAnimation:anim1 forKey:#"transform"];
Virtual picture:
http://i47.tinypic.com/2yopif6.jpg
The black line is the first animation, the red is the second animation, and the green is the one I'm trying to figure out. According to the picture it was interupted in the middle of the black.
Why not using the animation method instead of the UIView class - just make sure you use the UIViewAnimationOptionBeginFromCurrentState option?
Check the reference doc here: http://developer.apple.com/library/ios/#documentation/uikit/reference/uiview_class/uiview/uiview.html
EDIT
I think this tutorial will help you better: http://wangling.me/2011/06/core-animation-101-from-and-to/. What they are trying to achieve there is to bounce a ball after triggering the animation through a button. When the button is pressed a second time the ball should bounce back from the current position. There is a section where they mention they rely on 2 delegates method animationDidStart and animationDidStop to implement this desired effect.