I was trying to implement something resembling the iBook store on iPad.
When you tap on a book cover it will flip and scale in one fluid motion, from the book cover to an empty background - which then loads the content.
I have tried different approaches, first flipping, then scaling, I tried wrapping the transitionFromView inside the animateWithDuration block, but i can't get it to look properly. It will either do one then the other, or in the last case do one, then 'flickr' and do nothing.
[UIView transitionFromView:fromView
toView:toView
duration:0.8
options:UIViewAnimationOptionTransitionFlipFromRight
completion:^(BOOL finished) {
if (finished) {
[UIView animateWithDuration:0.4
animations:^{[fromView setFrame:originFrame];}
completion:^(BOOL finished){}];
}
}];
Blocks are great for animations, no doubt!
But how can I both flip and scale at the same time?
Thanks in advance.
I have been able to produce this effect using non-block animations by performing the flip on a view containing the views you switch between.
CGRect endFrame; //The frame of the view after animation
UIView *sview; //The superview containing the first view
UIView *view1; //The first view, to be removed from sview
UIView *view2; //The second view, to be added to sview
view2.frame = view1.frame;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.8];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:sview cache:YES];
[view1 removeFromSuperview];
[sview addSubview:view2];
sview.frame = endFrame;
[UIView commitAnimations];
For this to work, the autosizing mask on view2 must be resizable in width and height.
Related
I have an app in which I use a lot of animations with ease in/out curves. I use this function in all cases: UIView animateWithDuration:delay:options:animations:completion
All these animations are working ok, but now I am trying to add one to a drawer that pops in and out, and for some reason this particular animation is always linear:
[UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
self.activityBar.view.frame = CGRectMake(0, self.activityBar.view.frame.origin.y, self.activityBar.view.frame.size.width, 20);
} completion:nil];
Why is this animation linear, while other animations with the same option are curved?
This is the view hierarchy for self.activityBar.view
-UIViewController
-UIViewController
-UIViewController (animation code lives here)
-UIViewController (activityBar)
-UIView (activityBar.view)
//Set old Frame for activityBar Here
[UIView animateWithDuration:2.0 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
[self.view layoutIfNeeded];
//Update to the new frame
self.activityBar.view.frame = CGRectMake(0, self.activityBar.view.frame.origin.y, self.activityBar.view.frame.size.width, 20);
} completion:^(BOOL finished) {
}];
I have set the animation like seen in below image. In which UIbutton move from left to right and then top to bottom. Animation work correctly but after completion of animation UIButton comes to its original place before the segue perform. so, it's not look good. I want to set that after the completion of animation UIButton can't come to it's own place before segue .
Here is my try with Image.
//Move button Left to Right
- (IBAction)btnEasy:(id)sender {
Easy=YES;
NSLog(#"your x is: %f ", self.btnEasy.frame.origin.x);
NSLog(#"your y is: %f ", self.btnEasy.frame.origin.y);
x1=self.btnEasy.frame.origin.x;
y1=self.btnEasy.frame.origin.y;
CGRect screenRect = [[UIScreen mainScreen] bounds];
[UIView animateWithDuration:1.150 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
self.btnEasy.frame = CGRectMake(screenRect.size.width/1.80, self.btnEasy.frame.origin.y, self.btnEasy.frame.size.width, self.btnEasy.frame.size.height);
[self performSelector:#selector(btneasyanimation) withObject:self afterDelay:1.160 ];}
completion:^(BOOL finished) {
}];
//Move Button top to Bottom
if (Easy==YES) {
if (isiPad2 || isiPadAir || isiPadRatina) {
//[self.view layoutIfNeeded];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationBeginsFromCurrentState:YES];
[UIView setAnimationDuration:1.0];
[_btnEasy setFrame:CGRectMake(self.view.frame.origin.x+290, self.view.frame.origin.y+900, self.btnEasy.frame.size.width, self.btnEasy.frame.size.height)];
[UIView commitAnimations];
}
else if (isiPhone4s) {
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationBeginsFromCurrentState:YES];
[UIView setAnimationDuration:1.0];
[_btnEasy setFrame:CGRectMake(self.view.frame.origin.x+92, self.view.frame.origin.y+428, self.btnEasy.frame.size.width, self.btnEasy.frame.size.height)];
[UIView commitAnimations];
}
}
[self performSelector:#selector(segueeMethod) withObject:self afterDelay:1.160 ];
Image :-
If you are not placing directly the button given it the frame, thus using autolayout (autoresize will end with the same effect). You need to explicitly use autolayout, retain a reference to your constraints and update them (you can search here how to do that) and then set the UIView animation block [button layoutIfNeeded]
You can see a detailed answer about it in this answer
There is an easy and quick way that will work with your current implementation. Provided you know exactly where you want the view to be once the animation is done, you can do the following:
in UIView animateWithDuration: ... assign the final transform (position & orientation) of the view in the completion block, i.e.:
completion:^(BOOL finished) {
// Assign views transform and appearance here, for when the animation completes
}
Hope that helps.
I use this code to move my view
[UIView animateWithDuration:0.3 animations:^{
[MyView setTransform:CGAffineTransformMakeTranslation(260, 0)];
} completion:^(BOOL finished) {
}];
MyView is a subview of self.view
I want to move it to right with 260
but it will first move to left with 130 and no animate
and then move to right with 260 and animate
I don't know why MyView move to left first?
The problem is that you are using auto layout. For a simple animation, trying turning off auto layout in storyboard.
Your animation should work then as expected.
I guess the problem is that the MakeTranslation function is making your view reset it's position before animating to the new transform.
Try this:
[UIView animateWithDuration:0.3 animations:^{
[MyView setTransform:CGAffineTransformTranslate(myView.transform, 260, 0)];
} completion:^(BOOL finished) {
}];
Apple's documentation describes UIViewAnimationOptionLayoutSubviews as:
Lay out subviews at commit time so that they are animated along with
their parent.
Here is a sample of the code I'm interested in. I wish to animate the -layoutSubviews of detailView; however, it doesn't seem to layout the subviews of detailView, so I'm not sure what effect it actually has.
void (^animation) () = ^
{
[self.detailView setNeedsLayout];
[self.detailView layoutIfNeeded];
};
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationOptionLayoutSubviews
animations:^{
animation();
}
completion:nil];
Since you want your second animation to occurs from the current state of your first animation (whether it is finished or not) I recommend to use the UIViewAnimationOptionLayoutSubviews option when setting your second animation.
[UIView animateWithDuration:0.2
delay:0.0
options:UIViewAnimationOptionLayoutSubviews
animations:^{
CGAffineTransform settingsTransform = CGAffineTransformMakeTranslation(self.animatedView.frame.size.width, 0);
self.animatedView.transform = settingsTransform;
}
completion:nil];
I have the current problem:
From an NSObject i'm creating / loading and animating a view:
[UIView beginAnimations:#"slidein" context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDidStopSelector:#selector(animationDidStop:finished:context:)];
[content.view setAlpha:1.0];
for (UIView *view in content.view.subviews) {
[view setAlpha:1];
}
[content.view setFrame:CGRectMake(0, 0, self.contentEnclosure.size.width, self.contentEnclosure.size.height)];
[UIView commitAnimations];
My problem is that, when orientation changes, my animated view disappears. If i make my view appear again, the orientation settings (frame size) are correct, so i'm guessing, that the resizing mask is applied correctly, i just don't understand what needs to be done, for my view not to disappear.
Use NSLog and check the new self.view.frame.origin.x and y respectively after the orientation.
Then set the frame according to the requirement.
Also, check for resizing mask. Try using UIViewAutoresizingFlexibleRightMargin/LeftMargin to suit your requirements.